Use pagewide class to set max content width

By default, we max the content at 960px and center horizontally. To
allow various types of styling, we set this on certain nested divs
and other blocks, instead of on the main article element. With this
change, we no longer use intricate CSS selectors that are tricky to
override. Instead, we output add a pagewide class to those elements.

Don't like a max width?

.pagewide { max-width: 100%; }

Don't like horizontal centering?

.pagewide { margin-left: 0; margin-right: 0; }

6 files changed, 24 insertions, 38 deletions

diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 164d2e5c..6015cd16 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -348,7 +348,7 @@ elements. See those templates for further extension points.
         </xsl:call-template>
         <div class="page">
           <header>
-            <div class="inner">
+            <div class="inner pagewide">
               <xsl:call-template name="html.header.custom">
                 <xsl:with-param name="node" select="$node"/>
               </xsl:call-template>
@@ -359,7 +359,7 @@ elements. See those templates for further extension points.
             <xsl:apply-templates mode="html.body.mode" select="$node"/>
           </article>
           <footer>
-            <div class="inner">
+            <div class="inner pagewide">
               <xsl:apply-templates mode="html.footer.mode" select="$node"/>
               <xsl:call-template name="html.footer.custom">
                 <xsl:with-param name="node" select="$node"/>
@@ -947,27 +947,19 @@ main > div.page {
 }
 div.page > article { flex: 1 0 100%; }
 div.page > header, div.page > footer { flex: 0 1 auto; }
-div.page > header > div.inner, div.page > footer > div.inner {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0;
-}
-article {
-  padding: 10px 0;
-  min-height: 20em;
-  background-color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-}
-article > nav,
-article > div.hgroup,
-article > div.region > div.contents,
-article > div.region > nav,
-article > div.region > section > div.inner > * {
+.pagewide {
   max-width: 940px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 10px;
   padding-right: 10px;
 }
+article {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 20em;
+  background-color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
+}
 section {
   margin-top: 2.4em;
   clear: both;
@@ -988,7 +980,7 @@ section section {
   to   { transform: translateY(0px); }
 }
 div.trails {
-  margin: 0;
+  margin: 0 -10px 0 -10px;
   padding: 0.2em 10px;
   background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
 }
@@ -1000,7 +992,7 @@ div.trail {
 }
 a.trail { white-space: nowrap; }
 div.hgroup {
-  margin: 0 0 0.5em 0;
+  margin-bottom: 0.5em;
   color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
 }
 section > div.inner > div.hgroup {
@@ -1008,12 +1000,6 @@ section > div.inner > div.hgroup {
   border-bottom: solid 1px </xsl:text>
     <xsl:value-of select="$color.gray"/><xsl:text>;
 }
-section section > div.inner > div.hgroup {
-  margin-left: -10px;
-  margin-right: -10px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
 section.links > div.inner > div.hgroup {
   border-bottom: solid 2px </xsl:text>
     <xsl:value-of select="$color.fg.blue"/><xsl:text>;
diff --git a/xslt/dita/html/dita2html-topic.xsl b/xslt/dita/html/dita2html-topic.xsl
index 7db10df3..066cdfc2 100644
--- a/xslt/dita/html/dita2html-topic.xsl
+++ b/xslt/dita/html/dita2html-topic.xsl
@@ -71,7 +71,7 @@ REMARK: Describe this module
   <xsl:variable name="next" select="($node//&map_topicref;[@href][1] |
                                      $node/following::&map_topicref;[@href]
                                     )[1]"/>
-  <nav class="prevnext"><div class="inner">
+  <nav class="prevnext pagewide"><div class="inner">
     <xsl:if test="$prev">
       <a>
         <xsl:attribute name="href">
@@ -570,7 +570,7 @@ div.dita-object > div.desc {
       </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
-  <div class="hgroup">
+  <div class="hgroup pagewide">
     <xsl:element name="{concat('h', $depth_)}" namespace="{$html.namespace}">
       <xsl:attribute name="class">
         <xsl:text>title</xsl:text>
@@ -597,7 +597,7 @@ div.dita-object > div.desc {
     <xsl:call-template name="dita.id"/>
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
-      <xsl:with-param name="class" select="'contents'"/>
+      <xsl:with-param name="class" select="'contents pagewide'"/>
     </xsl:call-template>
     <xsl:call-template name="html.content.pre">
       <xsl:with-param name="page" select="not(../parent::&topic_topic_all;)"/>
@@ -620,8 +620,8 @@ div.dita-object > div.desc {
       <xsl:with-param name="class" select="'links'"/>
     </xsl:call-template>
     <div class="inner">
-    <div class="hgroup"/>
-    <div class="contents">
+    <div class="hgroup pagewide"/>
+    <div class="contents pagewide">
       <div class="links">
         <xsl:call-template name="dita.id"/>
         <xsl:call-template name="html.lang.attrs"/>
diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl
index 0a39523c..7d2fefa7 100644
--- a/xslt/docbook/html/db2html-division.xsl
+++ b/xslt/docbook/html/db2html-division.xsl
@@ -187,7 +187,7 @@ REMARK: Talk about some of the parameters
     <xsl:with-param name="depth_in_chunk" select="$depth_in_chunk"/>
   </xsl:call-template>
   <div class="region">
-    <div class="contents">
+    <div class="contents pagewide">
       <xsl:call-template name="html.content.pre">
         <xsl:with-param name="page" select="$depth_in_chunk = 0"/>
       </xsl:call-template>
@@ -309,7 +309,7 @@ REMARK: Talk about the different kinds of title blocks
     </xsl:choose>
   </xsl:variable>
 
-  <div class="hgroup">
+  <div class="hgroup pagewide">
     <xsl:element name="{$title_h}" namespace="{$html.namespace}">
       <xsl:attribute name="class">
         <xsl:text>title</xsl:text>
diff --git a/xslt/docbook/html/db2html-links.xsl b/xslt/docbook/html/db2html-links.xsl
index f129e87b..3e0e741f 100644
--- a/xslt/docbook/html/db2html-links.xsl
+++ b/xslt/docbook/html/db2html-links.xsl
@@ -135,7 +135,7 @@ and "Next", although the actual page titles are used for tooltips.
   </xsl:variable>
   <xsl:variable name="prev_node" select="key('db.id.key', $prev_id)"/>
   <xsl:variable name="next_node" select="key('db.id.key', $next_id)"/>
-  <nav class="prevnext"><div class="inner">
+  <nav class="prevnext pagewide"><div class="inner">
     <xsl:if test="$prev_id != ''">
       <a>
         <xsl:attribute name="href">
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index b28bdb15..60282099 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -431,7 +431,7 @@ calling functions in !{mal2html-page}.
   <xsl:for-each select="$mal.cache">
     <xsl:variable name="prev" select="key('mal.cache.link.key', concat('next:', $linkid))"/>
     <xsl:if test="$prev or $next">
-      <nav class="prevnext"><div class="inner">
+      <nav class="prevnext pagewide"><div class="inner">
         <xsl:if test="$prev">
           <a>
             <xsl:attribute name="href">
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index f75fb25b..e725b788 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -657,12 +657,12 @@ templates that handle #{page} and #{section} elements.
       </xsl:for-each>
     </xsl:if>
   </xsl:variable>
-  <div class="hgroup">
+  <div class="hgroup pagewide">
     <xsl:apply-templates mode="mal2html.title.mode" select="mal:title"/>
     <xsl:apply-templates mode="mal2html.title.mode" select="mal:subtitle"/>
   </div>
   <div class="region">
-  <div class="contents">
+  <div class="contents pagewide">
     <xsl:if test="$type = 'facets'">
       <xsl:call-template name="mal2html.facets.controls"/>
     </xsl:if>
@@ -743,8 +743,8 @@ templates that handle #{page} and #{section} elements.
                 ">
     <section class="links" role="navigation">
       <div class="inner">
-      <div class="hgroup"/>
-      <div class="contents">
+      <div class="hgroup pagewide"/>
+      <div class="contents pagewide">
         <xsl:for-each select="$postlinks">
           <xsl:choose>
             <xsl:when test="self::mal:links[@type = 'topic']">