Templatize the grid size

This allows you to easily set the page width to common 12-multiples
like 1200, 1080, and 960. Things that are grid-based will adjust
according without extra effort. Also made some widths follow the
selected grid, like sidebar notes.

This commit also changes "about" footers to use div elements instead
of footer elements. They are already contained in a footer element,
and you're not supposed to put footers in footers.

7 files changed, 53 insertions, 46 deletions

diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl
index 9a0c4108..bd19c49c 100644
--- a/xslt/common/css/core.css.tmpl
+++ b/xslt/common/css/core.css.tmpl
@@ -31,7 +31,7 @@ main > div.page {
 div.page > article { flex: 1 0 auto; }
 div.page > header, div.page > footer { flex: 0 1 auto; }
 .pagewide {
-  max-width: 940px;
+  max-width: {{$html.grid.size - 20}}px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 10px;
@@ -131,42 +131,39 @@ div.clear {
 }
 .center { text-align: center; }
 
-footer.about { margin: 0; }
-footer.about > div.inner > div.hgroup {
+footer { background: #ddd; }
+footer div.about {
+  max-width: {{2 * $html.grid.size div 3 - 20}}px;
+  margin: 0 auto;
+}
+footer div.about > div.inner > div.hgroup {
   margin: 0; padding: 0;
   text-align: center;
   border: none;
 }
-footer.about > div.inner > div.hgroup > h2 {
+footer div.about > div.inner > div.hgroup > h2 {
   margin: 0; padding: 0.2em;
   font-size: inherit;
 }
-footer.about.ui-expander > div.inner > div.hgroup span.title:before {
+footer div.about.ui-expander > div.inner > div.hgroup span.title:before {
   content: "";
 }
-div.copyrights {
-  max-width: 700px;
-  text-align: center;
-  padding: 10px;
-  margin: 0 auto;
-}
+div.copyrights { text-align: center; }
 div.copyright { margin: 0; }
 div.credits {
   display: flex;
   flex-flow: row wrap;
   align-items: stretch;
   justify-content: flex-start;
-  max-width: 720px;
-  margin: 0 auto;
+  margin: 0 -10px;
 }
 div.credits > * {
   vertical-align: top;
   text-align: left;
-  flex: 1 0 220px;
-  margin: 0;
+  flex: 1 0 {{$html.grid.size div 3 - 60}}px;
   padding: 10px;
 }
-div.credits > *:empty { padding: 0 10px; height: 0; }
+div.credits > *:empty { padding: 0; height: 0; }
 ul.credits, ul.credits li {
   margin: 0; padding: 0;
   list-style-type: none;
@@ -176,9 +173,7 @@ ul.credits li {
   text-indent: -1em;
 }
 div.license {
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 10px;
+  padding-bottom: 10px;
 }
 
 table {
diff --git a/xslt/common/css/elements.css.tmpl b/xslt/common/css/elements.css.tmpl
index 0432f80d..8237e101 100644
--- a/xslt/common/css/elements.css.tmpl
+++ b/xslt/common/css/elements.css.tmpl
@@ -144,13 +144,13 @@ div.list > div.inner > div.title { margin-bottom: 0.5em; }
 div.listing > div.inner { margin: 0; padding: 0; }
 div.listing > div.inner > div.region > div.desc { font-style: italic; }
 div.note {
-  padding: 6px;
+  padding: 10px 0;
   border: solid 1px {{$color.bg.dark}};
   background-color: {{$color.bg.gray}};
   display: flex;
   flex-flow: row;
 }
-div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; }
+div.note > * { margin: 0 10px; padding: 0; min-height: 24px; min-width: 24px; }
 div.note-warning > svg .yelp-svg-fill {
   fill: {{$color.red}};
 }
@@ -174,9 +174,8 @@ div.note-danger > svg .yelp-svg-fill {
 }
 div.note-sidebar {
   float: {{$right}};
-  max-width: 206px;
+  max-width: {{$html.grid.size div 4 - 22}}px;
   margin-{{$left}}: 20px;
-  padding: 6px;
 }
 div.quote {
   padding: 0;
@@ -553,19 +552,6 @@ section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.content
     border-left: none;
     border-right: none;
   }
-  div.note-sidebar {
-    float: none;
-    max-width: none;
-    margin-left: inherit;
-    margin-right: inherit;
-    padding-left: inherit;
-    padding-right: inherit;
-  }
-  div.note-sidebar > div.inner > div.title,
-  div.note-sidebar > div.inner > div.region > div.contents {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
   article > div.region > div.contents > div.steps,
   article > div.region > section > div.inner > div.region > div.contents > div.steps {
     margin-left: -10px;
@@ -581,4 +567,14 @@ section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.content
     padding-{{$right}}: 10px;
   }
 }
+@media only screen and (max-width: {{$html.grid.size div 2}}px) {
+  div.note-sidebar {
+    float: none;
+    max-width: none;
+    margin-left: inherit;
+    margin-right: inherit;
+    padding-left: inherit;
+    padding-right: inherit;
+  }
+}
 </tmpl>
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
index 97d94d23..0c533b1d 100644
--- a/xslt/common/css/mallard.css.tmpl
+++ b/xslt/common/css/mallard.css.tmpl
@@ -176,8 +176,7 @@ div.links-tiles {
   margin: 0 -10px;
 }
 div.links-tile {
-  max-width: 300px;
-  flex: 1 0 300px;
+  flex: 1 0 {{$html.grid.size div 3 - 20}}px;
   vertical-align: top;
   margin: 0;
   padding: 10px;
@@ -227,7 +226,7 @@ div.links-grid-container {
   clear: both;
 }
 div.links-grid {
-  flex: 1 0 300px;
+  flex: 1 0 {{$html.grid.size div 3 - 20}}px;
   padding: 10px;
 }
 div.links-grid:empty { padding: 0 10px; height: 0; }
@@ -368,7 +367,7 @@ div.links-twocolumn {
   margin-right: -10px;
 }
 div.links-twocolumn > div.links-divs {
-  flex: 1 0 320px;
+  flex: 1 0 {{$html.grid.size div 3}}px;
   vertical-align: top;
   margin: 0;
 }
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 17778344..8b7fe3f0 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -176,6 +176,23 @@ should include the leading dot. By default, `.xhtml` will be used if
 
 
 <!--@@==========================================================================
+html.grid.size
+The width of the page for grid layouts.
+@revision[version=40 date=2021-01-09 status=final]
+
+This parameter sets the width of the main page content, including padding, but
+excluding any sidebars. These stylesheets frequently use flexible grids for
+layouts, and columnds are based on this parameter. This parameter should be a
+multiple of 12 for best results. Common grid sizes are 1200, 1080, and 960.
+-->
+<xsl:param name="html.grid.size" select="1080"/>
+<xsl:variable name="html.grid.col1" select="$html.grid.size - 20"/>
+<xsl:variable name="html.grid.col2" select="$html.grid.size div 2 - 20"/>
+<xsl:variable name="html.grid.col3" select="$html.grid.size div 3 - 20"/>
+<xsl:variable name="html.grid.col4" select="$html.grid.size div 4 - 20"/>
+
+
+<!--@@==========================================================================
 html.css.root
 The URI root for external CSS files.
 @revision[version=1.0 date=2010-12-06 status=final]
diff --git a/xslt/dita/html/dita2html-topic.xsl b/xslt/dita/html/dita2html-topic.xsl
index c76ee464..da8c1db3 100644
--- a/xslt/dita/html/dita2html-topic.xsl
+++ b/xslt/dita/html/dita2html-topic.xsl
@@ -205,7 +205,7 @@ REMARK: Describe this module
   <xsl:variable name="publishers" select="$info/&topic_publisher;"/>
   <xsl:variable name="others" select="$info/&topic_author;[not(@type = 'creator' or @type = 'translator')]"/>
   <xsl:if test="$copyrights or $authors or $translators or $publishers or $others">
-    <footer class="about ui-expander" role="contentinfo">
+    <div class="about ui-expander" role="contentinfo">
       <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
       <div class="inner">
         <div class="hgroup">
@@ -259,7 +259,7 @@ REMARK: Describe this module
           </div>
         </div>
       </div>
-    </footer>
+    </div>
   </xsl:if>
 </xsl:template>
 
diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl
index a40c32e2..954b00ec 100644
--- a/xslt/docbook/html/db2html-division.xsl
+++ b/xslt/docbook/html/db2html-division.xsl
@@ -472,7 +472,7 @@ the division. By default it is called by the {html.footer.mode} implementation.
   <xsl:variable name="legal" select="$info/legalnotice | $info/db:legalnotice"/>
   <xsl:if test="$copyrights or $authors or $editors or $translators or
                 $publishers or $othercredits or $legal">
-    <footer class="about ui-expander" role="contentinfo">
+    <div class="about ui-expander" role="contentinfo">
       <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
       <div class="inner">
       <div class="hgroup">
@@ -549,7 +549,7 @@ the division. By default it is called by the {html.footer.mode} implementation.
         </div>
       </div>
       </div>
-    </footer>
+    </div>
   </xsl:if>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index fe67287b..5812fb8b 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -70,7 +70,7 @@ the `page` element. Information is extracted from the `info` element of $node.
   <xsl:param name="node" select="."/>
   <xsl:variable name="infos" select="$node/mal:info | $node/parent::mal:stack/mal:info"/>
   <xsl:if test="$infos/mal:credit or $infos/mal:license">
-  <footer class="about ui-expander" role="contentinfo">
+  <div class="about ui-expander" role="contentinfo">
     <div class="yelp-data yelp-data-ui-expander" data-yelp-expanded="false"/>
     <div class="inner">
     <div class="hgroup">
@@ -179,7 +179,7 @@ the `page` element. Information is extracted from the `info` element of $node.
       </div>
     </div>
     </div>
-  </footer>
+  </div>
   </xsl:if>
 </xsl:template>