drop flexbox and use media query to implement responsive screenshot banner

afvincent · afvincent · commit f116605343ba · 2016-08-05T00:44:17.000+02:00
diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
@@ -683,20 +683,64 @@ figcaption {
     outline-color: #003c63;
 }
 
-.flex-container {
-    /* display part copy-pasted from: https://css-tricks.com/using-flexbox/ */
-    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -ms-flexbox;      /* TWEENER - IE 10 */
-    display: -webkit-flex;     /* NEW - Chrome */
-    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-content: center;
-    justify-content: center;
-}
-
-.flex-item {
-    margin: 0px;
+
+div.responsive_banner {
+    /* Horizontally centered */
+    display: block;
+    margin: auto;
+
+    max-height: 139px; /* at most 1 x 1:1 subfig height */
+    width=100%;
+    overflow: auto; /* to follow the height of the subfig floats */
+}
+
+div.responsive_screenshots {
+    /* Horizontally centered */
+    display: block;
+    margin: auto;
+
+    /* Do not go beyond 1:1 scale*/
+    max-width: 648px; /* 4 * 1:1 subfig width */
+    max-height: 139px; /* 1 * 1:1 subfig height */
+
+    /* Possible downscaling */
+    width=auto;
+    height: 100%;
+}
+
+div.responsive_subfig{
+    float: left;
+    width: 25%;  /* 4 subfigs in a row */
+}
+
+div.responsive_subfig img {
+    /* Horizontally centered */
+    display: block;
+    margin: auto;
+
+    /* Possible downscaling */
+    max-width: 162px; /* 1 * 1:1 subfig width */
+    max-height: 139px; /* 1 * 1:1 subfig height */
+    width: 100%;
+    height: auto;
+}
+
+@media only screen and (max-width: 1024px){
+    /* The value of 1024px was handcrafted to provide a more or less */
+    /* smooth transition between the 1x4 and the 2x2 layouts.        */
+
+    div.responsive_banner {
+        max-height: 278px;  /* at most 2 x 1:1 subfig height */
+    }
+
+    div.responsive_screenshots {
+        /* Do not go beyond 1:1 scale*/
+        max-width: 324px; /* 2 x 1:1 subbfig width */
+        max-height: 139px; /* 1 x 1:1 subfig height */
+    }
+
+    div.responsive_subfig {
+        width: 50%;  /* 2 subfigs in a row */
+    }
+
 }
diff --git a/doc/_templates/index.html b/doc/_templates/index.html
@@ -58,28 +58,24 @@ <h1>Introduction</h1>
   interface toolkits.</p>
 
   <p align="center">
-      <div class="flex-container">
-        <div class="flex-item">
-          <a a href="{{ pathto('users/screenshots') }}">
+    <div class="responsive_banner">
+      <div class="responsive_screenshots">
+        <a a href="{{ pathto('users/screenshots') }}">
+          <div class="responsive_subfig">
             <img align="middle", src="{{ pathto('_static/membrane_frontpage.png', 1) }}", border="0", alt="screenshots"/>
-          </a>
-        </div>
-        <div class="flex-item">
-          <a a href="{{ pathto('users/screenshots') }}">
+          </div>
+          <div class="responsive_subfig">
             <img align="middle", src="{{ pathto('_static/histogram_frontpage.png', 1) }}", border="0", alt="screenshots"/>
-          </a>
-        </div>
-        <div class="flex-item">
-          <a a href="{{ pathto('users/screenshots') }}">
+          </div>
+          <div class="responsive_subfig">
             <img align="middle", src="{{ pathto('_static/contour_frontpage.png', 1) }}", border="0", alt="screenshots"/>
-          </a>
-        </div>
-        <div class="flex-item">
-          <a a href="{{ pathto('users/screenshots') }}">
+          </div>
+          <div class="responsive_subfig">
             <img align="middle", src="{{ pathto('_static/surface3d_frontpage.png', 1) }}", border="0", alt="screenshots"/>
-          </a>
-        </div>
+          </div>
+        </a>
       </div>
+    </div>
   </p>
 
   <p>matplotlib tries to make easy things easy and hard things possible.
