docs site: legible header in dark mode, typography in its own stylesheet
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.
This commit is contained in:
1 parent
9b66409343
commit
bf356cd9a3
3 files changed
+60
-3
No files matched your search
@@ -0,0 +1,46 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in new issue
Block a user