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
All checks were successful
Build and deploy docs / deploy (push) Successful in 3s
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user