[yelp-xsl/wip/html5: 3/4] Remove media queries from links flexbox for grid and twocolumn

[Shaun McCance <shaunm src gnome org>]

commit 561aff3b945acd140c3250fc8efeabd5f75c5079
Author: Shaun McCance <shaunm redhat com>
Date:   Fri Oct 23 16:43:29 2015 -0400

    Remove media queries from links flexbox for grid and twocolumn
    
    Media queries are fragile and aren't a good way to control when and
    how to reflow. Instead use a single flex declaration with blank flex
    divs to ensure homogenous sizing across wraps.

 xslt/mallard/html/mal2html-links.xsl |    3 +++
 xslt/mallard/html/mal2html-page.xsl  |   26 +++++++-------------------
 2 files changed, 10 insertions(+), 19 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 86c5252..eca73e0 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -975,6 +975,9 @@ when determining which links to output.
       </xsl:for-each>
     </div>
   </xsl:for-each>
+  <!-- blank divs for homogeneous sizing -->
+  <div class="links-grid"></div>
+  <div class="links-grid"></div>
   </div>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 2188d91..ebaa362 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -1146,21 +1146,14 @@ div.links-grid-container {
   vertical-align: top;
   clear: both
 }
-div.links-grid { flex: 0 0 300px; }
- media (max-width: 960px) {
-  div.links-grid { flex: 0 1 50%; }
-}
- media (max-width: 640px) {
-  div.links-grid { flex: 0 1 100%; }
-}
-div.links-grid-link {
-  margin: 0;
-  padding: 10px 10px 2px 10px;
-  font-weight: bold;
+div.links-grid {
+  flex: 1 0 300px;
+  padding: 10px;
 }
+div.links-grid:empty { padding: 0 10px; height: 0; }
+div.links-grid-link { font-weight: bold; }
 div.links-grid > div.desc {
-  margin: 0;
-  padding: 0 10px;
+  margin: 0.2em 0 0 0;
   color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
 }
 
@@ -1300,15 +1293,10 @@ div.links-twocolumn {
   margin-right: -10px;
 }
 div.links-twocolumn > div.links-divs {
-  flex: 0 1 50%;
+  flex: 1 0 320px;
   vertical-align: top;
   margin: 0;
 }
- media (max-width: 640px) {
-  div.links-twocolumn > div.links-divs {
-    flex: 0 1 100%;
-  }
-}
 
 <!-- FIXME -->
 div.comment {