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.

2 files changed, 10 insertions, 19 deletions

diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 86c5252c..eca73e0d 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 2188d918..ebaa362d 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 {