docs: replace MkDocs with Zensical (#3073)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Max Isbey <224885523+maxisbey@users.noreply.github.com>
This commit is contained in:
Marcelo Trylesinski 2026-07-10 13:48:46 +02:00 • committed by GitHub
commit 4fc8882c02
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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