mirror of
https://github.com/kernelkit/infix.git
synced 2026-07-22 01:13:00 +02:00
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:
@@ -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
@@ -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 © 2022-2025 The KernelKit Team
|
||||
copyright: Copyright © 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
|
||||
|
||||
Reference in New Issue
Block a user