Better homepage layout

diff --git a/.gitignore b/.gitignore
index dfbf8f0..92e3912 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@
 /index.html
 /Graphics/3D/3D Synthezier/doc/index.html
 /Math/Truth table calculator/doc/index.html
+/Graphics/Spirals/index.html

diff --git a/Graphics/3D/3D Synthezier/doc/index.org b/Graphics/3D/3D Synthezier/doc/index.org
index 641003c..1ecf34f 100644 (file)
--- a/Graphics/3D/3D Synthezier/doc/index.org
+++ b/Graphics/3D/3D Synthezier/doc/index.org
@@ -8,6 +8,25 @@
 #+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
+
 
 * Operating principle
 
@@ -36,16 +55,30 @@ They were produced by importing generated [[https://en.wikipedia.org/wiki/Wavefr
 [[https://www.blender.org/][Blender]].
 
 ** Rectangular city
+
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:rectangular city, 1.jpeg]]
 
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:rectangular city, 2.jpeg]]
 
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:rectangular city, 3.jpeg]]
 ** Hexagonal city
+
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:hexagonal city, 1.jpeg]]
 
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:hexagonal city, 2.jpeg]]
 
+#+attr_html: :class responsive-img
+#+attr_latex: :width 1000px
 [[file:hexagonal city, 3.jpeg]]
 * Scene description language
 See also examples.