Better homepage layout

diff --git a/Graphics/Spirals/index.org b/Graphics/Spirals/index.org
index 21cd241..cffa9dd 100644 (file)
--- a/Graphics/Spirals/index.org
+++ b/Graphics/Spirals/index.org
@@ -7,8 +7,28 @@
 #+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   */
+  }
+
+  .flex-center video {
+    width: min(90%, 1000px); /* whichever is smaller wins */
+    height: auto;            /* preserve aspect ratio */
+  }
+
+  .responsive-img {
+    width: min(100%, 1000px);
+    height: auto;
+  }
+</style>
+#+end_export
+
 * Spiral with increasing density
-#+attr_html: :width 1000px
+
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral.png]]
 
@@ -21,7 +41,8 @@ progressively increases towards the center.
 #+INCLUDE: "spiral.bas" src basic-qb45
 
 * Spiral with varying height
-#+attr_html: :width 1000px
+
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral, 2.png]]
 
@@ -36,7 +57,7 @@ displaced by sinus function where input is the distance to the center.
 
 * Shaded spiral
 
-#+attr_html: :width 800px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 800px
 [[file:spiral, 3.png]]
 
@@ -55,13 +76,13 @@ Similar to previous spiral, Line segments are connected between the
 neighbors. Spiral height and width are calculated such that they form
 multiple linked spherical shapes. Initially point cloud in shown:
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral, 4, 1.png]]
 
 In the next step, points are connected using lines:
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral, 4, 2.png]]
 
@@ -72,7 +93,7 @@ In the next step, points are connected using lines:
 
 * Textured spherical spiral
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral, 5.png]]
 
@@ -88,7 +109,7 @@ attempted.
 
 * Textured and shaded spherical spiral
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:spiral, 6.png]]