/* ============================================================================= Whittl Docs — brand palette + typography overrides for Material theme. ============================================================================= */ /* Brand palette — matches lyndeneftoda.com + Whittl's v2.3 brand pass. Navy for dark chrome, cream for light surfaces, tan for primary accent, copper for hover/active. */ :root { --whittl-navy: #2A3744; --whittl-navy-deep: #1A2028; --whittl-cream: #F0E6D2; --whittl-cream-soft: #FAF4E5; --whittl-tan: #C9A876; --whittl-tan-hover: #D4B88A; --whittl-copper: #B97A4F; --whittl-copper-dark:#9D6340; } /* ----------------------------------------------------------------------------- DARK MODE — slate scheme (default) Mirrors Whittl's dark theme: neutral navy base, warm tan accent. */ [data-md-color-scheme="slate"] { --md-primary-fg-color: var(--whittl-navy-deep); --md-primary-fg-color--light: var(--whittl-navy); --md-primary-fg-color--dark: #12181F; --md-primary-bg-color: var(--whittl-cream); --md-primary-bg-color--light: var(--whittl-cream-soft); --md-accent-fg-color: var(--whittl-tan); --md-accent-fg-color--transparent: rgba(201, 168, 118, 0.1); --md-accent-bg-color: var(--whittl-navy-deep); --md-accent-bg-color--light: var(--whittl-navy); --md-default-bg-color: #1F2A35; --md-default-fg-color: var(--whittl-cream); --md-default-fg-color--light: #D4C9B0; --md-default-fg-color--lighter: #A89F8A; --md-code-bg-color: #141B23; --md-code-fg-color: var(--whittl-cream); --md-typeset-a-color: var(--whittl-tan); } /* ----------------------------------------------------------------------------- LIGHT MODE — default scheme Whittl's light theme: four-tone cream palette, copper primary accent. */ [data-md-color-scheme="default"] { --md-primary-fg-color: var(--whittl-navy); --md-primary-fg-color--light: var(--whittl-navy-deep); --md-primary-fg-color--dark: #12181F; --md-primary-bg-color: var(--whittl-cream); --md-primary-bg-color--light: var(--whittl-cream-soft); --md-accent-fg-color: var(--whittl-copper); --md-accent-fg-color--transparent: rgba(185, 122, 79, 0.1); --md-accent-bg-color: var(--whittl-cream-soft); --md-default-bg-color: #FFFCF3; --md-default-fg-color: #2A3744; --md-default-fg-color--light: #3A4756; --md-default-fg-color--lighter: #6A7282; --md-code-bg-color: #E8DCC0; --md-code-fg-color: #2A3744; --md-typeset-a-color: var(--whittl-copper); } /* ----------------------------------------------------------------------------- TYPOGRAPHY — VT323 for body / Press Start 2P for headings (accent only). We're NOT using Press Start 2P for all headings like the main site because docs have many small subheadings and Press Start 2P at small sizes is unreadable. Reserved for h1 + h2 only. */ /* VT323 is already loaded by Material via the theme font config. Press Start 2P needs an explicit import. */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* VT323 renders small by nature, so we bump the body up from Material's default 0.8rem, but not as aggressively as v1 had it. Previous 1.05rem read as oversized for prose; 0.9rem keeps pixel-font legibility without feeling like a children's book. */ .md-typeset { font-size: 0.9rem; line-height: 1.55; } /* Press Start 2P is heavy and doesn't scale gracefully — the font's pixel grid needs multiple browser pixels per "design pixel" to render, so it looks huge even at modest CSS sizes. Reserve it ONLY for the page H1. Everything else uses VT323 bold for a similar retro feel without the size blowout. */ .md-typeset h1 { font-family: "Press Start 2P", "VT323", monospace !important; font-size: 1.35rem; letter-spacing: 0.04em; line-height: 1.5; margin-top: 1rem; margin-bottom: 1.5rem; } .md-typeset h2 { font-family: "VT323", monospace; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; margin-top: 2rem; margin-bottom: 0.75rem; } .md-typeset h3 { font-family: "VT323", monospace; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; } .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-family: "VT323", monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; } /* Sidebar nav uses VT323. Slightly smaller than body to preserve density. */ .md-nav__item .md-nav__link { font-family: "VT323", monospace; font-size: 0.85rem; } /* Site title in the top header — retro pixel font at a modest size so it doesn't overwhelm the header bar. Press Start 2P caps at something readable; anything larger competes with the content H1 for attention. */ .md-header__title { font-family: "Press Start 2P", monospace !important; font-size: 0.65rem; letter-spacing: 0.06em; } /* Page title in the header (the per-page one that appears top left when you scroll) — same treatment */ .md-header__topic { font-family: "Press Start 2P", monospace !important; font-size: 0.65rem; letter-spacing: 0.06em; } /* Top-tab navigation (the Getting Started / Features / Backends row) uses VT323 at compact size to match the rest */ .md-tabs__link { font-family: "VT323", monospace; font-size: 0.95rem; letter-spacing: 0.02em; } /* ----------------------------------------------------------------------------- CODE BLOCKS — retro monospace, brand-toned backgrounds */ .md-typeset code, .md-typeset pre { font-family: "VT323", "Cascadia Code", "Consolas", monospace; font-size: 0.95rem; } [data-md-color-scheme="slate"] .md-typeset pre > code { border: 1px solid #2B3642; } [data-md-color-scheme="default"] .md-typeset pre > code { border: 1px solid #D4C9B0; } /* ----------------------------------------------------------------------------- ADMONITIONS — notes, tips, warnings styled with brand accents */ /* Tip/info uses tan accent */ .md-typeset .admonition.note, .md-typeset details.note { border-color: var(--whittl-tan); } .md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--whittl-copper); } /* Warning uses a desaturated rust rather than web-red */ .md-typeset .admonition.warning, .md-typeset details.warning { border-color: #C77E6E; } .md-typeset .admonition.example, .md-typeset details.example { border-color: var(--whittl-tan); } /* ----------------------------------------------------------------------------- LINKS — always use brand accent */ .md-typeset a { color: var(--md-typeset-a-color); text-decoration: none; border-bottom: 1px dotted currentColor; transition: color 0.15s, border-bottom-style 0.15s; } .md-typeset a:hover { border-bottom-style: solid; } /* ----------------------------------------------------------------------------- SQUARE CORNERS EVERYWHERE — match the pixel-retro aesthetic of the main site (lyndeneftoda.com). Material defaults round everything; override. */ .md-typeset .admonition, .md-typeset details, .md-typeset .admonition-title, .md-typeset summary, .md-typeset pre, .md-typeset pre > code, .md-typeset code, .md-typeset .md-button, .md-typeset table, .md-typeset table th, .md-typeset table td, .md-typeset blockquote, .md-typeset .highlight, .md-typeset .highlight pre, .md-typeset .tabbed-set, .md-typeset .tabbed-block, .md-typeset .tabbed-labels > label, .md-typeset kbd, .md-search__form, .md-search__input, .md-search-result, .md-dialog, .md-tooltip, .md-select__inner, .md-nav__title, .md-clipboard, .md-annotation__inner, .md-annotation__index, .md-footer-meta, .md-content__button { border-radius: 0 !important; } /* ----------------------------------------------------------------------------- PIXEL DIVIDER — the dashed-line style from the main site between sections */ .md-typeset hr { border: none; border-top: 2px dashed var(--md-default-fg-color--lighter); margin: 2.5rem 0; opacity: 0.5; } /* ----------------------------------------------------------------------------- SIDEBAR SECTION ICONS — tinted-box icons per section, matching the admonition style (icon inside a small tinted rounded rectangle). Each icon is an inline SVG data URI mask on a `::before` pseudo-element. The mask lets us tint the icon via the element's `background-color`, and a wrapper div (the pseudo itself) provides the tinted box around it. Section order in mkdocs.yml (1-indexed, :nth-child): 1 = Home (just a link — leave alone) 2 = Getting Started 3 = Features 4 = Backends 5 = Workflows 6 = Reference 7 = Troubleshooting */ /* Hide the default folder/arrow icon on top-level sections so our custom icon isn't doubled up. The inner nested-item icons stay. */ .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link .md-nav__icon, .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link .md-nav__icon { display: none !important; } /* Shared base for all section-icon pseudo-elements. Small rounded box with an SVG mask painted in the section's accent color. */ .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link::before, .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link::before, .md-tabs__list > .md-tabs__item:not(:nth-child(1)) > .md-tabs__link::before { content: ""; display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.55em; vertical-align: -0.3em; border-radius: 0 !important; border: none; background-color: var(--whittl-copper, #C77E6E); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 80%; mask-repeat: no-repeat; mask-position: center; mask-size: 80%; } /* Getting Started — play triangle (clean, unambiguous "start here"). Tabs :nth-child(2) because Home occupies tab slot 1. Nav :nth-child(2) because Home also occupies nav slot 1. */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(2) > .md-tabs__link::before { background-color: var(--whittl-copper, #C77E6E); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Features — star-four-points (sparkle / highlight) */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(3) > .md-tabs__link::before { background-color: var(--whittl-tan, #D4C9B0); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Backends — server stack */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(4) > .md-tabs__link::before { background-color: var(--whittl-copper, #C77E6E); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Workflows — source-branch (flow / iteration) */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(5) > .md-tabs__link::before { background-color: var(--whittl-tan, #D4C9B0); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Reference — book-open (reference / read) */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(6) > .md-tabs__link::before { background-color: var(--whittl-copper, #C77E6E); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Troubleshooting — wrench (fix / tools) */ .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(7) > .md-nav__link::before, .md-tabs__list > .md-tabs__item:nth-child(7) > .md-tabs__link::before { background-color: #C77E6E; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }