Dark mode: the slate scheme set the header to #3f6b3e, a dark green on a dark page, so the bar disappeared into the background. It is now green-mid with near-black text. Typography moves to publishing/typography.css, loaded after brand.css, and declares Figtree on the elements themselves -- Material defines --md-text-font-family on <body>, so a :root value loses to it by DOM proximity. Heading colours are scoped to the light scheme, since ink is unreadable on the dark one.
47 lines
1.4 KiB
CSS
47 lines
1.4 KiB
CSS
/* Typography for the co-op documentation site.
|
|
*
|
|
* Loaded after publishing/brand.css on purpose: the font has to be declared on the
|
|
* elements themselves. Material renders body and headings with
|
|
* var(--md-text-font-family), which it defines on <body>, so a :root-level value
|
|
* loses to it by DOM proximity no matter how the cascade is ordered.
|
|
*
|
|
* Figtree is self-hosted -- see the @font-face rules in brand.css. No CDN, no
|
|
* third-party font service.
|
|
*/
|
|
|
|
body,
|
|
.md-typeset,
|
|
.md-nav,
|
|
.md-header,
|
|
.md-tabs,
|
|
.md-footer {
|
|
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
.md-typeset h1,
|
|
.md-typeset h2,
|
|
.md-typeset h3,
|
|
.md-typeset h4,
|
|
.md-typeset h5,
|
|
.md-typeset h6,
|
|
.md-header__title,
|
|
.md-nav__title {
|
|
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.md-typeset h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
|
|
.md-typeset h2 { font-size: 1.7rem; font-weight: 600; }
|
|
.md-typeset h3 { font-size: 1.25rem; font-weight: 600; }
|
|
.md-header__title { font-weight: 600; }
|
|
|
|
/* Colour is scheme-specific, so it stays out of the rules above. */
|
|
[data-md-color-scheme="default"] .md-typeset h1,
|
|
[data-md-color-scheme="default"] .md-typeset h2,
|
|
[data-md-color-scheme="default"] .md-typeset h3,
|
|
[data-md-color-scheme="default"] .md-typeset h4 {
|
|
color: #2d3327;
|
|
}
|