responsive.css
1 /* CSS3_ style sheet for the output of Docutils HTML5 writer. */ 2 /* Generic responsive design for all screen sizes. */ 3 /* */ 4 /* :Author: Günter Milde */ 5 /* */ 6 /* :Id: $Id: responsive.css 10170 2025-06-16 12:36:11Z milde $ */ 7 /* :Copyright: © 2021 Günter Milde. */ 8 /* :License: Released under the terms of the `2-Clause BSD license`_, */ 9 /* in short: */ 10 /* */ 11 /* Copying and distribution of this file, with or without modification, */ 12 /* are permitted in any medium without royalty provided the copyright */ 13 /* notice and this notice are preserved. */ 14 /* */ 15 /* This file is offered as-is, without any warranty. */ 16 /* */ 17 /* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause */ 18 /* .. _CSS3: https://www.w3.org/Style/CSS/ */ 19 20 /* Note: */ 21 /* This style sheet is provisional: */ 22 /* the API is not settled and may change with any minor Docutils version. */ 23 24 25 26 /* General Settings */ 27 /* ================ */ 28 29 30 * { box-sizing: border-box; } 31 32 body { 33 background-color: #fafaf6; 34 margin: auto; 35 --field-indent: 6.6em; /* indent of fields in field lists */ 36 --sidebar-margin-right: 0; /* adapted in media queries below */ 37 } 38 main { 39 counter-reset: figure table; 40 } 41 body > * { 42 background-color: white; 43 line-height: 1.6; 44 padding: 0.5rem calc(29% - 7.2rem); /* go from 5% to 15% (8.15em/54em) */ 45 margin: auto; 46 max-width: 100rem; 47 } 48 sup, sub { /* avoid additional inter-line space for lines with sup/sub */ 49 line-height: 1; 50 } 51 52 /* Vertical Space (Parskip) */ 53 p, ol, ul, dl, li, 54 .topic, 55 .footnote, .citation, 56 div > math, 57 table { 58 margin-top: 0.5em; 59 margin-bottom: 0.5em; 60 } 61 h1, h2, h3, h4, h5, h6, 62 dl > dd, details > p:last-child { 63 margin-bottom: 0.5em; 64 } 65 66 /* Indented Blocks */ 67 blockquote, figure, .topic { 68 margin: 1em 2%; 69 padding-left: 1em; 70 } 71 div.line-block div.line-block, 72 pre, dd, dl.option-list { 73 margin-left: calc(2% + 1em); 74 } 75 76 /* Object styling */ 77 /* ============== */ 78 79 footer, header { 80 font-size: small; 81 } 82 83 /* Frontmatter */ 84 div.dedication { 85 padding: 0; 86 margin: 1.4em 0; 87 font-style: italic; 88 font-size: large; 89 } 90 .dedication p.topic-title { 91 display: none; 92 } 93 94 blockquote p.attribution { 95 text-align: right; 96 } 97 98 /* Table of Contents */ 99 nav.contents ul { 100 padding-left: 1em; 101 } 102 ul.auto-toc > li > p { /* hanging indent */ 103 padding-left: 1em; 104 text-indent: -1em; 105 } 106 main > nav.contents ul:not(.auto-toc) { 107 list-style-type: square; 108 } 109 main > nav.contents ul ul:not(.auto-toc) { 110 list-style-type: disc; 111 } 112 main > nav.contents ul ul ul:not(.auto-toc) { 113 list-style-type: '\2B29\ '; 114 } 115 main > nav.contents ul ul ul ul:not(.auto-toc) { 116 list-style-type: '\2B1D\ '; 117 } 118 main > nav.contents ul ul ul ul ul:not(.auto-toc) { 119 list-style-type: '\2B2A\ '; 120 } 121 nav.contents ul > li::marker { 122 color: grey; 123 } 124 125 /* Transitions */ 126 hr { 127 margin: 1em 10%; 128 } 129 130 /* Lists */ 131 132 dl.field-list.narrow { 133 --field-indent: 2.4em; 134 } 135 136 ul, ol { 137 padding-left: 1.1em; /* indent by bullet width (Firefox, DejaVu fonts) */ 138 } 139 dl.field-list > dd, 140 dl.docinfo > dd { 141 margin-left: var(--field-indent); /* adapted in media queries or HTML */ 142 } 143 dl.option-list > dd { 144 margin-left: 20%; 145 } 146 /* run-in: start field-body on same line after long field names */ 147 dl.field-list.run-in > dd p { 148 display: block; 149 } 150 /* "description style" like in most dictionaries, encyclopedias etc. */ 151 dl.description { 152 display: flow-root; 153 } 154 dl.description > dt { 155 clear: left; 156 float: left; 157 margin: 0; 158 padding: 0; 159 padding-right: 0.3em; 160 font-weight: bold; 161 } 162 dl.description > dd:after { 163 display: table; 164 content: ""; 165 clear: left; /* clearfix for empty descriptions */ 166 } 167 /* start lists nested in description/field lists on new line */ 168 dd > dl:first-child, 169 dd > ul:first-child, 170 dd > ol:first-child { 171 clear: left; 172 } 173 174 /* disclosures */ 175 details { padding-left: 1em; } 176 summary { margin-left: -1em; } 177 178 /* Footnotes and Citations */ 179 .footnote { 180 font-size: small; 181 } 182 183 /* Images, Figures, and Tables */ 184 figcaption, 185 table > caption { 186 /* font-size: small; */ 187 font-style: italic; 188 } 189 figcaption > .legend { 190 font-size: small; 191 font-style: initial; 192 } 193 figure.numbered > figcaption > p:before { 194 counter-increment: figure; 195 content: "Figure " counter(figure) ": "; 196 font-weight: bold; 197 font-style: initial; 198 } 199 200 table tr { 201 text-align: left; 202 vertical-align: baseline; 203 } 204 table.booktabs { /* "booktabs" style (no vertical lines) */ 205 border-top: 2px solid; 206 border-bottom: 2px solid; 207 } 208 table.booktabs * { 209 border: 0; 210 } 211 table.booktabs th { 212 border-bottom: thin solid; 213 } 214 table.numbered > caption:before { 215 counter-increment: table; 216 content: "Table " counter(table) ": "; 217 font-weight: bold; 218 font-style: initial; 219 } 220 221 /* Admonitions and System Messages */ 222 .admonition, 223 div.system-message { 224 border: thin solid silver; 225 margin: 1em 2%; 226 padding: 0.5em 1em; 227 } 228 .caution p.admonition-title, 229 .attention p.admonition-title, 230 .danger p.admonition-title, 231 .warning p.admonition-title, 232 div.error { 233 color: maroon; 234 } 235 div.system-message > p > span.literal { 236 overflow-wrap: break-word; 237 } 238 239 /* Literal and Code */ 240 pre.literal-block, pre.doctest{ 241 padding: 0.2em; 242 overflow-x: auto; 243 } 244 .literal-block, .doctest, span.literal { 245 background-color: #f0f5f3; 246 } 247 .system-message span.literal { 248 background-color: inherit; 249 } 250 251 /* basic highlighting: for a complete scheme, see */ 252 /* https://docutils.sourceforge.io/sandbox/stylesheets/ */ 253 pre.code .comment, code .comment { color: #5C6576 } 254 pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold } 255 pre.code .literal.string, code .literal.string { color: #0C5404 } 256 pre.code .name.builtin, code .name.builtin { color: #352B84 } 257 pre.code .deleted, code .deleted { background-color: #DEB0A1} 258 pre.code .inserted, code .inserted { background-color: #A3D289} 259 260 /* Hyperlink References */ 261 a { 262 text-decoration: none; /* for chromium */ 263 /* Wrap links at any place, if this is the only way to prevent overflow */ 264 overflow-wrap: break-word; 265 } 266 .contents a, a.toc-backref, a.citation-reference { 267 overflow-wrap: inherit; 268 } 269 /* Undecorated Links (see also minimal.css) */ 270 /* a.citation-reference, */ 271 .citation a.fn-backref { 272 color: inherit; 273 } 274 a:hover { 275 text-decoration: underline; 276 } 277 *:hover > a.toc-backref:after, 278 .topic-title:hover > a:after { 279 content: " \2191"; /* ↑ UPWARDS ARROW */ 280 color: grey; 281 } 282 *:hover > a.self-link:after { 283 content: "\1F517"; /* LINK SYMBOL */ 284 color: grey; 285 font-size: smaller; 286 margin-left: 0.2em; 287 } 288 /* highlight specific targets of the current URL */ 289 section:target > h2, section:target > h3, section:target > h4, 290 section:target > h5, section:target > h6, 291 span:target + h2, span:target + h3, span:target + h4, 292 span:target + h5, span:target + h6, 293 dt:target, span:target, p:target, 294 .contents :target, 295 .contents:target > .topic-title, 296 aside.system-message:target, 297 [role="doc-biblioentry"]:target, 298 [role="doc-biblioref"]:target, 299 [role="note"]:target, /* Docutils 0.18 and 0.19 */ 300 [role="doc-footnote"]:target, /* Docutils >= 0.20 */ 301 [role="doc-noteref"]:target { 302 background-color: #d2e6ec; 303 } 304 305 /* Block Alignment */ 306 /* Let content flow to the side of aligned images and figures */ 307 308 /* no floats around this elements */ 309 footer, header, hr, 310 h1, h2, h3 { 311 clear: both; 312 } 313 314 img.align-left, 315 svg.align-left, 316 video.align-left, 317 figure.align-left, 318 div.align-left, 319 table.align-left { 320 margin-left: 0; 321 padding-left: 0; 322 margin-right: 0.5em; 323 clear: left; 324 float: left; 325 } 326 img.align-right, 327 svg.align-right, 328 video.align-right, 329 figure.align-right, 330 div.align-right, 331 table.align-right { 332 margin-left: 0.5em; 333 margin-right: 0; 334 clear: right; 335 float: right; 336 } 337 338 /* Margin Elements */ 339 /* see below for screen size dependent rules */ 340 .sidebar, 341 .marginal, 342 .admonition.marginal { 343 max-width: 40%; 344 border: none; 345 background-color: #efefea; 346 margin: 0.5em var(--sidebar-margin-right) 0.5em 1em; 347 padding: 0.5em; 348 padding-left: 0.7em; 349 clear: right; 350 float: right; 351 font-size: small; 352 } 353 .sidebar { 354 width: 40%; 355 } 356 357 /* Adaptive page layout */ 358 /* ==================== */ 359 360 @media (max-width: 30em) { 361 /* Smaller margins and no floating elements for small screens */ 362 /* (main text less than 40 characters/line) */ 363 body > * { 364 padding: 0.5rem 5%; 365 line-height: 1.4 366 } 367 .sidebar, 368 .marginal, 369 .admonition.marginal { 370 width: auto; 371 max-width: 100%; 372 float: none; 373 } 374 dl.option-list, 375 pre { 376 margin-left: 0; 377 } 378 body { 379 --field-indent: 4em; 380 } 381 dl.docinfo { 382 --field-indent: 5%; 383 } 384 pre, pre * { 385 font-size: 0.9em; 386 /* overflow: auto; */ 387 } 388 } 389 390 @media (min-width: 54em) { 391 /* Move ToC to the left */ 392 /* Main text width before: 70% ≙ 35em ≙ 75…95 chrs (Dejavu/Times) */ 393 /* after: ≳ 30em ≙ 54…70 chrs (Dejavu/Times) */ 394 body.with-toc { 395 padding-left: 8%; 396 } 397 body.with-toc > * { 398 margin-left: 0; 399 padding-left: 22rem; /* fallback for webkit */ 400 padding-left: min(22%, 22rem); 401 padding-right: 7%; 402 } 403 main > nav.contents { /* global ToC */ 404 position: fixed; 405 top: 0; 406 left: 0; 407 width: min(25%, 25em); 408 height: 100vh; 409 margin: 0; 410 background-color: #fafaf6; 411 padding: 1em 2% 0 2%; 412 overflow: auto; 413 } 414 main > nav.contents > * { 415 padding-left: 0; 416 line-height: 1.4; 417 } 418 main > nav.contents a { 419 color: inherit; 420 } 421 } 422 423 @media (min-width: 70em) { 424 body { 425 --field-indent: 9em; 426 } 427 } 428 429 @media (min-width: 77em) { 430 /* Move marginalia to 6rem from right border */ 431 /* .sidebar, */ 432 /* .marginal, */ 433 /* .admonition.marginal { */ 434 /* margin-right: calc(6rem - 15%); */ 435 /* } */ 436 /* BUG: margin is calculated for break point width */ 437 /* workaround: variable + many breakpoints */ 438 body > * { 439 padding-left: 18%; 440 padding-right: 28%; /* fallback for webkit */ 441 padding-right: min(28%, 28rem); 442 --sidebar-margin-right: -20rem; 443 } 444 /* limit main text to ~ 50em ≙ 85…100 characters DejaVu rsp. …120 Times */ 445 body.with-toc > * { 446 padding-left: min(22%, 22rem); 447 padding-right: calc(78% - 50rem); /* fallback for webkit */ 448 padding-right: min(78% - 50rem, 28rem); 449 --sidebar-margin-right: 0; 450 } 451 } 452 453 @media (min-width: 85em) { 454 body.with-toc > * { 455 --sidebar-margin-right: -9rem; 456 } 457 } 458 459 @media (min-width: 90em) { 460 /* move marginalia into the margin */ 461 body > * { 462 padding-left: min(22%, 22rem); 463 --sidebar-margin-right: -23rem; 464 } 465 body.with-toc > * { 466 --sidebar-margin-right: -14rem; 467 } 468 } 469 470 @media (min-width: 99em) { 471 /* move marginalia out of main text area */ 472 body.with-toc > * { 473 --sidebar-margin-right: -20rem; 474 } 475 body > *, body.with-toc > * { /* for webkit */ 476 padding-left: 22rem; 477 padding-right: 28rem; 478 } 479 .admonition.marginal, 480 .marginal { 481 width: 40%; /* make marginal figures, ... "full width" */ 482 } 483 } 484 485 @media (min-width: 104em) { 486 body.with-toc > * { 487 --sidebar-margin-right: -23rem; 488 } 489 }