[yelp-xsl/wip/html5] Use pagewide class to set max content width

[Shaun McCance <shaunm src gnome org>]

commit fb4146abfc864b85e89863b0a942a328562895af
Author: Shaun McCance <shaunm gnome org>
Date:   Tue Sep 13 09:23:54 2016 -0400

    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; }

 xslt/common/html.xsl                   |   36 +++++++++----------------------
 xslt/dita/html/dita2html-topic.xsl     |   10 ++++----
 xslt/docbook/html/db2html-division.xsl |    4 +-
 xslt/docbook/html/db2html-links.xsl    |    2 +-
 xslt/mallard/html/mal2html-links.xsl   |    2 +-
 xslt/mallard/html/mal2html-page.xsl    |    8 +++---
 6 files changed, 24 insertions(+), 38 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 164d2e5..6015cd1 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 7db10df..066cdfc 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 0a39523..7d2fefa 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 f129e87..3e0e741 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 b28bdb1..6028209 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 f75fb25..e725b78 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']">