From 762915b70335335076ede38d0cac092433d6a9dc Mon Sep 17 00:00:00 2001
From: Joachim Wiberg <troglobit@gmail.com>
Date: Fri, 29 May 2026 09:49:08 +0200
Subject: [PATCH] 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>
---
 doc/extra.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++
 mkdocs.yml    |  6 +++-
 2 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/doc/extra.css b/doc/extra.css
index 94d83360..3e9c836d 100644
--- a/doc/extra.css
+++ b/doc/extra.css
@@ -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;
diff --git a/mkdocs.yml b/mkdocs.yml
index 11769c7d..b372c903 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -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