/* Plumb book — custom theme overrides. * * Sidebar chapter links: ensure a >= 24 px touch target per WCAG 2.5.8 * (Target Size, Minimum). The default mdBook theme produces ~22 px tall * sidebar anchors on common viewports, which trips Plumb's own * `a11y/touch-target` rule (default `min_height_px = 24`) when the docs * site is self-linted. Bumping `min-height` plus padding/line-height * keeps the sidebar above the 24 px floor without disrupting layout. */ .chapter li a, .chapter li.affix a, .chapter li.expanded a, .chapter li.chapter-item a { min-height: 24px; line-height: 1.5; padding-top: 4px; padding-bottom: 4px; display: flex; align-items: center; } /* Maintain visual rhythm for non-link list items (numbered prefixes, dividers). */ .chapter li { line-height: 1.5; } /* ────────────────────────────────────────────────────────────────── * Plumb brand accents (#1a4faa). Scoped per mdBook theme so link and * active-item colors stay legible on both light and dark backgrounds. * A lighter tint (#6b9bff) is used on the dark themes (coal/navy/ayu) * to clear the WCAG AA contrast floor — which Plumb lints for. * ────────────────────────────────────────────────────────────────── */ :root { --plumb-brand: #1a4faa; --plumb-brand-on-dark: #6b9bff; } /* Links in body content. */ .light .content a:not(.header), .rust .content a:not(.header) { color: var(--plumb-brand); } .coal .content a:not(.header), .navy .content a:not(.header), .ayu .content a:not(.header) { color: var(--plumb-brand-on-dark); } /* Active sidebar chapter. */ .light .chapter li.chapter-item a.active, .rust .chapter li.chapter-item a.active { color: var(--plumb-brand); font-weight: 600; } .coal .chapter li.chapter-item a.active, .navy .chapter li.chapter-item a.active, .ayu .chapter li.chapter-item a.active { color: var(--plumb-brand-on-dark); font-weight: 600; } /* Menu-bar title + a brand top rule. */ .menu-title { font-weight: 700; letter-spacing: 0.01em; } .light #menu-bar, .rust #menu-bar { border-bottom: 2px solid var(--plumb-brand); } .coal #menu-bar, .navy #menu-bar, .ayu #menu-bar { border-bottom: 2px solid var(--plumb-brand-on-dark); } /* Inline-code + blockquote get a subtle brand edge on light themes. */ .light blockquote, .rust blockquote { border-inline-start: 4px solid var(--plumb-brand); } /* ────────────────────────────────────────────────────────────────── * Brand hero on the landing page + a mark in the menu bar. * mdBook toggles themes via a class on (.light/.rust = light, * .coal/.navy/.ayu = dark), so the light/dark lockups are swapped by * class rather than prefers-color-scheme. * ────────────────────────────────────────────────────────────────── */ .plumb-hero { margin: 0.5rem 0 2rem; } .plumb-hero img { max-width: min(300px, 70%); height: auto; } .plumb-hero-dark { display: none; } .coal .plumb-hero-light, .navy .plumb-hero-light, .ayu .plumb-hero-light { display: none; } .coal .plumb-hero-dark, .navy .plumb-hero-dark, .ayu .plumb-hero-dark { display: inline; } /* A small brand mark to the left of the book title in the menu bar. */ .menu-title::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.5em; vertical-align: -0.22em; background-image: url(/plumb-icon.svg); background-size: contain; background-repeat: no-repeat; }