@charset "UTF-8"; /* ========================================================================== Dark skin ========================================================================== */ /* Colors */ .reading-pref { display: flex; justify-content: flex-end; } .reading-pref__toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.6rem; margin-inline-end: -0.6rem; background: none; border: 1px solid transparent; border-radius: 4px; color: rgb(174.9, 176.4, 179.4); font-family: inherit; font-size: 0.8rem; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .reading-pref__toggle:hover { color: #eaeaea; border-color: rgb(80.6, 84.6, 92.6); } .reading-pref__toggle:focus-visible { outline: 2px solid #00adb5; outline-offset: 2px; } .reading-flush .reading-pref__toggle { color: #eaeaea; background: rgb(52.76, 57.36, 66.56); border-color: rgb(80.6, 84.6, 92.6); } body { counter-reset: figure_counter; } #main { text-align: justify; margin-bottom: 8em; } @media print { #main { font-size: 11pt; line-height: 1.25em; } } #main img.inline-logo, #main span.inline-logo.svg { height: 1em; color: white; } #main span.inline-logo.svg { display: inline-block; } #main span.inline-logo.svg svg { height: 100%; } #main div.footnotes { font-size: 1.563em; } #main div.footnotes::before { content: "References and links"; font-weight: bold; color: #f99; } #main div.footnotes ol li, #main div.footnotes ol li p { font-size: 22px; margin-top: 0.2em; } #main .underline { text-decoration-line: underline; font-weight: normal; } /* Reading preference `#main` above justifies its text across the full 1280px content width — about 113 characters at the $x-large root. That is the intended default: the figures are 512px (1024px for `.wide`) and centred, and a text column capped short of them left the page reading as two different documents stacked on each other. WCAG 2.2 SC 1.4.8 (Visual Presentation, AAA) does not ask for that default to change; it asks for a *mechanism* by which a reader can get a line no wider than 80 characters and text that is not justified. This is that mechanism — one control (partials/reading_pref.mustache) setting one class on , delivering both halves at once, because the two are the same reading problem: justification distributes its slack over the whole measure, so a shorter line is what makes an unjustified line unnecessary and a justified one bearable. The class is set in before the first paint and persists in localStorage, so it is a preference for the reader rather than a per-page gesture. It is scoped to this stylesheet, which is loaded by the pages whose frontmatter says `layout: page` — the same pages that get `#main`'s justification above, since that rule lives here too. A post declaring `layout: post` would load posts.css instead and get neither. ========================================================================== */ .rendered-markdown p:not(.figure), .rendered-markdown li, .rendered-markdown dd, .rendered-markdown blockquote { hyphens: auto; } .reading-flush #main { text-align: start; } .reading-flush .rendered-markdown { max-width: 70ch; margin-inline: auto; } @media print { .reading-flush .rendered-markdown { max-width: none; } } .reading-flush .reading-pref { max-width: 70ch; margin-inline: auto; } /* Reading-preference control ========================================================================== */ .reading-pref { margin: -0.25rem 0 0.75rem; } html:not(.js) .reading-pref { display: none; } @media print { .reading-pref { display: none; } } .reading-pref__icon--justified, .reading-pref__label--justified { display: none; } .reading-flush .reading-pref__icon--flush, .reading-flush .reading-pref__label--flush { display: none; } .reading-flush .reading-pref__icon--justified, .reading-flush .reading-pref__label--justified { display: inline; } @media print { h1 { font-size: 17pt; color: black; } h2 { font-size: 15pt; } h3 { font-size: 13pt; } } div.figure, p.figure { display: block; margin-left: auto; margin-right: auto; counter-increment: figure_counter; } @media screen { div.figure, p.figure { border: 1px solid rgb(80.6, 84.6, 92.6); border-radius: 5px; box-shadow: 3px 3px 2px rgb(80.6, 84.6, 92.6); } } @media print { div.figure, p.figure { page-break-inside: avoid; } } div.figure div.holder_video, p.figure div.holder_video { display: block; margin-left: auto; margin-right: auto; margin-top: 0.5em; margin-bottom: 0.5em; max-width: 512px; width: 100%; } div.figure img, p.figure img { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; } @media screen { div.figure img, p.figure img { max-width: 512px; width: 100%; } } @media print { div.figure img, p.figure img { width: 10cm; } } div.figure div.holder_video + em, div.figure img + em, p.figure div.holder_video + em, p.figure img + em { display: block; margin-left: 1em; margin-right: 1em; } div.figure div.holder_video + em:before, div.figure img + em:before, p.figure div.holder_video + em:before, p.figure img + em:before { content: "Figure " counter(figure_counter) " : "; text-decoration: underline; } p.figure.wide img { max-width: 1024px; } @media print { p.figure.wide img { width: 18cm; } } p.figure.whitebg img { background-color: white; } .page-footer--alternate-location { text-transform: uppercase; font-weight: bold; } .page-footer--alternate-location a img { background-color: white; height: 1em; } .jobad { background-color: rgb(17.7, 46.8, 55.8); margin: 1em; padding-left: 1em; padding-right: 1em; border: solid #3b9cba; border-radius: 1em; } .jobad a a:visited { color: #3b9cba; } .jobad a:hover { color: rgb(225.6, 240.15, 244.65); } .jobad .jobtitle { display: block; height: 120%; font-weight: bold; margin-bottom: 1em; } .jobad p { margin-top: 0.1em; margin-bottom: 0.1em; } .jobad ul { margin: 0em; } .jobad ul li { margin: 0; } .pagination { display: flex; gap: 0.5rem; justify-content: center; margin: 1.5rem 0; } /*# sourceMappingURL=page.css.map */