[yelp-xsl] Templatize the grid size
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [yelp-xsl] Templatize the grid size
- Date: Tue, 9 Feb 2021 16:53:24 +0000 (UTC)
commit 8be1ec6600a28f5b0892bbe04c43ec870158b0a6
Author: Shaun McCance <shaunm redhat com>
Date: Tue Feb 9 11:51:04 2021 -0500
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.
doc/yelp-xsl/C/html.grid.size.page | 22 ++
doc/yelp-xsl/C/html.page | 3 +
test/mallard/build.sh | 2 +
test/mallard/source/credit1.page | 51 ++++
test/mallard/source/index.page | 17 ++
test/mallard/source/note1.page | 3 +
test/mallard/source/task1.page | 3 +
test/mallard/source/yelp.svg | 520 +++++++++++++++++++++++++++++++++
xslt/common/css/core.css.tmpl | 33 +--
xslt/common/css/elements.css.tmpl | 30 +-
xslt/common/css/mallard.css.tmpl | 7 +-
xslt/common/html.xsl | 17 ++
xslt/dita/html/dita2html-topic.xsl | 4 +-
xslt/docbook/html/db2html-division.xsl | 4 +-
xslt/mallard/html/mal2html-page.xsl | 4 +-
15 files changed, 674 insertions(+), 46 deletions(-)
---
diff --git a/doc/yelp-xsl/C/html.grid.size.page b/doc/yelp-xsl/C/html.grid.size.page
new file mode 100644
index 00000000..d6c8f25b
--- /dev/null
+++ b/doc/yelp-xsl/C/html.grid.size.page
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page xmlns="http://projectmallard.org/1.0/"; style="xslt-param" id="html.grid.size">
+ <info>
+ <link type="guide" xref="html" group="params"/>
+ <link type="guide" xref="params" group="html"/>
+ <desc>The width of the page for grid layouts.</desc>
+ <revision version="40" date="2021-01-09" status="final"/>
+ </info>
+ <title>html.grid.size</title>
+ <p>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.</p>
+ <synopsis>
+ <terms>
+ <item>
+ <title><code>html.grid.size</code></title>
+ <p><code>1080</code></p>
+ </item>
+ </terms>
+ </synopsis>
+</page>
diff --git a/doc/yelp-xsl/C/html.page b/doc/yelp-xsl/C/html.page
index b148fca8..88725732 100644
--- a/doc/yelp-xsl/C/html.page
+++ b/doc/yelp-xsl/C/html.page
@@ -48,6 +48,9 @@
<item>
<p><link xref="html.extension"/></p>
</item>
+ <item>
+ <p><link xref="html.grid.size"/></p>
+ </item>
<item>
<p><link xref="html.sidebar.left"/></p>
</item>
diff --git a/test/mallard/build.sh b/test/mallard/build.sh
index e7b9d41f..1179a40d 100755
--- a/test/mallard/build.sh
+++ b/test/mallard/build.sh
@@ -5,10 +5,12 @@ if [ ! -d output ]; then mkdir output; fi
rm -f output/*.*
cp ../../js/highlight.pack.js output/
for page in source/*.page; do
+ # --stringparam html.grid.size (1200 | 1080 | 960)
xsltproc \
--stringparam mal.cache.file ../index.cache \
-o output/ \
../../xslt/mallard/html/mal2html.xsl \
$page;
done
+cp source/*.svg output/
rm index.cache
diff --git a/test/mallard/source/credit1.page b/test/mallard/source/credit1.page
new file mode 100644
index 00000000..292da97b
--- /dev/null
+++ b/test/mallard/source/credit1.page
@@ -0,0 +1,51 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
+ type="topic" style="concept"
+ id="credit1">
+ <info>
+ <credit type="author copyright">
+ <name>Shaun McCance</name>
+ <email>shaunm redhat com</email>
+ <years>2020</years>
+ </credit>
+
+ <credit type="editor">
+ <name>Rupert Monkey</name>
+ <years>2020</years>
+ </credit>
+
+ <credit type="illustrator">
+ <name>Wanda the Fish</name>
+ <years>2020</years>
+ </credit>
+
+ <credit type="translator">
+ <name>Wilbur</name>
+ <years>2020</years>
+ </credit>
+
+ <license href="https://creativecommons.org/licenses/by-sa/3.0/";>
+ <p>This work is licensed under a <link href="https://creativecommons.org/licenses/by-sa/3.0/";>Creative
+ Commons Attribution-ShareAlike 3.0 Unported License</link>.</p>
+ </license>
+
+ <desc>Clicky clicky the about expander at the bottom.</desc>
+
+ <uix:thumb src="yelp.svg"/>
+
+ <link type="guide" xref="index"/>
+ </info>
+
+ <title>Credit where due</title>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Morbi mauris ipsum, varius quis hendrerit eleifend, lobortis ac risus.
+ In congue ac nunc id luctus.</p>
+
+ <p>Nullam tincidunt, ligula id consequat ullamcorper, risus erat volutpat.
+ Curabitur aliquam ut urna sed molestie. Integer non fringilla dui.</p>
+
+ <p>Ut viverra facilisis dui, et pharetra nibh volutpat et.
+ Nunc vitae ante ac nulla convallis tristique eu sit amet leo.
+ Cras et turpis eu erat fermentum porttitor.</p>
+</page>
diff --git a/test/mallard/source/index.page b/test/mallard/source/index.page
index 887faf39..1505644f 100644
--- a/test/mallard/source/index.page
+++ b/test/mallard/source/index.page
@@ -24,14 +24,30 @@
Vestibulum in pretium ligula. Cras dignissim nisl ligula, non semper diam lobortis sit amet.
Donec cursus sollicitudin velit, at vulputate enim.</p>
+<!--
+The stylesheets won't render all of these at once,
+so uncomment whatever you want to test.
+-->
+
<links type="topic">
<title>Regular links</title>
</links>
+<!--
+ <links type="topic"
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
+ uix:thumbs="tiles">
+ <title>Thumb tile links</title>
+ </links>
+
<links type="topic" style="2column">
<title>Two-column links</title>
</links>
+ <links type="topic" style="grid">
+ <title>Two-column links</title>
+ </links>
+
<links type="topic" style="linklist">
<title>Link list</title>
</links>
@@ -39,5 +55,6 @@
<links type="topic" style="button">
<title>Link buttons</title>
</links>
+-->
</page>
diff --git a/test/mallard/source/note1.page b/test/mallard/source/note1.page
index 4aed9b47..ff0f6701 100644
--- a/test/mallard/source/note1.page
+++ b/test/mallard/source/note1.page
@@ -1,4 +1,5 @@
<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
type="topic" style="concept"
id="note1">
<info>
@@ -10,6 +11,8 @@
<desc>Note some notes. Tip some tips. Warn some warnings.</desc>
+ <uix:thumb src="yelp.svg"/>
+
<link type="guide" xref="index"/>
</info>
diff --git a/test/mallard/source/task1.page b/test/mallard/source/task1.page
index 684bb07a..9d923251 100644
--- a/test/mallard/source/task1.page
+++ b/test/mallard/source/task1.page
@@ -1,4 +1,5 @@
<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
type="topic" style="task"
id="task1">
<info>
@@ -10,6 +11,8 @@
<desc>Perform the first action with gusto.</desc>
+ <uix:thumb src="yelp.svg"/>
+
<link type="guide" xref="index"/>
</info>
diff --git a/test/mallard/source/yelp.svg b/test/mallard/source/yelp.svg
new file mode 100644
index 00000000..d519387f
--- /dev/null
+++ b/test/mallard/source/yelp.svg
@@ -0,0 +1,520 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ inkscape:export-ydpi="96"
+ inkscape:export-xdpi="96"
+ inkscape:export-filename="Template.png"
+ width="128"
+ height="128"
+ id="svg11300"
+ sodipodi:version="0.32"
+ inkscape:version="0.92.2 2405546, 2018-03-11"
+ sodipodi:docname="org.gnome.Help.svg"
+ inkscape:output_extension="org.inkscape.output.svg.inkscape"
+ version="1.0"
+ style="display:inline;enable-background:new"
+ viewBox="0 0 128 128">
+ <title
+ id="title4162">Adwaita Icon Template</title>
+ <defs
+ id="defs3">
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient882">
+ <stop
+ style="stop-color:#ffffff;stop-opacity:1;"
+ offset="0"
+ id="stop878" />
+ <stop
+ style="stop-color:#ffffff;stop-opacity:0.28033474"
+ offset="1"
+ id="stop880" />
+ </linearGradient>
+ <clipPath
+ clipPathUnits="userSpaceOnUse"
+ id="clipPath1015">
+ <path
+
style="display:inline;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new"
+ d="m 64,176 a 60,60 0 0 0 -60,60 60,60 0 0 0 60,60 60,60 0 0 0 60,-60 60,60 0 0 0 -60,-60 z m 0,26
a 34,34 0 0 1 34,34 34,34 0 0 1 -34,34 34,34 0 0 1 -34,-34 34,34 0 0 1 34,-34 z"
+ id="path1017"
+ inkscape:connector-curvature="0" />
+ </clipPath>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient882"
+ id="linearGradient884"
+ x1="64.016159"
+ y1="189.81104"
+ x2="64.016159"
+ y2="312.88797"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.04,0,0,1.04,-2.5768079,-9.403474)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient882"
+ id="linearGradient892"
+ x1="-80"
+ y1="-274.09021"
+ x2="-80"
+ y2="-244"
+ gradientUnits="userSpaceOnUse" />
+ <filter
+ inkscape:collect="always"
+ style="color-interpolation-filters:sRGB"
+ id="filter1031"
+ x="-0.12"
+ width="1.24"
+ y="-0.12"
+ height="1.24">
+ <feGaussianBlur
+ inkscape:collect="always"
+ stdDeviation="4.2"
+ id="feGaussianBlur1033" />
+ </filter>
+ <filter
+ inkscape:collect="always"
+ style="color-interpolation-filters:sRGB"
+ id="filter1047"
+ x="-0.096"
+ width="1.192"
+ y="-0.096"
+ height="1.192">
+ <feGaussianBlur
+ inkscape:collect="always"
+ stdDeviation="4.16"
+ id="feGaussianBlur1049" />
+ </filter>
+ </defs>
+ <sodipodi:namedview
+ stroke="#ef2929"
+ fill="#f57900"
+ id="base"
+ pagecolor="#000000"
+ bordercolor="#666666"
+ borderopacity="0.25490196"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="87.025304"
+ inkscape:cy="23.978474"
+ inkscape:current-layer="layer9"
+ showgrid="false"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1016"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ width="400px"
+ height="300px"
+ inkscape:snap-nodes="true"
+ inkscape:snap-bbox="false"
+ objecttolerance="7"
+ gridtolerance="12"
+ guidetolerance="13"
+ inkscape:window-maximized="1"
+ inkscape:pagecheckerboard="false"
+ showguides="false"
+ inkscape:guide-bbox="true"
+ inkscape:locked="false"
+ inkscape:measure-start="0,0"
+ inkscape:measure-end="0,0"
+ inkscape:object-nodes="true"
+ inkscape:bbox-nodes="true"
+ inkscape:snap-global="true"
+ inkscape:object-paths="true"
+ inkscape:snap-intersection-paths="true"
+ inkscape:snap-bbox-edge-midpoints="true"
+ inkscape:snap-bbox-midpoints="true"
+ showborder="false"
+ inkscape:snap-center="true"
+ inkscape:snap-object-midpoints="true"
+ inkscape:snap-midpoints="true"
+ inkscape:snap-smooth-nodes="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid5883"
+ spacingx="2"
+ spacingy="2"
+ enabled="true"
+ visible="true"
+ empspacing="4"
+ originx="0"
+ originy="0" />
+ <sodipodi:guide
+ position="64,8"
+ orientation="0,1"
+ id="guide1073"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="12,64"
+ orientation="1,0"
+ id="guide1075"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,104"
+ orientation="0,1"
+ id="guide1099"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,128"
+ orientation="0,1"
+ id="guide993"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="104,64"
+ orientation="1,0"
+ id="guide995"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="9.2651362e-08,64"
+ orientation="1,0"
+ id="guide867"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="120,64"
+ orientation="1,0"
+ id="guide869"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,116"
+ orientation="0,1"
+ id="guide871"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <inkscape:grid
+ type="xygrid"
+ id="grid873"
+ spacingx="1"
+ spacingy="1"
+ empspacing="8"
+ color="#000000"
+ opacity="0.49019608"
+ empcolor="#000000"
+ empopacity="0.08627451"
+ dotted="true" />
+ <sodipodi:guide
+ position="24,64"
+ orientation="1,0"
+ id="guide877"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="116,64"
+ orientation="1,0"
+ id="guide879"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,120"
+ orientation="0,1"
+ id="guide881"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,12"
+ orientation="0,1"
+ id="guide883"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="8,64"
+ orientation="1,0"
+ id="guide885"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="128,64"
+ orientation="1,0"
+ id="guide887"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,0"
+ orientation="0,1"
+ id="guide897"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,24"
+ orientation="0,1"
+ id="guide899"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="256,256"
+ orientation="-0.70710678,0.70710678"
+ id="guide950"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ <sodipodi:guide
+ position="64,64"
+ orientation="0.70710678,0.70710678"
+ id="guide952"
+ inkscape:locked="false"
+ inkscape:label=""
+ inkscape:color="rgb(0,0,255)" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata4">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:creator>
+ <cc:Agent>
+ <dc:title>GNOME Design Team</dc:title>
+ </cc:Agent>
+ </dc:creator>
+ <dc:source />
+ <cc:license
+ rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"; />
+ <dc:title>Adwaita Icon Template</dc:title>
+ <dc:subject>
+ <rdf:Bag />
+ </dc:subject>
+ <dc:date />
+ <dc:rights>
+ <cc:Agent>
+ <dc:title />
+ </cc:Agent>
+ </dc:rights>
+ <dc:publisher>
+ <cc:Agent>
+ <dc:title />
+ </cc:Agent>
+ </dc:publisher>
+ <dc:identifier />
+ <dc:relation />
+ <dc:language />
+ <dc:coverage />
+ <dc:description />
+ <dc:contributor>
+ <cc:Agent>
+ <dc:title />
+ </cc:Agent>
+ </dc:contributor>
+ </cc:Work>
+ <cc:License
+ rdf:about="http://creativecommons.org/licenses/by-sa/4.0/";>
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#Reproduction"; />
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#Distribution"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#Notice"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#Attribution"; />
+ <cc:permits
+ rdf:resource="http://creativecommons.org/ns#DerivativeWorks"; />
+ <cc:requires
+ rdf:resource="http://creativecommons.org/ns#ShareAlike"; />
+ </cc:License>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:label="Icon"
+ inkscape:groupmode="layer"
+ style="display:inline"
+ transform="translate(0,-172)">
+ <g
+ inkscape:groupmode="layer"
+ id="layer2"
+ inkscape:label="baseplate"
+ style="display:none">
+ <text
+ xml:space="preserve"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.33333349px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:'Cantarell,
Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.33264872;enable-background:new"
+ x="7.9499588"
+ y="148.65199"
+ id="context"
+ inkscape:label="context"><tspan
+ sodipodi:role="line"
+ id="tspan2716"
+ x="7.9499588"
+ y="148.65199"
+ style="font-size:5.33333349px;stroke-width:0.33264872">apps</tspan></text>
+ <text
+ inkscape:label="icon-name"
+ id="text3021"
+ y="157.23398"
+ x="7.7533054"
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:5.33333349px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:'Cantarell,
Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.33264872;enable-background:new"
+ xml:space="preserve"><tspan
+ y="157.23398"
+ x="7.7533054"
+ id="tspan3023"
+ sodipodi:role="line"
+ style="font-size:5.33333349px;stroke-width:0.33264872">org.gnome.Help</tspan></text>
+ <g
+ style="display:inline;fill:#000000;enable-background:new"
+ transform="matrix(7.9911709,0,0,8.0036407,-167.7909,-4846.0776)"
+ id="g12027"
+ inkscape:export-xdpi="12"
+ inkscape:export-ydpi="12" />
+ <rect
+
style="display:inline;overflow:visible;visibility:visible;fill:#f0f0f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;enable-background:accumulate"
+ id="rect13805"
+ width="128"
+ height="128"
+ x="9.2651362e-08"
+ y="172"
+ inkscape:label="512x512" />
+ <g
+ id="g883"
+ style="fill:none;fill-opacity:0.25098039;stroke:#a579b3;stroke-opacity:1"
+ transform="translate(-24,24)" />
+ <g
+ id="g900"
+ style="fill:none;fill-opacity:0.25098039;stroke:#a579b3;stroke-opacity:1"
+ transform="translate(-24,24)" />
+ <g
+ id="g1168"
+ transform="matrix(0.25,0,0,0.25,6.9488522e-8,225)">
+ <circle
+ cx="256"
+ cy="44"
+ r="240"
+ id="path1142"
+
style="opacity:0.1;fill:#2864b0;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
/>
+ <rect
+ ry="32"
+ rx="32"
+ y="-180"
+ x="96"
+ height="448"
+ width="319.99979"
+ id="rect1110"
+
style="opacity:0.1;fill:#2864b0;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
/>
+ <rect
+ ry="32"
+ rx="32"
+ y="-164"
+ x="48"
+ height="416"
+ width="416"
+ id="rect1110-8"
+
style="display:inline;opacity:0.1;fill:#2864b0;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new"
/>
+ <rect
+ ry="32"
+ rx="32"
+ y="-116"
+ x="32"
+ height="320"
+ width="448"
+ id="rect1110-8-9"
+
style="display:inline;opacity:0.1;fill:#2864b0;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new"
/>
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer9"
+ inkscape:label="hires"
+ style="display:inline">
+ <use
+ style="display:inline;stroke-width:0.95651996;enable-background:new"
+ x="0"
+ y="0"
+ xlink:href="#path1082"
+ id="use1199"
+ transform="matrix(-1,0,0,1,128.00252,-2.7346626e-8)"
+ width="100%"
+ height="100%" />
+ <use
+ style="display:inline;stroke-width:0.95651996;enable-background:new"
+ x="0"
+ y="0"
+ xlink:href="#path1082"
+ id="use1199-0"
+ transform="rotate(-180,64.00127,236.00577)"
+ width="100%"
+ height="100%" />
+ <use
+ style="display:inline;stroke-width:0.95651996;enable-background:new"
+ x="0"
+ y="0"
+ xlink:href="#path1082"
+ id="use1201"
+ transform="matrix(1,0,0,-1,-5.2272824e-6,472.01152)"
+ width="100%"
+ height="100%" />
+ <path
+ id="path1082"
+
style="display:inline;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#ddc6b3;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new"
+ d="m 16.641596,237.3929 a 34.500065,34.500065 0 0 1 0.26206,-46.9655 34.500065,34.500065 0 0 1
46.858115,-3.18498" />
+ <g
+ id="g1013"
+ clip-path="url(#clipPath1015)">
+ <rect
+ inkscape:label="512x512"
+ y="172"
+ x="9.2651362e-08"
+ height="128"
+ width="128"
+ id="rect13805-5"
+
style="display:inline;overflow:visible;visibility:visible;fill:#f6f5f4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;enable-background:accumulate"
/>
+ <path
+ id="rect913-3"
+ d="M 48.001953,4.0058594 V 48 H 4.0019531 V 80.011719 H 48.001953 V 124.00586 H 80 V 80.011719 h
44.00195 V 48 H 80 V 4.0058594 Z"
+
style="display:inline;opacity:1;vector-effect:none;fill:#e01b24;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new"
+ inkscape:connector-curvature="0"
+ transform="translate(0,172)" />
+ <path
+
style="display:inline;overflow:visible;visibility:visible;opacity:0.15;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;marker:none;enable-background:accumulate"
+ d="M 0,168 V 296 H 128 V 168 Z m 64,4 a 60,60 0 0 1 60,60 60,60 0 0 1 -60,60 60,60 0 0 1 -60,-60
60,60 0 0 1 60,-60 z m 0,26 a 34,34 0 0 0 -34,34 34,34 0 0 0 34,34 34,34 0 0 0 34,-34 34,34 0 0 0 -34,-34 z"
+ id="rect13805-5-6"
+ inkscape:connector-curvature="0" />
+ <circle
+ id="circle864"
+
style="display:inline;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:url(#linearGradient884);stroke-width:3.99999952;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;enable-background:new;filter:url(#filter1047)"
+ cx="64.420197"
+ cy="235.08684"
+ r="52" />
+ <circle
+ transform="rotate(180,0,1)"
+
style="display:inline;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:url(#linearGradient892);stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;filter:url(#filter1031);enable-background:new"
+ id="path866"
+ cx="-64.420181"
+ cy="-235.08685"
+ r="42" />
+ </g>
+ </g>
+ </g>
+</svg>
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
@@ -175,6 +175,23 @@ should include the leading dot. By default, `.xhtml` will be used if
</xsl:param>
+<!--@@==========================================================================
+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.
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>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
