/* ========================================================================== projects.wopr.ltd ยท MkDocs Material 9.6.4 onto the WOPR design language 5.0.0 -------------------------------------------------------------------------- Loaded AFTER stylesheets/wopr.css (the byte-identical vendored copy). This file declares no colour, no font and no size of its own: it maps Material's variables onto the guide's tokens, and keeps the site's long-form rhythm. Every page on this site is a reading page (STYLE.md, Page types). Sections 1. Token map (Material --md-* onto the guide; all six combinations) 2. Reading column (one column at the measure; no sidebars) 3. Flat header (the wordmark as root link; no coloured bar) 4. Long-form type (4,000 to 8,000 word build logs) 5. Inline code (commit hashes must be quiet) 6. Tables 7. Admonitions (status edges in status colours) ========================================================================== */ /* 1. Token map --------------------------------------------------------------- Declared on [data-md-color-scheme] so it outranks Material's own scheme blocks, which sit on the same element. The tokens themselves resolve from data-theme and data-palette on , set by the anti-flash script. */ :root, [data-md-color-scheme] { --md-default-bg-color: var(--surface-0); --md-default-fg-color: var(--text-1); --md-default-fg-color--light: var(--text-2); --md-default-fg-color--lighter: var(--text-3); --md-default-fg-color--lightest: var(--border); --md-primary-fg-color: var(--surface-1); --md-primary-bg-color: var(--text-1); --md-primary-bg-color--light: var(--text-2); --md-accent-fg-color: var(--accent); --md-accent-fg-color--transparent: var(--accent-hover-fill); --md-typeset-color: var(--text-2); --md-typeset-a-color: var(--accent); --md-typeset-mark-color: var(--accent-select); --md-code-bg-color: var(--surface-2); --md-code-fg-color: var(--text-1); --md-typeset-table-color: var(--border); --md-typeset-table-color--light: var(--surface-1); --md-footer-bg-color: var(--surface-1); --md-footer-bg-color--dark: var(--surface-1); --md-footer-fg-color: var(--text-1); --md-footer-fg-color--light: var(--text-2); --md-footer-fg-color--lighter: var(--text-3); --md-admonition-bg-color: var(--surface-1); --md-admonition-fg-color: var(--text-2); --md-text-font: var(--font-prose); --md-code-font: var(--font-mono); } /* 2. Reading column --------------------------------------------------------- One column at the measure. The navigation sidebar is hidden (the bar carries the routes). The TOC sidebar shows at Material's desktop breakpoint, set at --step-ui (14px) rather than Material's .7rem, which sat on the 11px floor beside 14.8px body (Po, 2026-09-29, review R7). Until then this comment said "no sidebars" while the TOC showed anyway. */ .md-sidebar--primary { display: none; } .md-sidebar--secondary .md-nav { font-size: var(--step-ui); line-height: 1.45; } .md-sidebar--secondary .md-nav__link { margin-top: var(--sp-2); } .md-content { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; } .md-content__inner { margin: 0; padding: var(--sp-6) var(--gutter) var(--sp-8); } /* 3. Flat header -------------------------------------------------------------- */ .md-header { background: var(--surface-1); color: var(--text-1); border-bottom: 1px solid var(--border); } .md-header--shadow { box-shadow: none; } .md-header__button.md-logo { padding: var(--sp-3) 0; border-bottom: 0; } /* Material's rem is 20px; the wordmark stays at the guide's 14px. */ .md-logo .nav__mark { font-size: var(--step-ui); padding: 0; } .md-header__title { font-weight: 600; } .md-search__form { background-color: var(--surface-2); } .md-search__input { color: var(--text-1); } .md-search__input::placeholder, .md-search__input + .md-search__icon { color: var(--text-3); } .md-tabs { background-color: var(--surface-0); color: var(--text-1); } .themectl.md-header__option { padding: 0 var(--sp-3); } /* 4. Long-form type ------------------------------------------------------------ The guide's step tokens, used as they are: html is 100% here (end of file), so rem is the estate's 16px. Until 5.1.0 Material's 125% stood and these values carried a x0.8 correction; the bar had none, which is why it read a quarter larger than on the other surfaces. */ .md-typeset { font-size: var(--step-0); line-height: var(--leading-prose); } .md-typeset p, .md-typeset ul, .md-typeset ol, .md-typeset blockquote, .md-typeset details { max-width: var(--measure); } .md-typeset h1 { font-size: var(--step-3); font-weight: 700; color: var(--text-1); letter-spacing: -.02em; } .md-typeset h2 { font-size: var(--step-2); font-weight: 700; color: var(--accent); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); text-transform: none; letter-spacing: 0; } .md-typeset h2.entry__title { font-size: var(--step-1); color: var(--text-1); margin: 0 0 var(--sp-2); padding: 0; border: 0; } .md-typeset h3 { font-size: var(--step-1); font-weight: 700; color: var(--text-1); } .md-typeset h2 code, .md-typeset h3 code { background: none; padding: 0; color: var(--text-3); font-weight: 400; } .md-typeset a { border-bottom: 1px solid var(--accent-underline); text-decoration: none; } .md-typeset a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); } .md-typeset blockquote { border-left: 2px solid var(--border-light); color: var(--text-2); } .md-typeset hr { border-bottom: 1px solid var(--border); } .md-typeset .headerlink { color: var(--text-3); } .md-nav__title, .md-nav__item--section > .md-nav__link { text-transform: none; } /* 5. Inline code ---------------------------------------------------------------- */ .md-typeset code { border-radius: var(--radius-sm); color: var(--text-1); } .md-typeset a code { color: var(--accent); } .md-typeset .highlight { border: 1px solid var(--border); border-radius: var(--radius-sm); } .md-clipboard { color: var(--text-3); } .md-clipboard:hover { color: var(--accent); } /* 6. Tables ----------------------------------------------------------------------- */ .md-typeset table:not([class]) { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; font-size: var(--step-0); } .md-typeset table:not([class]) th { background: var(--surface-2); color: var(--text-3); font-family: var(--font-mono); font-weight: 400; font-size: var(--step-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; } .md-typeset table:not([class]) td { border-top: 1px solid var(--border); } .md-typeset table:not([class]) tr:hover { background: transparent; box-shadow: none; } .md-typeset table:not([class]) td:first-child { color: var(--text-3); } /* 7. Admonitions ------------------------------------------------------------------- Status is status: a warning edge is --status-warn, a failure is --status-bad. The accent is for what can be clicked. */ .md-typeset .admonition, .md-typeset details { border: 1px solid var(--border); border-left: 2px solid var(--status-none); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: none; background: var(--surface-1); font-size: var(--step-0); } .md-typeset .admonition-title, .md-typeset summary { background: transparent; color: var(--text-1); } .md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--text-3) !important; } .md-typeset .admonition.warning { border-left-color: var(--status-warn); } .md-typeset .admonition.danger, .md-typeset .admonition.failure { border-left-color: var(--status-bad); } .md-typeset .admonition.success { border-left-color: var(--status-ok); } /* One base size across the estate (Po, 2026-09-29T17:30:30+01:00). Material sets html to 125%, and 137.5% on wide screens, so every rem token here read a quarter or more larger than on the other surfaces (bar name 23px against 18.4px). The estate base is the browser's 16px. This sheet loads after Material's, so the plain rule outranks its media-query rules at every width. */ html { font-size: 100%; } /* 8. Home cards (Po, 2026-09-29, review R8) ---------------------------------- Two across from 900px, inside Material's own grid (976px); prose stays at the measure. .card, .status and .tags are the guide's. No hover state: the title is the link. */ .md-content:has(.logs-home) { max-width: none; } .md-typeset ul.cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); list-style: none; margin: var(--sp-6) 0 var(--sp-8); padding: 0; max-width: none; } @media (min-width: 900px) { .md-typeset ul.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md-typeset ul.cards > li.card { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .md-typeset .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .md-typeset .card h2.entry__title { margin: 0; } .md-typeset .card p { margin: 0; } .md-typeset .card .tags { margin: auto 0 0; padding: 0; } .md-typeset .card .tag { margin: 0; }