/* ============================================================================ MNW global stylesheet. Charter: docs/design-system.md. THIS FILE IS ONE PART OF THE SHEET, AND HOLDS NO RULES. The sheet is written as `css/*.css` and joined by build.rs into `static/style.css`. Edit a part, never the output. What each part holds, and why contiguity is the guarantee: css/README.md. Build new features by COMPOSING these primitives, in this order of preference: 1. Use a UTILITY class for one-off adjustments (.mb-section, .text-sm, .nowrap) 2. Use a LAYOUT PRIMITIVE to position content (.container, .stack-row, .field-row, .list-row) 3. Use a COMPONENT PRIMITIVE for a UI element (.card, .callout, .badge, .progress-bar, .empty-state, .input--sm, .small) 4. Extend a primitive with a modifier (.card--bordered, .callout--warning, .stack-row--bordered) 5. ONLY THEN consider a new class, and add it to the right section below A new class is a smell, not a goal. Before writing one: - grep this file for the visual shape you want; almost everything is here - if you can't find it, consider whether the shape belongs in the design system (then add it to the appropriate section here AND to docs/design-system.md) - page-scoped rules (`.foo-page .bar`) are a last resort, not a first move -------------------------------------------------------------------------- FILE STRUCTURE (search by section name for anchor) FOUNDATIONS (05-core.css) :root tokens (color, type, space, radius, shadow) Element base (h1/h2/h3, p, a, button, input, table) UTILITIES Spacing (.m-0, .mt-*, .mb-*, .ml-*, .my-*) Sizing (.col-*, .w-*, .maxw-*, .minw-*) Text (.text-sm, .text-xs, .text-center, .text-right, .fw-bold, .nowrap, .muted, .dimmed, .dimmer, .is-faded, .danger-text) State (.hidden, .is-selected, .is-active, .unstyled-link) Shapes (.square-cover, .scroll-x) LAYOUT PRIMITIVES (page-scaffolding shapes) .container (width set by body class) .stack-row + --bordered / --tight / --top (toolbar / header bar) .field-row + .form-group.is-grow (inline form row) .list-row + .list-row-title (vertical item list) .form-row (2-col grid form) .cover-row + .cover-thumb + .cover-empty (image picker) COMPONENT PRIMITIVES (reusable UI blocks) .content-section (light-bg page section box) .card / .card-muted / .card--bordered / .card--selectable .form-group / .form-section / details.form-section .section-header / .section-lead / .section-group-label .badge + data-tone (success/warning/danger) .callout + --danger / --warning / --solid-warning .banner + --info / --warning (full-bleed page-top notice) .alert + -note / -tip / -warning / -caution (left-border inline notice) .modal + .modal-overlay .empty-state + --compact / --chart / --lg .progress-bar-container + .progress-bar (--slim, --rounded, --highlight) .upload-status + -row + -msg.is-success / .is-error .field-status / .save-status + .success / .error / .saving .toast + .toast--success / --error / --warning .breadcrumb / .pagination .tabs + .tab.chosen (chosen is makeover's) CONTROL MODIFIERS (compose onto buttons/inputs) .small / .btn-compact / .btn-link / .btn-tiny (button sizes) .btn-danger / .saved (button intents) .input--xs / --sm / --mono / --upper / --numeric (input sizes/shapes) FEATURE SUBAPPS (their own CSS scope) .git-* (git source browser at /source/*) Pricing calculator on /pricing Markdown preview / docs-ui in /docs/* PAGE-SCOPED LAYOUTS (when truly page-specific) .item-page / .project-page / .article-page / .purchase-page / .cart-* / .library-page / .feed-page / .discover-page / .landing / .creators-page / .health-page / .import-page / .delete-account-page / .export-page / .receipt-page / .fan-plus-page / .stripe-disclaimer-page / .buy-page / .user-page / .collection-page / .changelog-page / .policy-page / .tag-tree-page / .project-blog-page / .project-paywall-page / .confirm-delete-page / .admin-page / .dashboard-page DASHBOARD TABS (one section per tab partial) Per-tab classes scoped under their canonical body class. Use modifier composition where possible; only add tab-specific rules when the shape genuinely diverges from a primitive. RESPONSIVE (@media at end of file) 768px tablet 480px phone -------------------------------------------------------------------------- When in doubt: read docs/design-system.md first. Update both files together when you add a primitive. ============================================================================ */ /* No `@font-face` here at all any more, and no font token either. All three faces are fetched by the generated `typography.css`: Quasi Mono and Quasi Body from makeover's house layer, and Young Serif from MNW's own override, declared in build.rs. What left first: four blocks for IBM Plex Mono and Lato, regular and bold, 101 KB of woff2 covering two weights, replaced by 81 KB carrying the whole 200-800 axis. What left second: the Young Serif block that used to sit here, and the `--font-display` beside it. Young Serif is still the brand tier and still MNW's alone. That has not changed and is not what moved. What changed is that the exemption is a mechanism now rather than a gap in the vocabulary: the face is declared once, as an override of the `display` slot, and reads as one. */ /* Everything below is in the `components` cascade layer. _head_assets.html declares the order once, `@layer makeover, base, components, responsive`, and until now three of those four names were empty: this file adopted none of them, so 11,788 unlayered lines outranked every named layer by construction and the generated sheets lost every contest they entered. Adopting `components` changes no rendering today. `components` already sits after `makeover` in the declared order, so this file wins the same contests it was winning before; what changes is that it wins them by a stated rule rather than by being unlayered. wizard.css and media-player.css adopt the same layer, and they still beat this file on a tie because a layer resolves internally by source order and they load later. One thing stays OUT of the layer, deliberately: the theme block theming.rs injects into is unlayered, which is load-bearing. An unlayered rule outranks every layer, so a creator's chosen theme keeps overriding this sheet's :root without needing to know the order. (The @font-face rules this used to name as the second exception left for typography.css.) */