Better homepage layout

diff --git a/Graphics/index.org b/Graphics/index.org
index 96d1be8..3a6bd61 100644 (file)
--- a/Graphics/index.org
+++ b/Graphics/index.org
@@ -7,16 +7,27 @@
 #+OPTIONS: H:20 num:20
 #+OPTIONS: author:nil
 
+#+begin_export html
+<style>
+  .flex-center {
+    display: flex;            /* activate flexbox */
+    justify-content: center;  /* horizontally center anything inside   */
+  }
+</style>
+#+end_export
+
 * Bump mapping
 
 Light source moves around. Based on light source location, different
 parts of the surface become illuminated.
 
 #+begin_export html
-<video width="300" controls loop autoplay>
-  <source src="Bump mapping.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="300" controls loop autoplay>
+    <source src="Bump mapping.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Bump mapping.bas][Source code]]
@@ -26,10 +37,12 @@ parts of the surface become illuminated.
 Tree grows and branches out.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Tree.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Tree.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Tree.bas][Source code]]
@@ -41,10 +54,12 @@ Tree grows and branches out.
 Grid of dots is rotated on the screen.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="2D rotation.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="2D rotation.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:2D rotation.bas][Source code]]
@@ -57,11 +72,13 @@ Program demonstrates various animation effects that can be
 accomplished using text-mode rendering.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="text mode animation.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
-#+end_export
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="text mode animation.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
+  #+end_export
 
 [[file:text mode animation.bas][Source code]]
 
@@ -72,10 +89,12 @@ the ground because of the gravity. Once particle falls on the surface,
 it tries to skid around a bit, bit ultimately freezes in-place.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Snowfall.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Snowfall.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Snowfall.bas][Source code]]
@@ -88,10 +107,12 @@ Application of trigonometry functions is explored here to calculate
 line coordinates.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Screensaver.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Screensaver.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Screensaver.bas][Source code]]
@@ -103,10 +124,12 @@ line coordinates.
 Quick implementation for colorful flying hand fans.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Screensaver, flying hand fans.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Screensaver, flying hand fans.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Screensaver, flying hand fans.bas][Source code]]
@@ -119,10 +142,12 @@ Algorithm to demonstrate rendering or polygons across arbitrary
 coordinates.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Polygon.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Polygon.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Polygon.bas][Source code]]
@@ -135,15 +160,16 @@ Algorithm to demonstrate rendering or textured polygons across
 arbitrary coordinates.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Polygon textured.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Polygon textured.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Polygon textured.bas][Source code]]
 
-
 * Yin and yang animation
 
 Yin and yang is a concept that originated in Chinese philosophy,
@@ -154,10 +180,12 @@ the whole is greater than the assembled parts and the parts are
 important for cohesion of the whole.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Yin and yang.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Yin and yang.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Yin and yang.bas][Source code]]
@@ -170,27 +198,30 @@ Trivial to implement but interesting looking effect. Various particles
 are orbiting central point. Each particle is connected to the center.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="Orbiting particles.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Orbiting particles.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Orbiting particles.bas][Source code]]
 
 #+INCLUDE: "Orbiting particles.bas" src basic-qb45
 
-
 * DNA animation
 
 Animated DNA. Nowhere close to being anatomically correct, but
 resembles animation as seen in the movies :)
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="DNA.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="DNA.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:DNA.bas][Source code]]
@@ -202,15 +233,16 @@ resembles animation as seen in the movies :)
 Effect inspired by "The Matrix" movie.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="matrix.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="matrix.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:matrix.bas][Source code]]
 
-
 * Hacker
 
 Ultra-realistic hacker screen simulator! Behold da glory of a true
@@ -218,10 +250,12 @@ hacker's terminal, brimming wif mystical green text that cascades like
 a waterfall of knowledge across thy monitor.
 
 #+begin_export html
-<video width="800" controls loop autoplay>
-  <source src="hacker.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="hacker.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:hacker.bas][Source code]]

diff --git a/tools/update web site b/tools/update web site
index cfbb583..33afbe5 100755 (executable)
--- a/tools/update web site
+++ b/tools/update web site
@@ -14,6 +14,12 @@ cd "${0%/*}"; if [ "$1" != "T" ]; then gnome-terminal -e "'$0' T"; exit; fi;
         emacs --batch -l ~/.emacs --visit=index.org --funcall=org-html-export-to-html --kill
     )
 
+    (
+        cd "cd Graphics"
+        rm -f index.html
+        emacs --batch -l ~/.emacs --visit=index.org --funcall=org-html-export-to-html --kill
+    )
+
     (
         cd "cd Graphics/Spirals"
         rm -f index.html