1 /* html4css2.css: Cascading style sheet for Docutils' html4strict writer. */
3 /* :Author: Günter Milde */
4 /* :Copyright: © 2009 Günter Milde. */
5 /* Released without warranties or conditions of any kind */
6 /* under the terms of the Apache License, Version 2.0 */
7 /* http://www.apache.org/licenses/LICENSE-2.0 */
9 /* This stylesheet supplements the Docutils standard style 'html4css1.css'. */
10 /* It uses CSS 2.1 elements (supported by up-to-date versions of popular */
20 /* http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
21 recommends "line-spacing that’s at least 140% of your text size" */
23 /* counter-reset: figure; */
26 /* avoid long lines --> better reading */
27 /* OTOH: lines should not be too short because of missing hyphenation, */
33 /* separate items except for compact lists */
37 .compact li
, .compact p
, .compact ul
, .compact ol
38 dl
.simple
> dd
, .simple li
, .simple p
, .simple ul
, .simple ol
{
41 /* background: magenta; */
43 dl
.simple
, dl
.compact
, dl
.simple
> dd
, dl
.compact
> dd
{
46 /* background: lightgreen; */
49 /* space around paragraphs */
50 dl
> dd
p:first-child
, td
> p
{
61 /* Special definition lists */
62 /* ======================== */
64 /* bold definition term on the same line as the label */
65 dl
.field-list
> dt
, dl
.option-list
> dt
, dl
.docinfo
> dt
,
66 dl
.footnote
> dt
, dl
.citation
> dt
, dl
.description
> dt
{
74 /* except for these */
75 dl
.option-list
> dt
, dl
.footnote
> dt
{
84 /* field names followed by a colon */
85 dl
.field-list
> dt:after
, dl
.docinfo
> dt:after
{
89 /* Offset for field content (corresponds to the --field-name-limit option) */
91 margin-left: 9em; /* ca. 14 chars in the test examples */
95 /* start field-body on a new line after long field names */
96 dl
.field-list
> dd p
{
98 /* display: inline-block; */
99 /* background: yellow; */
102 dl
.field-list
> dd
> p:first-child
,
103 /* dl.field-list > dd > ol:first-child, */
104 /* dl.field-list > dd > ul:first-child, */
105 dl
.field-list
> dd
> dl:first-child
{
106 display: inline-block
;
109 /* field-list variants:: */
111 /* example for custom field-name width */
112 dl
.field-list
.narrow
> dd
{
116 /* start field-body on same line after long field names */
117 dl
.field-list
.run-in
> dd p
{
121 /* wrap or truncate long field names */
122 dl
.field-list
.fix-labelwidth
> dt
{
123 width: 8em; /* set to dl.field-list > dd margin-left - padding-left */
126 dl
.field-list
.fix-labelwidth
> dd:after
{
127 /* a "stopper" to prevent next dd floating up too far */
137 /* margin-bottom: 0.5em; */
148 dl
.option-list
> dd
{
150 /* margin-bottom: 0.5em; */
153 /* start description on a new line after long options */
154 dl
.option-list
> dd p
{
156 display: inline-block
;
161 a
.footnote-reference
, a
.fn-backref
{
162 text-decoration: inherit
; /* do not underline footnote links */
166 /* line on the left */
169 border-left-width: thin
;
170 /* border-color: black; */
173 /* paragraph on same line as backrefs */
175 /* background: green; */
182 Ordered List (Enumeration)
183 --------------------------
185 Use counters to replace the deprecated start attribute. Make sure the
186 resulting list resembles the list-style 'outside' with a hanging indent.
189 /* New ordered list: reset counter, suppress the default label */
190 ol
, ol
.arabic
, ol
.loweralpha
, ol
.upperalpha
,
191 ol
.lowerroman
, ol
.upperroman
{
196 /* Set the negative indent of the list label as feature of the list item */
198 text-indent: -40px; /* Mozillas default indent */
200 /* reset for child elements */
205 /* background: lightgreen; */
210 /* increment and typeset counter(s), */
211 counter-increment: item
;
212 content: counter
(item
) ".";
213 /* display next to the content (aligned top-right), */
214 display: inline-block
;
217 /* sum must match ol>li {text-indent:} (40px is Mozillas default) */
220 /* background: yellow; */
223 /* The list item's first line starts next to the label, without indent */
224 ol
> li
> p:first-child
,
225 ol
> li
> ol:first-child
,
226 ol
> li
> ul:first-child
,
227 ol
> li
> dl:first-child
{
228 display: inline-block
;
229 /* background: lightblue; */
232 /* default separator variants */
233 ol
.loweralpha
> li:before
{
234 content: counter
(item
, lower-alpha
) ")";
236 ol
.upperalpha
> li:before
{
237 content: counter
(item
, upper-alpha
) ".";
239 ol
.lowerroman
> li:before
{
240 content: "(" counter
(item
, lower-roman
) ")";
242 ol
.upperroman
> li:before
{
243 content: counter
(item
, upper-roman
) ")";
245 /* nested counters (1, 1.1, 1.1.1, etc) */
246 /* nested enumerated lists "inherit" the class attribute, other lists not */
247 ol
.nested
> li:before
, ol
.nested ol
> li:before
{
248 content: counters
(item
, ".") " ";
251 /* lists nested in definition list */
257 /* TODO: prefix, suffix? */
259 /* smaller font for super- and subscripts */
260 /* sub, sup {font-size: 70%;} */ /* Mozilla default is `smaller` */
266 /* margins and borders for "normal" tables */
268 /* background: magenta; */
271 /* border-style: outset; */
273 border-color: silver
;
275 border-collapse: collapse
;
285 border-color: silver
;
286 /* text-align: left; */
290 td
> p:first-child
, th
> p:first-child
{
297 /* no borders for "borderless" tables */
298 table
.borderless
, table
.borderless
* {
302 /* "booktabs" style (no vertical lines) */
305 border-top: 2px solid
;
306 border-bottom: 2px solid
;
307 border-collapse: collapse
;
314 border-bottom: thin solid
;
320 margin-bottom: 0.25em
321 /* padding: 2em 0 1em 0; */
325 table
.numbered
> caption:before
{
326 counter-increment: table
; /* defined/re-set in body */
327 content: "Table " counter
(table
) ": ";
335 /* whitespace and wrapping in inline literals */
336 /* possible values: normal, nowrap, pre, pre-wrap, pre-line */
338 white-space: pre-wrap
;
341 /* /* compensate for initial line-break (which is literal with XHTML 1.1) */ */
342 /* pre.literal-block, pre.doctest-block { */
343 /* margin-top: 0em ; */
346 /* Table of Contents */
348 /* don't indent like a topic */
352 /* div.topic.contents ul { */
353 /* list-style: none; */
356 div
.topic
.contents a
{
357 text-decoration: none
; /* no underline for links */
360 /* section numbers */
368 /* no padding for top and bottom */
369 div
.admonition
, div
.attention
, div
.caution
, div
.danger
, div
.error
,
370 div
.hint
, div
.important
, div
.note
, div
.tip
, div
.warning
{