/* * Reconciles the fox design system with Material for MkDocs. * * fox.css is a whole design system, not a font bundle: it carries a global * reset, a colour palette, heading scales, a dark mode of its own, and the * @font-face rules for the three self-hosted families. Material is also a whole * design system. Loading both means deciding, once, which one owns what - * otherwise the two fight in ways that depend on stylesheet order. * * The split here: fox owns typography, Material owns colour and layout. * Material's palette toggle keeps working, its spacing is untouched, and every * glyph on the page comes from Atkinson Hyperlegible / Atkinson Hyperlegible * Mono / Sylexiad Serif Medium. fox's own `[data-theme]` dark mode is left * unused; Material's `[data-md-color-scheme]` is the one wired to a button. * * This file is loaded last (see extra_css in mkdocs.yml.tmpl) and everything * below relies on that. */ /* * Material resolves --md-text-font-family from --md-text-font, and because * `theme.font: false` is set it ships no value of its own - these two lines are * the entire typography configuration of the site. */ :root { --md-text-font: var(--font-sans); --md-code-font: var(--font-mono); } /* * The reader-facing font toggle. Set by the inline script in theme/main.html * from ?font= or localStorage, applied to before first paint - so there * is no flash of the wrong family, and so Gotenberg, which loads the page with * ?font=serif, gets a correctly styled document on its first and only render. * * Headings stay serif either way: that is fox.css's own h1-h6 rule, and it is * the design system's decision, not this file's. */ [data-font="serif"] { --md-text-font: var(--font-serif); } /* * fox.css sets `body { font-family: var(--font-sans) }` directly, which would * pin body-level text to sans no matter what the toggle says - Material only * applies --md-text-font-family further down, on .md-typeset. Routing body * through Material's variable puts both under the toggle. */ body { font-family: var(--md-text-font-family); } /* * ...and fox.css also sets `body { background: var(--dusk); color: var(--ink) }`. * Left alone that overrides Material's palette on the element that backs the * whole page, so the light/dark toggle would change everything except the page * itself. Colour is Material's half of the split. */ body { background: var(--md-default-bg-color); color: var(--md-default-fg-color); } .wiki-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; } .wiki-actions .md-button { padding: 0.3em 0.8em; font-size: 0.72rem; } /* * Gotenberg is told preferCssPageSize=true, so this rule - not Gotenberg's own * Letter default - decides the page geometry. The bottom margin is wider than * the top to leave room for the Chromium footer template * (templates/footer.html.tmpl); without the space the footer is simply not * drawn, with no error anywhere. * * Deliberately NOT inside @media print: @page only ever applies to paged * output, and nesting it would make the margin-box resets below stop applying * the moment something renders with screen emulation. */ @page { size: A4; margin: 16mm 15mm 20mm; /* * mkdocs-print-site-plugin ships its own @page rule with * `@bottom-right { content: 'Page ' counter(page) }`, and Chromium * honours it - so without these resets every PDF carries two page * numbers, the plugin's and the one in the Gotenberg footer template. * This file is the last stylesheet the theme loads, which is what lets * the reset win. Keep it that way if extra_css is ever reordered. */ @bottom-center { content: none; } @bottom-right { content: none; } @bottom-left { content: none; } @top-center { content: none; } @top-right { content: none; } @top-left { content: none; } } @media print { /* Screen furniture that means nothing on paper. */ .wiki-actions, .md-header, .md-sidebar, .md-footer, .md-top, .md-search { display: none !important; } .md-main__inner, .md-content { margin: 0 !important; max-width: none !important; } /* Keep a heading with the text it introduces. */ h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; } pre, blockquote, table { break-inside: avoid; page-break-inside: avoid; } }