Add Material icons to all pages, rewrite examples page as step-by-step guide
All checks were successful
Build and deploy docs / deploy (push) Successful in 3s

This commit is contained in:
2026-07-30 14:20:59 +02:00
parent 5af5607fc7
commit f03a985ae5
25 changed files with 226 additions and 52 deletions

View File

@@ -408,3 +408,90 @@ img.diagram + em {
.md-typeset .compact-table table:not([class]) { font-size: .515rem; }
.md-typeset .compact-table table:not([class]) th { font-size: .46rem; }
.md-typeset .compact-table code { font-size: .9em; }
/* -------- Numbered step list (examples page) ------------------------------ */
.md-typeset .steps { counter-reset: step; margin: 1.3em 0; }
.md-typeset .steps .step {
position: relative;
padding: .15rem 0 .15rem 3rem;
margin: 0 0 1.2rem;
min-height: 2rem;
}
/* number badge */
.md-typeset .steps .step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 0;
top: -.05rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--bal-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .9rem;
}
/* connector line between badges */
.md-typeset .steps .step:not(:last-child)::after {
content: "";
position: absolute;
left: .97rem;
top: 2.2rem;
bottom: -1.2rem;
width: 2px;
background: var(--bal-line);
}
.md-typeset .steps .step > :first-child { margin-top: 0; }
.md-typeset .steps .step > :last-child { margin-bottom: 0; }
/* the Material icon at the start of each step title, tinted accent */
.md-typeset .steps .step .twemoji {
color: var(--bal-accent);
margin-right: .15rem;
}
.md-typeset .steps .step .twemoji svg {
width: 1.1rem;
height: 1.1rem;
vertical-align: -.2rem;
}
/* admonitions nested inside a step sit tighter */
.md-typeset .steps .step .admonition { margin: .6rem 0 0; }
/* -------- Nav section icons (added by nav-section-icons.js) ---------------- */
.md-nav--primary .nav-sec-ico {
display: inline-flex;
vertical-align: -.15em;
margin-right: .4em;
}
.md-nav--primary .nav-sec-ico svg {
width: .95rem;
height: .95rem;
fill: var(--bal-accent);
}
/* -------- Homepage "Where to start" card icons ---------------------------- */
.md-typeset .grid.cards .card-ico {
color: var(--bal-accent);
margin-right: .35em;
}
.md-typeset .grid.cards .card-ico svg {
width: 1.1rem;
height: 1.1rem;
vertical-align: -.2rem;
}
/* -------- Page-title (H1) icons ------------------------------------------- */
/* A themed Material icon sits at the start of each page's H1 (added in the
Markdown as :material-...:). Make it larger than body icons and tint accent. */
.md-typeset h1 .twemoji {
color: var(--bal-accent);
margin-right: .5rem;
}
.md-typeset h1 .twemoji svg {
width: 1.6rem;
height: 1.6rem;
vertical-align: -.28rem;
}