Menu
▾
▴
[Docutils-checkins] SF.net SVN: docutils:[8635] trunk/docutils
|
From: <mi...@us...> - 2021-03-19 00:23:24
|
Revision: 8635
http://sourceforge.net/p/docutils/code/8635
Author: milde
Date: 2021-03-19 00:23:19 +0000 (Fri, 19 Mar 2021)
Log Message:
-----------
HTML5 stylesheet update and cleanup. Class value for documents with ToC.
* Improve the page layout for responsive design, especially for
documents without ToC.
* Cleanup, small fixes, and re-organisation.
Modified Paths:
--------------
trunk/docutils/docutils/writers/html5_polyglot/__init__.py
trunk/docutils/docutils/writers/html5_polyglot/minimal.css
trunk/docutils/docutils/writers/html5_polyglot/plain.css
trunk/docutils/docutils/writers/html5_polyglot/responsive.css
trunk/docutils/docutils/writers/html5_polyglot/tuftig.css
trunk/docutils/test/functional/expected/standalone_rst_html5.html
Modified: trunk/docutils/docutils/writers/html5_polyglot/__init__.py
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/docutils/writers/html5_polyglot/__init__.py 2021-03-19 00:23:19 UTC (rev 8635)
@@ -408,3 +408,17 @@
def depart_sidebar(self, node):
self.body.append('</aside>\n')
self.in_sidebar = False
+
+ # Add class value to <body>, if there is a ToC in the document
+ # (see responsive.css how this is used for sidebar navigation).
+ # TODO: use the new HTML5 element <aside>?
+ def visit_topic(self, node):
+ if ('contents' in node['classes']
+ and isinstance(node.parent, nodes.document)):
+ self.body_prefix[0] = '</head>\n<body class="with-toc">\n'
+ self.body.append(self.starttag(node, 'div', CLASS='topic'))
+ self.topic_classes = node['classes'] # TODO: remove?
+
+ def depart_topic(self, node):
+ self.body.append('</div>\n')
+ self.topic_classes = []
Modified: trunk/docutils/docutils/writers/html5_polyglot/minimal.css
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/minimal.css 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/docutils/writers/html5_polyglot/minimal.css 2021-03-19 00:23:19 UTC (rev 8635)
@@ -21,23 +21,18 @@
/* .. _validates: http://jigsaw.w3.org/css-validator/validator$link */
/* titles */
-h1.title,
-p.subtitle {
- text-align: center;
-}
p.topic-title,
-p.sidebar-title,
-p.rubric,
p.admonition-title,
p.system-message-title {
font-weight: bold;
}
-h1 + p.subtitle {
- font-size: 1.6em;
+p.sidebar-title,
+p.rubric {
+ font-weight: bold;
+ font-size: larger;
}
-h2 + p.section-subtitle,
-p.sidebar-title {
- font-size: 1.2em;
+p.rubric {
+ color: maroon;
}
p.subtitle,
p.section-subtitle,
@@ -45,45 +40,47 @@
font-weight: bold;
margin-top: -0.5em;
}
-p.rubric {
- font-size: larger;
- color: maroon;
+h1 + p.subtitle {
+ font-size: 1.6em;
}
-a.toc-backref {
+h2 + p.section-subtitle, a.toc-backref {
color: black;
text-decoration: none;
}
/* Warnings, Errors */
-div.system-messages h2,
-span.problematic,
-p.system-message-title {
+.system-messages h2,
+.system-message-title,
+span.problematic {
color: red;
}
/* Inline Literals */
-span.docutils.literal {
+.docutils.literal {
font-family: monospace;
white-space: pre-wrap;
}
-/* do not wraph at hyphens and similar: */
+/* do not wrap at hyphens and similar: */
.literal > span.pre { white-space: nowrap; }
/* Lists */
/* compact and simple lists: no margin between items */
-.simple li, .compact li,
-.simple ul, .compact ul,
-.simple ol, .compact ol,
-.simple > li p, .compact > li p,
-dl.simple > dd, dl.compact > dd {
+.simple li, .simple ul, .simple ol,
+.compact li, .compact ul, .compact ol,
+.simple > li p, dl.simple > dd,
+.compact > li p, dl.compact > dd {
margin-top: 0;
margin-bottom: 0;
}
+/* Nested Paragraphs */
+p:first-child { margin-top: 0; }
+p:last-child { margin-bottom: 0; }
+td > p, th > p { margin-bottom: 0; }
/* Table of Contents */
-div.topic.contents { margin: 0.5em 0; }
-div.topic.contents ul {
+.topic.contents { margin: 0.5em 0; }
+.topic.contents ul {
list-style-type: none;
padding-left: 1.5em;
}
@@ -95,14 +92,14 @@
ol.lowerroman { list-style: lower-roman }
ol.upperroman { list-style: upper-roman }
-dt span.classifier { font-style: italic }
-dt span.classifier:before {
+/* Definition Lists and Derivatives */
+dt .classifier { font-style: italic }
+dt .classifier:before {
font-style: normal;
margin: 0.5em;
content: ":";
}
-
-/* Field Lists and drivatives */
+/* Field Lists and similar */
/* bold field name, content starts on the same line */
dl.field-list > dt,
dl.option-list > dt,
@@ -120,7 +117,7 @@
dl.field-list > dd,
dl.option-list > dd,
dl.docinfo > dd {
- margin-left: 9em; /* ca. 14 chars in the test examples */
+ margin-left: 9em; /* ca. 14 chars in the test examples, fit all Docinfo fields */
}
/* start field-body on a new line after long field names */
dl.field-list > dd > *:first-child,
@@ -137,11 +134,11 @@
}
/* Bibliographic Fields (docinfo) */
-pre.address {
- font: inherit;
+dl.docinfo pre.address {
+ font: inherit;
margin: 0.5em 0;
}
-dd.authors > p { margin: 0; }
+dl.docinfo > dd.authors > p { margin: 0; }
/* Option Lists */
dl.option-list > dt { font-weight: normal; }
@@ -160,41 +157,31 @@
vertical-align: super;
font-size: small;
}
-dt.label > span.fn-backref { margin-left: 0.2em; }
+dt.label > span.fn-backref {
+ margin-left: 0.2em;
+ font-weight: normal;
+}
dt.label > span.fn-backref > a { font-style: italic; }
-/* Alignment inside block objects */
-.align-left { text-align: left; }
-.align-right { text-align: right; }
-.align-center { clear: both; text-align: center; }
-.align-top { vertical-align: top; }
-.align-middle { vertical-align: middle; }
-.align-bottom { vertical-align: bottom; }
-
-/* Alignment of block objects */
-figure.align-left,
-img.align-left,
-object.align-left,
-table.align-left {
+/* Alignment */
+.align-left {
+ text-align: left;
margin-right: auto;
}
-figure.align-center,
-img.align-center,
-object.align-center,
-table.align-center {
+.align-center {
+ clear: both;
+ text-align: center;
margin-left: auto;
margin-right: auto;
}
-figure.align-right,
-img.align-right,
-object.align-right,
-table.align-right {
+.align-right {
+ text-align: right;
margin-left: auto;
}
-img.align-center, img.align-right,
-object.align-center, object.align-right {
- display: block;
-}
+.align-top { vertical-align: top; }
+.align-middle { vertical-align: middle; }
+.align-bottom { vertical-align: bottom; }
+
/* reset inner alignment in figures and tables */
figure.align-left, figure.align-right,
table.align-left, table.align-center, table.align-right {
@@ -201,40 +188,42 @@
text-align: inherit;
}
-/* Sidebar */
-aside.sidebar {
+/* Text Blocks */
+blockquote,
+div.topic,
+aside.topic {
+ margin: 1em 2em;
+}
+.sidebar,
+.admonition,
+.system-message {
+ border: thin solid;
+ margin: 1em 2em;
+ padding: 0.5em 1em;
+}
+.sidebar {
width: 30%;
max-width: 26em;
float: right;
clear: right;
}
-
-/* Text Blocks */
-blockquote,
-div.topic,
-div.admonition,
-div.system-message {
- margin-left: 2em;
- margin-right: 2em;
-}
div.line-block { display: block; }
-div.line-block div.line-block {
- margin: 0 0 0 2em;
-}
-pre { margin-left: 2em; }
+div.line-block div.line-block, pre { margin-left: 2em; }
pre.code .ln { color: gray; } /* line numbers */
-
/* Tables */
-table { border-collapse: collapse; }
+table {
+ border-collapse: collapse;
+}
td, th {
- border-style: solid;
- border-color: silver;
+ border: thin solid silver;
padding: 0 1ex;
- border-width: thin;
}
-td > p:first-child, th > p:first-child { margin-top: 0; }
-td > p, th > p { margin-bottom: 0; }
+.borderless td, .borderless th {
+ border: 0;
+ padding: 0;
+ padding-right: 0.5em /* separate table cells */
+}
table > caption {
text-align: left;
@@ -245,17 +234,16 @@
caption-side: bottom;
}
-table.borderless td, table.borderless th {
- border: 0;
- padding: 0;
- padding-right: 0.5em /* separate table cells */
-}
-
/* Document Header and Footer */
header { border-bottom: 1px solid black; }
footer { border-top: 1px solid black; }
-/* new HTML5 block elements: set display for older browsers */
-header, section, footer, aside, nav, main, article, figure {
+/* Images are block-level by default in Docutils */
+/* New HTML5 block elements: set display for older browsers */
+img, header, section, footer, aside, nav, main, article, figure, video {
display: block;
}
+/* inline images */
+p img, p video, figure img, figure video {
+ display: inline;
+}
Modified: trunk/docutils/docutils/writers/html5_polyglot/plain.css
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/plain.css 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/docutils/writers/html5_polyglot/plain.css 2021-03-19 00:23:19 UTC (rev 8635)
@@ -25,23 +25,26 @@
margin: 0;
background-color: #dbdbdb;
}
-div.document,
-main {
+main, footer, header {
line-height:1.3;
- counter-reset: table figure;
/* avoid long lines --> better reading */
- /* optimum is 45…75 characters/line <http://webtypography.net/2.1.2> */
+ /* optimum is 45…75 characters/line <http://webtypography.net/2.1.2> */
/* OTOH: lines should not be too short because of missing hyphenation, */
- max-width: 50em;
+ max-width: 50rem;
padding: 1px 2%; /* 1px on top avoids grey bar above title (mozilla) */
margin: auto;
+}
+main {
+ counter-reset: table figure;
background-color: white;
}
+footer, header {
+ font-size: smaller;
+ padding: 0.5em 2%;
+ border: none;
+}
-/* Sections */
-
/* Transitions */
-
hr.docutils {
width: 80%;
margin-top: 1em;
@@ -50,7 +53,6 @@
}
/* Paragraphs */
-/* ========== */
/* vertical space (parskip) */
p, ol, ul, dl, li, dd,
@@ -118,28 +120,16 @@
font-style: normal;
}
-/* Citations */
-dl.citation dt.label {
- font-weight: bold;
-}
-span.fn-backref {
- font-weight: normal;
-}
-
/* Text Blocks */
/* =========== */
/* Literal Blocks */
-
-pre.literal-block,
-pre.doctest-block,
-pre.math,
-pre.code {
+pre.literal-block, pre.doctest-block,
+pre.math, pre.code {
font-family: monospace;
}
/* Block Quotes */
-
blockquote > table,
div.topic > table {
margin-top: 0;
@@ -201,26 +191,24 @@
/* Images and Figures */
/* let content flow to the side of aligned images and figures */
-.figure.align-left,
figure.align-left,
img.align-left,
+video.align-left,
object.align-left {
- display: block;
clear: left;
float: left;
margin-right: 1em;
}
-.figure.align-right,
figure.align-right,
img.align-right,
+video.align-right,
object.align-right {
- display: block;
clear: right;
float: right;
margin-left: 1em;
}
-/* Stop floating sidebars, images and figures at section level 1,2,3 */
-h1, h2, h3, h4 { clear: both; }
+/* Stop floating sidebars, images and figures */
+h1, h2, h3, h4, footer, header { clear: both; }
/* Numbered figures */
figure.numbered > figcaption > p:before {
@@ -229,32 +217,19 @@
font-weight: bold;
}
-
/* Admonitions and System Messages */
-
-div.admonition,
-div.system-message,
-aside.sidebar {
- border: medium outset;
- margin: 1em 1.5em;
- padding: 0.5em 1em;
-}
-
-div.caution p.admonition-title,
-div.attention p.admonition-title,
-div.danger p.admonition-title,
-div.error p.admonition-title,
-div.warning p.admonition-title,
+.caution p.admonition-title,
+.attention p.admonition-title,
+.danger p.admonition-title,
+.error p.admonition-title,
+.warning p.admonition-title,
div.error {
color: red;
}
-
/* Sidebar */
-
/* Move right. In a layout with fixed margins, */
/* it can be moved into the margin. */
-div.sidebar,
aside.sidebar {
width: 30%;
max-width: 26em;
@@ -264,7 +239,6 @@
}
/* Code */
-
pre.code { padding: 0.7ex }
pre.code, code { background-color: #eeeeee }
pre.code .ln { color: gray; } /* line numbers */
@@ -286,28 +260,9 @@
/* Compound Paragraph */
/* Container */
-/* Document Header and Footer */
-
-footer, header {
- font-size: smaller;
- clear: both;
- padding: 0.5em 2%;
- background-color: #ebebee;
- border: none;
-}
-
/* Inline Markup */
/* ============= */
-/* Emphasis */
-/* em */
-/* Strong Emphasis */
-/* strong */
-/* Interpreted Text */
-/* span.interpreted */
-/* Title Reference */
-/* cite */
-
/* Inline Literals */
/* possible values: normal, nowrap, pre, pre-wrap, pre-line */
/* span.docutils.literal { white-space: pre-wrap; } */
Modified: trunk/docutils/docutils/writers/html5_polyglot/responsive.css
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/responsive.css 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/docutils/writers/html5_polyglot/responsive.css 2021-03-19 00:23:19 UTC (rev 8635)
@@ -27,15 +27,18 @@
body {
background-color: #fafaf6;
margin: auto;
+ --field-indent: 6.6em; /* indent of fields in field lists */
+ --sidebar-margin-right: 0; /* adapted in media queries below */
}
main {
counter-reset: figure table;
}
-main, header, footer {
+body > * {
background-color: white;
line-height: 1.6;
- /* smooth transition from 5% to 15% (see media queries below) */
- padding: 0.5rem calc(25% - 5.8rem);
+ padding: 0.5rem calc(29% - 7.2rem); /* go from 5% to 15% (8.15em/54em) */
+ margin: auto;
+ max-width: 100rem;
}
/* Vertical Space (Parskip) */
@@ -50,13 +53,6 @@
dl > dd {
margin-bottom: 0.5em;
}
-/* exceptions */
-p:first-child {
- margin-top: 0;
-}
-p:last-child {
- margin-bottom: 0;
-}
blockquote > table,
div.topic > table {
margin-top: 0;
@@ -119,11 +115,11 @@
/* Lists */
ul, ol {
- padding-left: 1.1em;
+ padding-left: 1.1em; /* indent by bullet width (Firefox, DejaVu fonts) */
}
dl.field-list > dd,
dl.docinfo > dd {
- margin-left: 6.4em;
+ margin-left: var(--field-indent); /* adapted in media queries or HTML */
}
dl.option-list > dd {
margin-left: 20%;
@@ -161,6 +157,8 @@
border-left: solid;
border-left-width: thin;
}
+dt.label > span.fn-backref {
+}
/* Images, Figures, and Tables */
img {
@@ -209,18 +207,16 @@
}
/* Admonitions and System Messages */
-div.admonition,
+.admonition,
div.system-message {
- border-style: solid;
- border-color: silver;
- border-width: thin;
+ border: thin solid silver;
margin: 1em 2%;
padding: 0.5em;
}
-div.caution p.admonition-title,
-div.attention p.admonition-title,
-div.danger p.admonition-title,
-div.warning p.admonition-title,
+.caution p.admonition-title,
+.attention p.admonition-title,
+.danger p.admonition-title,
+.warning p.admonition-title,
div.error {
color: maroon;
}
@@ -242,7 +238,7 @@
/* Hyperlink References */
a {
text-decoration: none;
- text-decoration-skip-ink: auto; /* underline that clears descenders (nonstandard) */
+ /* text-decoration-skip-ink: auto; !!nonstandard, default in modern browsers */
}
/* Wrap links at any place, if this is the only way to prevent overflow */
a:link{
@@ -277,6 +273,7 @@
}
img.align-left,
+video.align-left,
figure.align-left,
table.align-left {
margin-left: 0;
@@ -286,6 +283,7 @@
float: left;
}
img.align-right,
+video.align-right,
figure.align-right,
table.align-right {
margin-left: 0.5em;
@@ -299,9 +297,10 @@
aside.sidebar,
.marginal,
.admonition.marginal {
- max-width: min(40%, 20rem);
+ max-width: 40%;
+ border: none;
background-color: #efefea;
- margin: 0.5em 0 0.5em 1em;
+ margin: 0.5em var(--sidebar-margin-right) 0.5em 1em;
padding: 0.5em;
clear: right;
float: right;
@@ -316,7 +315,7 @@
@media (max-width: 30em) {
/* Smaller margins and no floating elements for small screens */
/* (main text less than 40 characters/line) */
- main, header, footer {
+ body > * {
padding: 0.5rem 5%;
line-height: 1.4
}
@@ -331,13 +330,11 @@
pre {
margin-left: 0;
}
- dl.field-list > dd {
- margin-left: 4em;
+ body {
+ --field-indent: 4em;
}
- dl.field-list.narrow > dd,
- dl.docinfo > dd,
- dl.option-list > dd {
- margin-left: 2.4em;
+ dl.field-list.narrow, dl.docinfo, dl.option-list {
+ --field-indent: 2.4em;
}
pre, pre * {
font-size: 0.9em;
@@ -348,17 +345,21 @@
@media (min-width: 54em) {
/* Move ToC to the left */
/* Main text width before: 70% ≙ 35em ≙ 75…95 chrs (Dejavu/Times) */
- /* after: ≳ 30em ≙ 54…70 chrs (Dejavu/Times) */
- main, header, footer {
- margin-left: 10%;
- padding-left: min(20%, 18rem);
+ /* after: ≳ 30em ≙ 54…70 chrs (Dejavu/Times) */
+ body.with-toc {
+ padding-left: 8%;
+ }
+ body.with-toc > * {
+ margin-left: 0;
+ padding-left: 22rem; /* fallback for webkit */
+ padding-left: min(22%, 22rem);
padding-right: 7%;
}
- main > div.topic.contents {
+ main > div.topic.contents { /* exclude local ToCs */
position: fixed;
top: 0;
left: 0;
- width: min(25%, 28em);
+ width: min(25%, 25em);
height: 100vh;
margin: 0;
background-color: #fafaf6;
@@ -377,57 +378,69 @@
}
@media (min-width: 70em) {
- dl.field-list > dd,
- dl.docinfo > dd {
- margin-left: 9em;
+ body {
+ --field-indent: 9em;
}
}
-@media (min-width: 80em) {
- /* limit main text to 50em ≙ 85…100 characters DejaVu rsp. …120 Times */
- main, header, footer {
- padding-right: calc(70% - 50em);
+@media (min-width: 77em) {
+ /* Move marginalia to 6rem from right border */
+ /* aside.sidebar, */
+ /* .marginal, */
+ /* .admonition.marginal { */
+ /* margin-right: calc(6rem - 15%); */
+ /* } */
+ /* BUG: margin is calculated for break point width */
+ /* workaround: variable + many breakpoints */
+ body > * {
+ padding-left: 18%;
+ padding-right: 28%; /* fallback for webkit */
+ padding-right: min(28%, 28rem);
+ --sidebar-margin-right: -20rem;
}
- /* Move marginalia to 6rem from right border */
- /* TODO: why does this fail ?? */
- /* aside.sidebar, */
- /* .marginal, */
- /* .admonition.marginal { */
- /* margin-right: calc(6rem - 15vh); */
- /* } */
+ /* limit main text to ~ 50em ≙ 85…100 characters DejaVu rsp. …120 Times */
+ body.with-toc > * {
+ padding-left: min(22%, 22rem);
+ padding-right: calc(78% - 50rem); /* fallback for webkit */
+ padding-right: min(78% - 50rem, 28rem);
+ --sidebar-margin-right: 0;
+ }
}
-@media (min-width: 92em) {
+@media (min-width: 85em) {
+ body.with-toc > * {
+ --sidebar-margin-right: -9rem;
+ }
+}
+
+@media (min-width: 90em) {
/* move marginalia into the margin */
- aside.sidebar,
- .admonition.marginal,
- .marginal {
- margin-right: -12rem;
+ body > * {
+ padding-left: min(22%, 22rem);
+ --sidebar-margin-right: -23rem;
}
+ body.with-toc > * {
+ --sidebar-margin-right: -14rem;
+ }
}
-@media (min-width: 106em) {
+@media (min-width: 99em) {
/* move marginalia out of main text area */
- aside.sidebar,
+ body.with-toc > * {
+ --sidebar-margin-right: -20rem;
+ }
+ body > *, body.with-toc > * { /* for webkit */
+ padding-left: 22rem;
+ padding-right: 28rem;
+ }
.admonition.marginal,
.marginal {
- width: 20rem;
- /* background-color: inherit; */
- margin-right: -22rem;
+ width: 40%; /* make marginal figures, ... "full width" */
}
}
-@media (min-width: 117em) {
- /* maximal sensible width of main area reached */
- main, header, footer {
- width: 98rem;
- margin-right: 0;
- padding-left: 18rem;
- padding-right: 30rem;
+@media (min-width: 104em) {
+ body.with-toc > * {
+ --sidebar-margin-right: -23rem;
}
- aside.sidebar,
- .marginal,
- .admonition.marginal {
- margin-right: -24rem; /* move into the padding, 6rem from border */
- }
}
Modified: trunk/docutils/docutils/writers/html5_polyglot/tuftig.css
===================================================================
--- trunk/docutils/docutils/writers/html5_polyglot/tuftig.css 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/docutils/writers/html5_polyglot/tuftig.css 2021-03-19 00:23:19 UTC (rev 8635)
@@ -25,11 +25,6 @@
/* General Settings */
/* ================ */
-@viewport {
- zoom: 1.0;
- width: extend-to-zoom;
-}
-
body {
font-family: et-book, Palatino, Georgia, serif;
background-color: #fafaf6;
@@ -281,7 +276,7 @@
}
/* Admonitions and System Messages */
-div.admonition,
+.admonition,
div.system-message {
border-style: solid;
border-color: silver;
@@ -289,10 +284,10 @@
margin: 1em 0;
padding: 0.5em;
}
-div.caution p.admonition-title,
-div.attention p.admonition-title,
-div.danger p.admonition-title,
-div.warning p.admonition-title,
+.caution p.admonition-title,
+.attention p.admonition-title,
+.danger p.admonition-title,
+.warning p.admonition-title,
div.error {
color: maroon;
}
@@ -326,7 +321,7 @@
}
a:link {
text-decoration: underline;
- text-decoration-skip-ink: auto; /* nonstandard selector */
+ /* text-decoration-skip-ink: auto; nonstandard selector */
}
/* undecorated links */
.contents a:link, a.toc-backref:link, a.image-reference:link,
Modified: trunk/docutils/test/functional/expected/standalone_rst_html5.html
===================================================================
--- trunk/docutils/test/functional/expected/standalone_rst_html5.html 2021-03-09 12:54:27 UTC (rev 8634)
+++ trunk/docutils/test/functional/expected/standalone_rst_html5.html 2021-03-19 00:23:19 UTC (rev 8635)
@@ -18,7 +18,7 @@
<link rel="stylesheet" href="../input/data/plain.css" type="text/css" />
<link rel="stylesheet" href="../input/data/math.css" type="text/css" />
</head>
-<body>
+<body class="with-toc">
<header>
<p>Document header</p>
</header>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
