/* ========================================================================== Kedgeree, a modern theme for Haddock. Main documentation pages. Source pages are themed by kedgeree-source.css. Palette and bundled fonts live in kedgeree-tokens.css, loaded before this file. Here we only consume the --kg-* custom properties. ========================================================================== */ /* ========================================================================== Base ========================================================================== */ /* Reset, plus the structural rules Haddock's bundle relies on. */ * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } /* Haddock's bundle uses these to toggle instances/synopsis. The bundle adds body.js-enabled only after load, so we also key off data-js, which boot stamps on before first paint. Otherwise these labels paint then vanish in a reflow (most visible as the contents page's module tree settling). */ body.js-enabled .hide-when-js-enabled, html[data-js] .hide-when-js-enabled { display: none; } .hide { display: none; } .show { display: inherit; } .hidden { display: none !important; } /* MathJax's corner "Processing math" load indicator. Math still typesets. */ #MathJax_Message { display: none !important; } /* Collapse/expand chevrons. Haddock's bundle JS toggles .collapser (open) / .expander (closed) on the toggle controls. Drawn as an SVG chevron via mask-image (background-color is the ink) so every toggle matches. The bundled subset fonts have no triangle glyph. A matching .noexpander spacer keeps module names aligned in the module tree. */ .collapser, .expander, .details-toggle-control { cursor: pointer; } .expander::before, .collapser::before { content: ""; display: inline-block; width: 0.7em; height: 1em; margin-right: 0.28em; vertical-align: -0.18em; background-color: var(--kg-fg-faint); -webkit-mask: var(--kg-chevron) left center / auto 0.66em no-repeat; mask: var(--kg-chevron) left center / auto 0.66em no-repeat; } .collapser::before { -webkit-mask-image: var(--kg-chevron-open); mask-image: var(--kg-chevron-open); -webkit-mask-size: 0.66em auto; mask-size: 0.66em auto; } .noexpander::before { content: ""; display: inline-block; width: 0.98em; } /* In the JS path (boot stamps data-js before first paint) reserve the chevron's box on the bare toggle control, so a row does not shift sideways when the bundle later adds .collapser / .expander and the chevron grows in. Dimensions only, so .collapser / .expander still own the chevron itself. */ html[data-js] .details-toggle-control::before { content: ""; display: inline-block; width: 0.7em; height: 1em; margin-right: 0.28em; vertical-align: -0.18em; } /* The module tree is always open once JS runs, so draw its open chevron up front. The contents page is then static from first paint, no chevron popping in per row. Same mask as .collapser::before, so it matches exactly. */ html[data-js] #module-list .details-toggle-control::before { background-color: var(--kg-fg-faint); -webkit-mask: var(--kg-chevron-open) left center / 0.66em auto no-repeat; mask: var(--kg-chevron-open) left center / 0.66em auto no-repeat; } /* Uniform hover for every toggle (module tree, instances, instance/Examples section headers, synopsis). Accent the chevron, brighten heading-style toggles. */ body.js-enabled .details-toggle-control:hover::before, body.js-enabled #synopsis summary:hover::before { background-color: var(--kg-accent); } /* The module-tree chevron is painted by an id-specific rule above, so its hover accent must match that specificity to win. */ body.js-enabled #module-list .details-toggle-control:hover::before { background-color: var(--kg-accent); } body.js-enabled :is(h2, h3, h4, h5, h6).details-toggle-control { transition: color 0.12s ease; } body.js-enabled :is(h2, h3, h4, h5, h6).details-toggle-control:hover { color: var(--kg-fg); } /* Make native controls (checkboxes, scrollbars, form fields) match the theme. */ :root { color-scheme: light; /* One chevron icon for every toggle (mask-image, so background-color is the ink and it recolours on hover). */ --kg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2 6.2 7 1.6 12'/%3E%3C/svg%3E"); --kg-chevron-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.6 7 6.2 12 1.6'/%3E%3C/svg%3E"); /* Code glyph for the Source link (mask-image, inked by currentColor). */ --kg-icon-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6L2 12L8 18'/%3E%3Cpath d='M16 6L22 12L16 18'/%3E%3C/svg%3E"); } html[data-resolved="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-resolved="light"]) { color-scheme: dark; } } html { background: var(--kg-bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--kg-bg); color: var(--kg-fg); font-family: var(--kg-font); font-size: 16px; line-height: 1.62; letter-spacing: 0.001em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Three-row grid: header / (sidebar · main) / full-width footer. */ display: grid; grid-template-columns: var(--kg-sidebar-w) minmax(0, 1fr); grid-template-rows: var(--kg-header-h) 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; min-height: 100vh; } /* No sidebar yet, or only a minimal mobile drawer (contents / index pages): collapse the desktop column. */ body:not(.kg-has-sidebar), body.kg-sidebar-min { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; } body.kg-sidebar-min #kg-sidebar { display: none; } /* :link/:visited overrides Haddock's link color. */ a, a[href]:link { color: var(--kg-link); text-decoration: none; } a[href]:visited { color: var(--kg-link-visited); } a:hover, a[href]:hover { text-decoration: underline; } code, pre, .src, tt, .hs-identifier, .keyword { font-family: var(--kg-mono); } /* Signatures keep operators literal (no -> ligature). Prose code blocks keep the font's ligatures, matching the hyperlinked source pages. */ .src, .hs-identifier, .keyword { font-variant-ligatures: none; } /* Images and other media never overflow their column on a narrow screen. */ img, svg, video, iframe { max-width: 100%; height: auto; } /* A lone over-long token (a 50-char identifier in prose, a bare URL) must wrap rather than push the page wider than the viewport. Code blocks and the scrolling sub-block signatures keep their own horizontal scroll, so they opt out. (.kg-sig breaks instead, see its rule.) */ body { overflow-wrap: anywhere; } .src, pre { overflow-wrap: normal; } ::selection { background: var(--kg-accent-soft); } /* ========================================================================== Header bar (Haddock's #package-header) ========================================================================== */ #package-header { grid-area: header; width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; height: var(--kg-header-h); padding: 0 1rem; background: color-mix(in srgb, var(--kg-bg-raised) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--kg-border); font-size: 0.9rem; } /* The brand (package name) is the nav title. Haddock's package caption ("pkgid: synopsis") duplicates it and its markup varies by version, so hide it rather than render or parse it. */ #package-header .caption { display: none; } #package-header ul.links, #package-header #page-menu { display: flex; align-items: center; gap: 0.25rem; /* .kg-actions (margin-left:auto) does the right-alignment. The page menu sits after it with a small gap. Two auto margins would split the free space and float the search to the centre until the script ran. */ margin: 0 0 0 0.5rem; padding: 0; list-style: none; } #package-header #page-menu li { margin: 0; color: var(--kg-fg-faint); } /* Space the separators off the hover pills. */ #package-header #page-menu li + li::before { margin: 0 0.9rem; color: var(--kg-fg-faint); } /* :link/:visited overrides Haddock's link color. */ #package-header #page-menu a, #package-header #page-menu a:link, #package-header #page-menu a:visited { display: inline-flex; align-items: center; padding: 0.3rem 0.5rem; margin: 0 -0.1rem; border-radius: var(--kg-radius-s); color: var(--kg-fg-muted); } #package-header #page-menu a:hover { background: var(--kg-accent-soft); color: var(--kg-fg); text-decoration: none; } /* Quick-jump may render its trigger as a