diff options
Diffstat (limited to 'xslt')
| -rw-r--r-- | xslt/common/css/core.css.tmpl | 33 | ||||
| -rw-r--r-- | xslt/common/css/elements.css.tmpl | 30 | ||||
| -rw-r--r-- | xslt/common/css/mallard.css.tmpl | 7 | ||||
| -rw-r--r-- | xslt/common/html.xsl | 17 | ||||
| -rw-r--r-- | xslt/dita/html/dita2html-topic.xsl | 4 | ||||
| -rw-r--r-- | xslt/docbook/html/db2html-division.xsl | 4 | ||||
| -rw-r--r-- | xslt/mallard/html/mal2html-page.xsl | 4 |
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> |