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
+13
-3
@@ -48,7 +48,14 @@
|
||||
|
||||
/* Dark scheme keeps the same accents; light stays the default. */
|
||||
[data-md-color-scheme="slate"] {
|
||||
--md-primary-fg-color: #3f6b3e;
|
||||
/* The header was #3f6b3e -- a dark green against a dark page, so the bar
|
||||
disappeared into the background. Green-mid with near-black text keeps the
|
||||
bar legible in dark mode while staying on brand. */
|
||||
--md-primary-fg-color: #6ba86b;
|
||||
--md-primary-fg-color--light: #7ab87a;
|
||||
--md-primary-fg-color--dark: #5b8c5a;
|
||||
--md-primary-bg-color: #16201a;
|
||||
--md-primary-bg-color--light: rgba(22, 32, 26, 0.7);
|
||||
--md-accent-fg-color: #d98a75;
|
||||
--md-typeset-a-color: var(--green-light);
|
||||
--md-code-bg-color: #2e3328;
|
||||
@@ -174,6 +181,11 @@ body,
|
||||
font-size: 2.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
/* ink is a light-scheme colour; in dark mode let Material's own fg colour apply */
|
||||
[data-md-color-scheme="default"] .md-typeset h1,
|
||||
[data-md-color-scheme="default"] .md-typeset h2,
|
||||
[data-md-color-scheme="default"] .md-typeset h3 {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
@@ -181,13 +193,11 @@ body,
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.md-typeset h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.md-header__title {
|
||||
|
||||
Reference in new issue
Block a user