doc: restyle mkdocs site after Chirpy blog theme

Material's defaults (Roboto, bluish slate dark mode) looked dull next
to the Chirpy-based kernelkit.org blog. Match its typography and colors
via extra.css, no engine change:

- Lato headings + Source Sans 3 body + system monospace for code
- Dark mode: neutral near-black background, soft-gray text, darker code
  blocks, Chirpy blue links (replacing Material's high-contrast slate)
- Light mode: warmer body text, blue links, tinted sidebars
- Keep the orange brand on the masthead; links use Chirpy blue

Set theme.font: false so Material no longer also fetches Roboto.

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>
This commit is contained in:
Joachim Wiberg
2026-05-29 10:07:56 +02:00
parent 5fd5d1254a
commit 762915b703
2 changed files with 92 additions and 1 deletions
+87
View File
@@ -1,3 +1,90 @@
/* Chirpy-style typography (must precede all other rules).
* Source Sans Pro was renamed "Source Sans 3" on Google Fonts; it is the
* same typeface. Lato is used for headings, matching www.kernelkit.org. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');
/* ---- Fonts ---------------------------------------------------------------
* theme.font is disabled in mkdocs.yml, so we set Material's font vars here.
* Body: Source Sans 3, code: system monospace (same stack Chirpy uses). */
:root {
--md-text-font: "Source Sans 3";
--md-code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Lato for all headings and the masthead site title. */
.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: "Lato", "Microsoft Yahei", sans-serif;
}
/* ---- Light mode (Chirpy "default" palette) ------------------------------- */
[data-md-color-scheme="default"] {
--md-typeset-color: #34343c;
--md-typeset-a-color: #0056b2; /* Chirpy blue links */
--md-accent-fg-color: #0056b2; /* link hover / active TOC */
--md-code-bg-color: #f6f8fa;
--md-code-fg-color: #3a3a3a;
}
[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,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
color: #2a2a2a;
}
/* Subtle tinted sidebars (left nav + right TOC), as on the blog. */
[data-md-color-scheme="default"] .md-sidebar {
background-color: #f6f8fa;
}
/* ---- Dark mode (Chirpy "dark" palette over Material's slate) ------------- */
[data-md-color-scheme="slate"] {
--md-default-bg-color: rgb(27 27 30); /* neutral near-black */
--md-default-fg-color: rgb(207 208 209); /* UI text */
--md-default-fg-color--light: rgb(175 176 177);
--md-default-fg-color--lighter: rgb(175 176 177 / 45%);
--md-default-fg-color--lightest: rgb(175 176 177 / 18%);
--md-typeset-color: rgb(175 176 177); /* body text */
--md-code-bg-color: #151515;
--md-code-fg-color: #b0b0b0;
--md-typeset-a-color: rgb(138 180 248); /* Chirpy blue links */
--md-accent-fg-color: rgb(168 199 250); /* brighter blue on hover */
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
color: #cccccc;
}
/* Sidebars slightly lighter than the main background, as on the blog. */
[data-md-color-scheme="slate"] .md-sidebar {
background-color: #1e1e1e;
}
/* Inline code reads as a faint highlight rather than a dark block. */
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
background-color: rgb(255 255 255 / 6%);
}
/* ---- Existing project styling -------------------------------------------- */
.md-header__title {
font-size: 1.1rem;
line-height: 2.6rem;
+5 -1
View File
@@ -3,7 +3,7 @@ site_description: Infix Documentation
site_url: https://kernelkit.github.io/infix/
repo_url: https://github.com/kernelkit/infix/
repo_name: kernelkit/infix
copyright: Copyright &copy; 2022-2025 The KernelKit Team
copyright: Copyright &copy; 2022-2026 The KernelKit Team
docs_dir: doc/
edit_uri: edit/master/doc/
extra_css:
@@ -79,6 +79,10 @@ nav:
theme:
logo: logo-plain.png
name: material
# Fonts are loaded by doc/extra.css (Lato headings + Source Sans body +
# system monospace, matching the Chirpy blog) instead of Material's
# auto-loaded Roboto. Keep this false so Material does not also fetch Roboto.
font: false
features:
- toc.follow
# - toc.integrate