inference-bot
9b66409343
Material emits its own font variables and defines --md-text-font-family on <body>, so brand.css's :root value lost to it by DOM proximity -- the same failure mode as the palette, and the reason the site rendered entirely in the system font stack with Material's default 32px/300 headings. theme.font: false stops Material supplying typography, and brand.css now declares the font on body, the navigation, the header and every heading, with heading sizes closer to the website. Figtree is still self-hosted from publishing/fonts.
196 lines
5.0 KiB
CSS
196 lines
5.0 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"] {
|
|
--md-primary-fg-color: #3f6b3e;
|
|
--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;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.md-typeset h2 {
|
|
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 {
|
|
font-weight: 600;
|
|
}
|