Better homepage layout

diff --git a/index.org b/index.org
index 8a3f383..ad6ad62 100644 (file)
--- a/index.org
+++ b/index.org
@@ -14,6 +14,16 @@
     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
 
@@ -44,7 +54,7 @@ with many caps or big thinking depth, for reasonable responce time.
 
 [[file:Games/Checkers 2/checkers2.bas][Source code]]
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:Games/Checkers 2/checkers2.bas][file:Games/Checkers%202/screenshot.png]]
 
@@ -55,7 +65,7 @@ algorithms and getting fun looking results quite easily.
 
 #+begin_export html
 <a href="Graphics/" class="flex-center">
-  <video width="1000" controls loop autoplay>
+  <video controls loop autoplay>
     <source src="Graphics/text mode animation.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
@@ -74,7 +84,7 @@ it loses one life.
 
 #+begin_export html
 <div class="flex-center">
-  <video width="1000" controls loop autoplay>
+  <video controls loop autoplay>
     <source src="Games/Worm/screencast.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
@@ -90,7 +100,7 @@ editor.
 
 *Fractal of circles*
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:Fractals/fractal circles.bas][file:Fractals/fractal%20circles.png]]
 
@@ -100,7 +110,7 @@ editor.
 
 #+begin_export html
 <div class="flex-center">
-  <video width="1000" controls loop autoplay>
+  <video controls loop autoplay>
     <source src="Fractals/fractal squares.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
@@ -113,7 +123,7 @@ editor.
 
 #+begin_export html
 <div class="flex-center">
-  <video width="1000" controls loop autoplay class="flex-center">
+  <video controls loop autoplay class="flex-center">
     <source src="Fractals/fractal trees.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
@@ -131,11 +141,11 @@ visualized using external renderer.
 See directory:
 : graphics/3D/3D Synthezier
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:Graphics/3D/3D Synthezier/doc/index.html][file:Graphics/3D/3D%20Synthezier/doc/hexagonal%20city,%202.jpeg]]
 
-#+attr_html: :width 1000px
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:Graphics/3D/3D Synthezier/doc/index.html][file:Graphics/3D/3D%20Synthezier/doc/rectangular%20city,%203.jpeg]]
 
@@ -147,7 +157,8 @@ Small collection of programs that are result of exploratory
 programming, for fun. It started out from drawing spiral on the
 screen. Every iteration built upon previous result.
 
-#+attr_html: :width 1000px
+
+#+attr_html: :class responsive-img
 #+attr_latex: :width 1000px
 [[file:Graphics/Spirals/index.html][file:Graphics/Spirals/logo.png]]