|
1 | | -/* Sidebar hierarchy + density for MkDocs Material 9.7.x. |
2 | | - All rules scoped to the desktop sidebar breakpoint (>= 76.25em), matching |
3 | | - Material's own scoping for navigation.sections, so the mobile drill-down |
4 | | - drawer keeps stock styling. Colors use Material tokens, so the light and |
5 | | - slate schemes both work without extra palette handling. */ |
| 1 | +/* Sidebar hierarchy + density for Zensical's UI (Material-compatible md-* |
| 2 | + DOM, but different stock spacing: nav links are 8px-radius pills with |
| 3 | + 7px 16px padding). All rules scoped to the desktop sidebar breakpoint |
| 4 | + (>= 76.25em) so the mobile drill-down drawer keeps stock styling. Colors |
| 5 | + use the md-* tokens, so the light and slate schemes both work without |
| 6 | + extra palette handling. */ |
6 | 7 |
|
7 | 8 | @media screen and (min-width: 76.25em) { |
8 | | - /* Section labels: smaller, uppercase, letter-spaced, muted. Covers both the |
9 | | - clickable index-page headers and the bare API Reference label. */ |
| 9 | + /* The sidebar is one coordinate system derived from the pill inset: |
| 10 | + every row — page links, group rows, section labels — is a direct |
| 11 | + .md-nav__link child of its item with the same 10px horizontal padding, |
| 12 | + so all text shares one column, and hover/active pills always paint |
| 13 | + 10px of breathing room inside the scroll container (never clipped). |
| 14 | + The padding lives on the elements Zensical paints hover/active pills |
| 15 | + on (.md-nav__link[href] anchors and [for] labels — leaf links, bare |
| 16 | + section labels, and the inner anchor of an .md-nav__container |
| 17 | + wrapper); wrappers stay geometry-neutral, as stock. The 10px inset |
| 18 | + also stays >= the 0.4rem pill radius, so the corner curve never |
| 19 | + crowds the text. Vertical rhythm has a single knob: the nav list's |
| 20 | + flex gap (stock 0.2rem reads airy; 2px matches the density the site |
| 21 | + shipped with on Material, ~30px row pitch). */ |
| 22 | + .md-sidebar--primary .md-nav__list { |
| 23 | + gap: 2px; |
| 24 | + } |
| 25 | + .md-sidebar--primary .md-nav__item > .md-nav__link:not(.md-nav__container), |
| 26 | + .md-sidebar--primary .md-nav__container > .md-nav__link { |
| 27 | + padding: 3px 10px; |
| 28 | + margin: 0; |
| 29 | + } |
| 30 | + .md-sidebar--primary .md-nav__item > .md-nav__container { |
| 31 | + padding: 0; |
| 32 | + margin: 0; |
| 33 | + } |
| 34 | + |
| 35 | + /* Section labels: typography only — geometry comes from the row rule |
| 36 | + above, so no specificity coordination is needed. */ |
| 37 | + .md-sidebar--primary .md-nav__item--section { |
| 38 | + margin: 0.8em 0; |
| 39 | + } |
10 | 40 | .md-sidebar--primary .md-nav__item--section > .md-nav__link { |
11 | 41 | font-size: 0.62rem; |
12 | 42 | font-weight: 700; |
|
15 | 45 | color: var(--md-default-fg-color--light); |
16 | 46 | } |
17 | 47 |
|
18 | | - /* Indent section children and hang a guide line. Material outdents section |
19 | | - children with [dir=ltr] ... margin-left: -0.6rem, which is why they sit |
20 | | - flush under the header; restoring the margin re-exposes the stock 0.6rem |
21 | | - list padding. The logical property ties Material's physical one at |
22 | | - (0,3,0) specificity and wins on source order (extra_css loads last), |
23 | | - while staying direction-agnostic. */ |
| 48 | + /* Guide lines: 12px from the item box = 2px right of the label text |
| 49 | + (which sits at box + 10px pill inset); children indent past them. */ |
24 | 50 | .md-sidebar--primary .md-nav__item--section > .md-nav { |
25 | | - margin-inline-start: 0.1rem; |
| 51 | + margin-inline-start: 12px; |
26 | 52 | border-inline-start: 0.05rem solid var(--md-default-fg-color--lightest); |
27 | 53 | } |
28 | | - |
29 | | - /* Same guide line for collapsible groups inside the API Reference subtree |
30 | | - (section items also carry --nested, so exclude them). */ |
31 | 54 | .md-sidebar--primary .md-nav__item--nested:not(.md-nav__item--section) > .md-nav { |
| 55 | + margin-inline-start: 12px; |
32 | 56 | border-inline-start: 0.05rem solid var(--md-default-fg-color--lightest); |
33 | 57 | } |
34 | 58 |
|
35 | | - /* Tighten vertical rhythm (stock: 0.625em link margins, 1.25em sections). |
36 | | - The child combinator keeps this off anchors inside md-nav__container, |
37 | | - which carry their own margin-top: 0 stock rule. */ |
38 | | - .md-sidebar--primary .md-nav__item > .md-nav__link { |
39 | | - margin-top: 0.45em; |
40 | | - } |
41 | | - .md-sidebar--primary .md-nav__item--section { |
42 | | - margin: 1em 0; |
43 | | - } |
44 | | - .md-sidebar--primary .md-nav__item--section > .md-nav__link { |
45 | | - margin-top: 0; |
46 | | - } |
47 | | - |
48 | | - /* The current page stands out from its siblings. 700 because Material only |
49 | | - loads Inter at 300/400/700; a 600 would silently substitute the 700 face |
50 | | - anyway, but render lighter on the system-font fallback stack. */ |
| 59 | + /* The current page stands out from its siblings (on top of the stock |
| 60 | + pill highlight). 700 because only Inter 300/400/700 are loaded. */ |
51 | 61 | .md-sidebar--primary .md-nav__link--active { |
52 | 62 | font-weight: 700; |
53 | 63 | } |
|
60 | 70 | } |
61 | 71 | } |
62 | 72 |
|
63 | | -/* Headings: Material's 300-weight light-gray defaults read washed out; use |
64 | | - the full foreground color and a solid weight instead. 700, not 600: the |
65 | | - Google Fonts request only carries Inter 300/400/700 (see the nav__link |
66 | | - note above). */ |
| 73 | +/* Dark scheme: Zensical's slate canvas is near-black (hsla(225,15%,5%)), |
| 74 | + harsher than the Material slate this site shipped with; restore that |
| 75 | + blue-grey. Code blocks and other surfaces keep Zensical's own tokens. */ |
| 76 | +@media screen { |
| 77 | + [data-md-color-scheme="slate"] { |
| 78 | + --md-default-bg-color: #1e2129; |
| 79 | + } |
| 80 | +} |
| 81 | + |
| 82 | +/* Inline code inside admonitions: the chip token is an absolute dark |
| 83 | + surface designed for the page canvas, so on a tinted admonition panel it |
| 84 | + sits as an opaque slab (Zensical's own docs share this bug). Re-tint it |
| 85 | + tone-on-tone instead — translucent foreground, composited over whatever |
| 86 | + the panel color is — the same pattern Starlight and Docusaurus ship for |
| 87 | + code inside callouts. Prose chips keep the block-matching dark surface; |
| 88 | + block code inside admonitions keeps its own surface too. The first |
| 89 | + declaration is the fallback where color-mix is unsupported. */ |
| 90 | +.md-typeset .admonition :not(pre) > code, |
| 91 | +.md-typeset details :not(pre) > code { |
| 92 | + background-color: var(--md-default-fg-color--lightest); |
| 93 | + background-color: color-mix(in srgb, currentcolor 11%, transparent); |
| 94 | + color: inherit; |
| 95 | +} |
| 96 | + |
| 97 | +/* Headings: the 300-weight light-gray defaults read washed out; use the |
| 98 | + full foreground color and a solid weight instead. 700, not 600: only |
| 99 | + Inter 300/400/700 are loaded (see the nav__link note above). */ |
67 | 100 | .md-typeset h1, |
68 | 101 | .md-typeset h2 { |
69 | 102 | font-weight: 700; |
|
0 commit comments