inference-bot
bf356cd9a3
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.
206 lines
5.5 KiB
CSS
206 lines
5.5 KiB
CSS
/* Inference Cooperative brand layer for the documentation site.
|
|
*
|
|
* Source of truth: the co-op's website (repos/website/index.html) — its CSS
|
|
* custom properties and its Figtree webfont. This file reuses those values so
|
|
* the documentation reads as the same organisation, not a default theme.
|
|
*
|
|
* Standing constraint: everything here is local. No third-party font service,
|
|
* no CDN, no other external host.
|
|
*/
|
|
|
|
:root {
|
|
/* -- the co-op's palette (copied from repos/website/index.html) -- */
|
|
--cream: #faf8f5;
|
|
--white: #ffffff;
|
|
--ink: #2d3327;
|
|
--muted: #6b7a62;
|
|
--light-muted: #94a08c;
|
|
--green-deep: #5b8c5a;
|
|
--green-mid: #6ba86b;
|
|
--green-light: #7ab87a;
|
|
--border: #e8e2d8;
|
|
--wash: #eef4ea;
|
|
--earth-red: #a04b3a;
|
|
--earth-red-wash: #f3e6e1;
|
|
--bronze: #a97a4a;
|
|
--bronze-wash: #f1e8da;
|
|
}
|
|
|
|
/* ---------- Material for MkDocs: map the palette onto the theme ---------- */
|
|
|
|
:root,
|
|
[data-md-color-scheme="default"] {
|
|
--md-default-bg-color: var(--cream);
|
|
--md-primary-fg-color: var(--green-deep);
|
|
--md-primary-fg-color--light: var(--green-mid);
|
|
--md-primary-fg-color--dark: #4a7a49;
|
|
--md-primary-bg-color: var(--cream);
|
|
--md-accent-fg-color: var(--earth-red);
|
|
--md-typeset-a-color: var(--green-deep);
|
|
--md-typeset-color: var(--ink);
|
|
--md-footer-bg-color: var(--wash);
|
|
--md-footer-fg-color: var(--ink);
|
|
--md-footer-fg-color--light: var(--muted);
|
|
--md-code-bg-color: #f2efe9;
|
|
--md-code-fg-color: var(--ink);
|
|
--md-admonition-bg-color: var(--wash);
|
|
}
|
|
|
|
/* Dark scheme keeps the same accents; light stays the default. */
|
|
[data-md-color-scheme="slate"] {
|
|
/* 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;
|
|
--md-code-fg-color: #e8e2d8;
|
|
}
|
|
|
|
/* ---------- Typography: Figtree, self-hosted (SIL OFL 1.1) ---------- */
|
|
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("fonts/figtree-400.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("fonts/figtree-500.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("fonts/figtree-600.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("fonts/figtree-700.woff2") format("woff2");
|
|
}
|
|
|
|
:root {
|
|
--md-text-font-family: "Figtree", system-ui, -apple-system, "Segoe UI",
|
|
Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--md-code-font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono",
|
|
"Segoe UI Mono", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* ---------- Friendly details ---------- */
|
|
|
|
/* Links read like the website's: brand green, semibold, underline on hover. */
|
|
.md-typeset a {
|
|
font-weight: 600;
|
|
}
|
|
.md-typeset a:hover,
|
|
.md-typeset a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Rounder cards and tables; a wash instead of grey where the theme has one. */
|
|
.md-typeset .grid.cards > ul > li,
|
|
.md-typeset .grid > .card,
|
|
.md-typeset table:not([class]) {
|
|
border-radius: 0.6rem;
|
|
}
|
|
.md-typeset table:not([class]) {
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* Header: co-op green with the cream wordmark. */
|
|
.md-header {
|
|
box-shadow: none;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
|
}
|
|
.md-header .md-header__title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tabs and the search field pick up the wash. */
|
|
.md-tabs {
|
|
background-color: var(--green-deep);
|
|
}
|
|
.md-search__input {
|
|
background-color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
/* Admonitions get the co-op's washes instead of stock greys. */
|
|
.md-typeset .admonition,
|
|
.md-typeset details {
|
|
border-radius: 0.6rem;
|
|
}
|
|
.md-typeset .admonition.tip,
|
|
.md-typeset .admonition.note {
|
|
border-color: var(--green-mid);
|
|
}
|
|
.md-typeset .admonition.warning {
|
|
border-color: var(--earth-red);
|
|
}
|
|
|
|
/* ---------- Typography: make Figtree actually apply ----------
|
|
* Material renders body and headings with var(--md-text-font-family) and defines that
|
|
* variable on <body>, so a :root definition loses to it by proximity in the DOM -- the
|
|
* same way the colours lost to the palette. Declare the font on the elements themselves
|
|
* as well, and size headings closer to the website rather than Material's defaults.
|
|
*/
|
|
body,
|
|
.md-typeset,
|
|
.md-nav,
|
|
.md-header,
|
|
.md-tabs {
|
|
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 {
|
|
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
|
Arial, sans-serif;
|
|
}
|
|
|
|
.md-typeset h1 {
|
|
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);
|
|
}
|
|
|
|
.md-typeset h2 {
|
|
font-size: 1.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.md-typeset h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.md-header__title {
|
|
font-weight: 600;
|
|
}
|