GNOME.org
 

[yelp-xsl/wip/html5] Do max-width and margin:auto with finer granularity

commit b413dd70ebd8dea0add08d7bd5d571e52acdc09e
Author: Shaun McCance <shaunm gnome org>
Date:   Tue Feb 2 11:55:57 2016 -0500

    Do max-width and margin:auto with finer granularity
    
    Previously, the entire article had max-width set with auto left/right
    margins. If you wanted to make a section have a wide decorative background
    that went all the way to the page edges, you had to override this in your
    customization, then set max-width and margin yourself on various divs that
    aren't immediately obvious.
    
    This change sets those properties on the not-immediately-obvious divs by
    default. It's easier to get it right when we maintain that list upstream.
    Wide section backgrounds are popular. With this change, it is literally
    as easy as this:
    
    section#mycoolstuff {
      background: url(mycoolstuffbg.png);
    }

 xslt/common/html.xsl                 |   98 +++++++++++++--------------------
 xslt/dita/html/dita2html-block.xsl   |    4 +-
 xslt/dita/html/dita2html-topic.xsl   |   38 +++++++------
 xslt/docbook/html/db2html-links.xsl  |    8 ++--
 xslt/mallard/html/mal2html-links.xsl |    8 ++--
 xslt/mallard/html/mal2html-page.xsl  |    2 +
 6 files changed, 73 insertions(+), 85 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index e7a320d..41c1abd 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -326,19 +326,23 @@ as ${node} to this template.
       </xsl:call-template>
       <div class="page" role="main">
         <header>
+          <div class="inner">
           <xsl:call-template name="html.header.custom">
             <xsl:with-param name="node" select="$node"/>
           </xsl:call-template>
           <xsl:apply-templates mode="html.header.mode" select="$node"/>
+          </div>
         </header>
         <article>
           <xsl:apply-templates mode="html.body.mode" select="$node"/>
         </article>
         <footer>
+          <div class="inner">
           <xsl:apply-templates mode="html.footer.mode" select="$node"/>
           <xsl:call-template name="html.footer.custom">
             <xsl:with-param name="node" select="$node"/>
           </xsl:call-template>
+          </div>
         </footer>
       </div>
       <xsl:call-template name="html.bottom.custom">
@@ -759,24 +763,30 @@ div.page {
   flex-flow: column;
   align-items: stretch;
   justify-content: flext-start;
-  max-width: 960px;
   min-height: 100vh;
-  margin: 0 auto;
-}
-div.page > article {
-  flex: 1 0 100%;
-  padding: 10px;
 }
-div.page > header {
-  flex: 0 1 auto;
-}
-div.page > footer {
-  flex: 0 1 auto;
+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>;
-  padding: 10px;
+}
+article > nav,
+article > div.hgroup,
+article > div.region > div.contents,
+article > div.region > nav,
+article > div.region > section > div.inner > * {
+  max-width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 section {
   margin-top: 2.4em;
@@ -817,20 +827,18 @@ section > div.inner > div.hgroup {
   margin-top: 0;
   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.hgroup {
+section.links > div.inner > div.hgroup {
   border-bottom: solid 2px </xsl:text>
     <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  margin-left: -10px;
-  margin-right: -10px;
-  padding-left: 10px;
-  padding-right: 10px;
 }
-section section.links > div.hgroup {
+section section.links > div.inner > div.hgroup {
   border: none;
 }
 h1, h2, h3, h4, h5, h6, h7 {
@@ -1061,52 +1069,26 @@ div.sectionlinks div.sectionlinks {
 div.sectionlinks div.sectionlinks li {
   padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
 }
-div.nextlinks {
-  font-size: 1.2em;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.2em;
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  clear: both;
-}
-div.nextlinks a {
+nav.prevnext { clear: both; }
+div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; }
+nav.prevnext > div.inner { float: </xsl:text><xsl:value-of select="$right"/><xsl:text>; }
+nav.prevnext a {
   background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
   display: inline-block;
   position: relative;
   height: 1.44em;
-  padding: 0.2em 0.83em;
+  padding: 0.2em 0.83em 0 0.83em;
   margin-bottom: 1em;
+  border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
 }
-a.nextlinks-prev { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0.72em; }
-a.nextlinks-next { margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 0.72em; }
-a.nextlinks-prev:after, a.nextlinks-next:after {
-  border: solid transparent;
-  content: " ";
-  position: absolute;
-  height: 0; width: 0;
-  border-width: 0.92em;
-  top: 50%;
-  margin-top: -0.92em;
-}
-a.nextlinks-prev:after {
-  </xsl:text><xsl:value-of select="$right"/><xsl:text>: 100%;
-  border-</xsl:text><xsl:value-of select="$right"/><xsl:text>-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
+nav.prevnext a + a { border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: none; }
+nav.prevnext a:first-child {
+  border-top-</xsl:text><xsl:value-of select="$left"/><xsl:text>-radius: 2px;
+  border-bottom-</xsl:text><xsl:value-of select="$left"/><xsl:text>-radius: 2px;
 }
-a.nextlinks-next:after {
-  </xsl:text><xsl:value-of select="$left"/><xsl:text>: 100%;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>-color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-div.nextlinks a:hover {
-border: none;
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>
-}
-a.nextlinks-prev:hover:after {
-  border-</xsl:text><xsl:value-of select="$right"/><xsl:text>-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>
-}
-a.nextlinks-next:hover:after {
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>
+nav.prevnext a:last-child {
+  border-top-</xsl:text><xsl:value-of select="$right"/><xsl:text>-radius: 2px;
+  border-bottom-</xsl:text><xsl:value-of select="$right"/><xsl:text>-radius: 2px;
 }
 div.serieslinks {
   display: inline-block;
@@ -1549,8 +1531,6 @@ div.yelp-data { display: none; }
   to   { transform: scaleY(1); }
 }
 
-
-
 @media only screen and (max-width: 480px) {
   article > div.region > div.contents > div.example,
   article > div.region > section > div.inner > div.region > div.contents > div.example {
diff --git a/xslt/dita/html/dita2html-block.xsl b/xslt/dita/html/dita2html-block.xsl
index b9fc2e2..2f98ad4 100644
--- a/xslt/dita/html/dita2html-block.xsl
+++ b/xslt/dita/html/dita2html-block.xsl
@@ -542,7 +542,9 @@ FIXME
          this is the OT's behavior. -->
     <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_title_all;[1]"/>
     <div class="region">
-      <xsl:apply-templates mode="dita2html.topic.mode" 
select="$conref/node()[not(self::&topic_title_all;)]"/>
+      <div class="contents">
+        <xsl:apply-templates mode="dita2html.topic.mode" 
select="$conref/node()[not(self::&topic_title_all;)]"/>
+      </div>
     </div>
   </div>
 </xsl:template>
diff --git a/xslt/dita/html/dita2html-topic.xsl b/xslt/dita/html/dita2html-topic.xsl
index 2353a27..7c248ae 100644
--- a/xslt/dita/html/dita2html-topic.xsl
+++ b/xslt/dita/html/dita2html-topic.xsl
@@ -71,9 +71,9 @@ REMARK: Describe this module
   <xsl:variable name="next" select="($node//&map_topicref;[ href][1] |
                                      $node/following::&map_topicref;[ href]
                                     )[1]"/>
-  <div class="links nextlinks">
+  <nav class="prevnext"><div class="inner">
     <xsl:if test="$prev">
-      <a class="nextlinks-prev">
+      <a>
         <xsl:attribute name="href">
           <xsl:for-each select="str:split($node/@href, '/')">
             <xsl:if test="position() != last()">
@@ -104,7 +104,7 @@ REMARK: Describe this module
       </a>
     </xsl:if>
     <xsl:if test="$next">
-      <a class="nextlinks-next">
+      <a>
         <xsl:attribute name="href">
           <xsl:for-each select="str:split($node/@href, '/')">
             <xsl:if test="position() != last()">
@@ -125,7 +125,7 @@ REMARK: Describe this module
         </xsl:call-template>
       </a>
     </xsl:if>
-  </div>
+  </div></nav>
 </xsl:template>
 
 
@@ -350,9 +350,11 @@ REMARK: Describe this module
   <div class="region">
     <xsl:call-template name="dita.id"/>
     <xsl:call-template name="html.lang.attrs"/>
-    <xsl:call-template name="dita2html.links.topic">
-      <xsl:with-param name="source" select="."/>
-    </xsl:call-template>
+    <div class="contents">
+      <xsl:call-template name="dita2html.links.topic">
+        <xsl:with-param name="source" select="."/>
+      </xsl:call-template>
+    </div>
   </div>
   <xsl:call-template name="dita2html.links.prevnext"/>
   <div class="clear"/>
@@ -569,11 +571,13 @@ div.dita-object > div.desc {
       </span>
     </xsl:element>
   </div>
-  <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_body;">
-    <xsl:with-param name="topicref" select="$topicref"/>
-  </xsl:apply-templates>
-  <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_topic_all;"/>
-  <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_related-links;"/>
+  <div class="region">
+    <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_body;">
+      <xsl:with-param name="topicref" select="$topicref"/>
+    </xsl:apply-templates>
+    <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_topic_all;"/>
+    <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_related-links;"/>
+  </div>
 </xsl:template>
 
 <xsl:template mode="dita2html.topic.mode" match="&topic_body;">
@@ -584,12 +588,10 @@ 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="'region'"/>
+      <xsl:with-param name="class" select="'contents'"/>
     </xsl:call-template>
-    <div class="contents">
-      <xsl:apply-templates mode="dita2html.topic.mode" select="../&topic_shortdesc;"/>
-      <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/node()"/>
-    </div>
+    <xsl:apply-templates mode="dita2html.topic.mode" select="../&topic_shortdesc;"/>
+    <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/node()"/>
     <xsl:call-template name="dita2html.links.topic">
       <xsl:with-param name="source" select="$topicref"/>
     </xsl:call-template>
@@ -602,6 +604,7 @@ div.dita-object > div.desc {
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class" select="'links'"/>
     </xsl:call-template>
+    <div class="inner">
     <div class="hgroup"/>
     <div class="contents">
       <div class="links">
@@ -616,6 +619,7 @@ div.dita-object > div.desc {
         </div>
       </div>
     </div>
+    </div>
   </section>
 </xsl:template>
 
diff --git a/xslt/docbook/html/db2html-links.xsl b/xslt/docbook/html/db2html-links.xsl
index af0ebcf..ff3a517 100644
--- a/xslt/docbook/html/db2html-links.xsl
+++ b/xslt/docbook/html/db2html-links.xsl
@@ -135,9 +135,9 @@ 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)"/>
-  <div class="links nextlinks">
+  <nav class="prevnext"><div class="inner">
     <xsl:if test="$prev_id != ''">
-      <a class="nextlinks-prev">
+      <a>
         <xsl:attribute name="href">
           <xsl:call-template name="db.xref.target">
             <xsl:with-param name="linkend" select="$prev_id"/>
@@ -157,7 +157,7 @@ and "Next", although the actual page titles are used for tooltips.
       </a>
     </xsl:if>
     <xsl:if test="$next_id != ''">
-      <a class="nextlinks-next">
+      <a>
         <xsl:attribute name="href">
           <xsl:call-template name="db.xref.target">
             <xsl:with-param name="linkend" select="$next_id"/>
@@ -175,7 +175,7 @@ and "Next", although the actual page titles are used for tooltips.
         </xsl:call-template>
       </a>
     </xsl:if>
-  </div>
+  </div></nav>
 </xsl:template>
 
 
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index eca73e0..906533b 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -432,9 +432,9 @@ calling functions in !{mal2html-page}.
     <xsl:variable name="prev" select="key('mal.cache.link.key', concat('next:', $linkid))"/>
     <xsl:if test="$prev or $next">
       <!-- FIXME: Get prev/next links in constant position -->
-      <div class="links nextlinks">
+      <nav class="prevnext"><div class="inner">
         <xsl:if test="$prev">
-          <a class="nextlinks-prev">
+          <a>
             <xsl:attribute name="href">
               <xsl:call-template name="mal.link.target">
                 <xsl:with-param name="node" select="$prev"/>
@@ -455,7 +455,7 @@ calling functions in !{mal2html-page}.
           </a>
         </xsl:if>
         <xsl:if test="$next">
-          <a class="nextlinks-next">
+          <a>
             <xsl:attribute name="href">
               <xsl:call-template name="mal.link.target">
                 <xsl:with-param name="node" select="$next"/>
@@ -475,7 +475,7 @@ calling functions in !{mal2html-page}.
             </xsl:for-each>
           </a>
         </xsl:if>
-      </div>
+      </div></nav>
     </xsl:if>
   </xsl:for-each>
 </xsl:template>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 81ae37c..2e61810 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -736,6 +736,7 @@ templates that handle #{page} and #{section} elements.
                     (mal:section and not(mal:links[ type = 'seealso']))))
                 ">
     <section class="links" role="navigation">
+      <div class="inner">
       <div class="hgroup"/>
       <div class="contents">
         <xsl:for-each select="$postlinks">
@@ -788,6 +789,7 @@ templates that handle #{page} and #{section} elements.
           </xsl:call-template>
         </xsl:if>
       </div>
+      </div>
     </section>
   </xsl:if>
   </div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]