sandbox/html4strict/html4strict/html4css2.css

   1 /* html4css2.css: Cascading style sheet for Docutils' html4strict writer.   */
   2 /*                                                                          */
   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                      */
   8 /*                                                                          */
   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    */
  11 /* browsers).                                                               */
  12
  13 /* General rules */
  14 /* ============= */
  15
  16 body {
  17   padding: 0 5%;
  18   margin: 8px 0;
  19   line-height:1.3;
  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" */
  22   counter-reset: table;
  23   /* counter-reset: figure; */
  24 }
  25
  26 /* avoid long lines --> better reading */
  27 /* OTOH: lines should not be too short because of missing hyphenation, */
  28 div.document {
  29   max-width: 45em;
  30   margin: auto;
  31 }
  32
  33 /* separate items except for compact lists */
  34 dl > dd {
  35   margin-bottom: 1em;
  36 }
  37 .compact li, .compact p, .compact ul, .compact ol
  38 dl.simple  > dd, .simple  li, .simple  p, .simple  ul, .simple  ol {
  39   margin-top: 0;
  40   margin-bottom: 0;
  41 /*   background: magenta; */
  42 }
  43 dl.simple, dl.compact, dl.simple > dd, dl.compact > dd {
  44   margin-top: 0;
  45   margin-bottom: 0;
  46 /*   background: lightgreen; */
  47 }
  48
  49 /* space around paragraphs */
  50 dl > dd p:first-child, td > p {
  51   margin: 0;
  52 }
  53
  54 /* Sidebar */
  55 /* ------- */
  56
  57 div.sidebar {
  58   margin-right: -5%;
  59 }
  60
  61 /* Special definition lists */
  62 /* ======================== */
  63
  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 {
  67   clear: left;
  68   float: left;
  69   margin: 0;
  70   padding: 0;
  71   padding-right: 0.5em;
  72   font-weight: bold;
  73 }
  74 /* except for these */
  75 dl.option-list > dt, dl.footnote > dt {
  76   font-weight: normal;
  77 }
  78
  79
  80
  81 /* Field Lists */
  82 /* ----------- */
  83
  84 /* field names followed by a colon */
  85 dl.field-list > dt:after, dl.docinfo > dt:after {
  86   content: ":";
  87 }
  88
  89 /* Offset for field content (corresponds to the --field-name-limit option) */
  90 dl.field-list > dd {
  91   margin-left:  9em; /* ca. 14 chars in the test examples */
  92   padding-left: 0.5em;
  93 }
  94
  95 /* start field-body on a new line after long field names */
  96 dl.field-list > dd p {
  97   width: 100%;
  98 /*   display: inline-block; */
  99 /*   background: yellow; */
 100 }
 101
 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;
 107 }
 108
 109 /* field-list variants:: */
 110
 111 /* example for custom field-name width */
 112 dl.field-list.narrow > dd {
 113   margin-left: 5em;
 114 }
 115
 116 /* start field-body on same line after long field names */
 117 dl.field-list.run-in > dd p {
 118   display: block;
 119 }
 120
 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 */
 124   overflow: hidden;
 125 }
 126 dl.field-list.fix-labelwidth > dd:after {
 127   /* a "stopper" to prevent next dd floating up too far */
 128   content: '';
 129   display: block;
 130   clear: left;
 131 }
 132
 133 /* docinfo */
 134
 135 dl.docinfo > dd {
 136   margin-left: 8em;
 137 /*   margin-bottom: 0.5em; */
 138 }
 139
 140
 141 /* option list */
 142
 143 dl.option-list {
 144   margin-left: 1em;
 145   padding-left: 0;
 146 }
 147
 148 dl.option-list > dd {
 149   margin-left: 8em;
 150   /* margin-bottom: 0.5em; */
 151 }
 152
 153 /* start description on a new line after long options */
 154 dl.option-list > dd p {
 155   width: 100%;
 156   display: inline-block;
 157 }
 158
 159 /* footnotes */
 160
 161 a.footnote-reference, a.fn-backref {
 162   text-decoration: inherit; /* do not underline footnote links */
 163 }
 164
 165 dl.footnote {
 166   /* line on the left */
 167   padding-left: 1ex;
 168   border-left: solid;
 169   border-left-width: thin;
 170   /* border-color: black; */
 171 }
 172
 173 /* paragraph on same line as backrefs */
 174 dd > em {
 175 /*   background: green; */
 176   float: left;
 177   margin-right: 1ex
 178 }
 179
 180
 181 /*
 182 Ordered List (Enumeration)
 183 --------------------------
 184
 185 Use counters to replace the deprecated start attribute. Make sure the
 186 resulting list resembles the list-style 'outside' with a hanging indent.
 187 */
 188
 189 /* New ordered list: reset counter, suppress the default label */
 190 ol, ol.arabic, ol.loweralpha, ol.upperalpha,
 191 ol.lowerroman, ol.upperroman {
 192   counter-reset: item;
 193   list-style: none
 194 }
 195
 196 /* Set the negative indent of the list label as feature of the list item */
 197 ol > li {
 198   text-indent: -40px; /* Mozillas default indent */
 199 }
 200 /* reset for child elements */
 201 ol > li > * {
 202   text-indent: 0px;
 203   text-indent: 0;
 204   margin-top: 0;
 205   /* background: lightgreen; */
 206 }
 207
 208 /* Label */
 209 ol > li:before {
 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;
 215   text-align: right;
 216   vertical-align: top;
 217   /* sum must match ol>li {text-indent:} (40px is Mozillas default) */
 218   width: 35px;
 219   padding-right: 5px;
 220 /*   background: yellow; */
 221 }
 222
 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; */
 230 }
 231
 232 /* default separator variants */
 233 ol.loweralpha > li:before {
 234   content: counter(item, lower-alpha) ")";
 235 }
 236 ol.upperalpha  > li:before {
 237   content: counter(item, upper-alpha) ".";
 238 }
 239 ol.lowerroman  > li:before {
 240   content: "(" counter(item, lower-roman) ")";
 241 }
 242 ol.upperroman  > li:before {
 243   content: counter(item, upper-roman) ")";
 244 }
 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, ".") " ";
 249 }
 250
 251 /* lists nested in definition list */
 252
 253 dd > ul, dd > ol {
 254   padding-left: 0pt;
 255 }
 256
 257 /* TODO: prefix, suffix? */
 258
 259 /* smaller font for super- and subscripts */
 260 /* sub, sup {font-size: 70%;} */ /* Mozilla default is `smaller` */
 261
 262
 263 /* Tables */
 264 /* ====== */
 265
 266 /* margins and borders for "normal" tables */
 267 table {
 268 /*   background: magenta; */
 269   margin-top: 1em ;
 270   margin-bottom: 1em;
 271 /*   border-style: outset; */
 272   border-style: solid;
 273   border-color: silver;
 274   border-width: thin;
 275   border-collapse: collapse;
 276 }
 277 blockquote > table {
 278   margin-top: 0em ;
 279   margin-bottom: 0em;
 280 }
 281
 282 td, th {
 283   border-style: solid;
 284   border-width: thin;
 285   border-color: silver;
 286   /* text-align: left; */
 287   padding: 0 1ex;
 288 }
 289
 290 td > p:first-child, th > p:first-child {
 291   margin-top: 0;
 292 }
 293 td > p, th > p {
 294   margin-bottom: 0;
 295 }
 296
 297 /* no borders for "borderless" tables */
 298 table.borderless, table.borderless * {
 299   border-style: none;
 300 }
 301
 302 /* "booktabs" style (no vertical lines) */
 303 table.booktabs {
 304   border: 0;
 305   border-top: 2px solid;
 306   border-bottom: 2px solid;
 307   border-collapse: collapse;
 308 }
 309
 310 table.booktabs * {
 311   border: 0;
 312 }
 313 table.booktabs th {
 314   border-bottom: thin solid;
 315   text-align: left;
 316 }
 317
 318 table > caption {
 319   text-align: left;
 320   margin-bottom: 0.25em
 321 /*   padding: 2em 0 1em 0; */
 322 }
 323
 324 /* numbered tables*/
 325 table.numbered > caption:before {
 326   counter-increment: table; /* defined/re-set in body */
 327   content: "Table " counter(table) ": ";
 328   font-weight: bold;
 329 }
 330
 331
 332 /* literal text
 333    ------------
 334 */
 335 /* whitespace and wrapping in inline literals */
 336 /* possible values: normal, nowrap, pre, pre-wrap, pre-line */
 337 tt.literal {
 338   white-space: pre-wrap;
 339 }
 340
 341 /* /* compensate for initial line-break (which is literal with XHTML 1.1) */ */
 342 /* pre.literal-block, pre.doctest-block {                                    */
 343 /*   margin-top: 0em ;                                                       */
 344 /* }                                                                         */
 345
 346 /* Table of Contents */
 347
 348 /* don't indent like a topic */
 349 div.topic.contents {
 350   margin: 0;
 351 }
 352 /* div.topic.contents ul { */
 353 /*   list-style: none;     */
 354 /*   }                     */
 355
 356 div.topic.contents a {
 357   text-decoration: none; /* no underline for links */
 358 }
 359
 360 /* section numbers */
 361
 362 span.sectnum {
 363   padding-right: 1ex;
 364 }
 365
 366 /* admonitions */
 367
 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 {
 371   padding: 0px 1em }