docs: new design for the documentation site

Apply the brand to the Material for MkDocs site: Inter and JetBrains Mono
served by the site (upright and real italic), brand colours, blue header band
with the syntax pattern, wordmark in the header, new home page (hero, cards,
animated feature tour), 404 page, polish for tabs, search, footer, focus
rings, tables and code blocks, and theme features (code copy, previous/next
footer, TOC follow, search suggestions).

Draw the number railroad diagram, the parser callback events and the iterator
illustrations as inline SVGs that follow the light and dark scheme. The
generator scripts are in docs/mkdocs/scripts/figures; the feature slideshow
(json-light.svg, json-dark.svg, replacing json.gif on the home page) is built
by docs/mkdocs/scripts/slideshow. Decision nodes in five flowcharts become
hexagons, which need far less room.

Signed-off-by: Niels Lohmann <mail@nlohmann.me>
This commit is contained in:
Niels Lohmann committed 2026-10-25 20:40:26 +01:00
1 parent 2a56afc714
commit 44f1bec789
43 files changed
+2311 -1793

No files matched your search

+17 -7
View File
@@ -1,5 +1,6 @@
# Project information
site_name: JSON for Modern C++
site_description: JSON for Modern C++ is a header-only C++11 library that makes JSON a first-class data type.
site_author: Niels Lohmann
site_url: https://json.nlohmann.me/
@@ -14,33 +15,38 @@ copyright: Copyright &copy; 2013-2026 Niels Lohmann
# Configuration
theme:
name: material
custom_dir: overrides
language: en
palette:
- media: '(prefers-color-scheme: light)'
scheme: default
primary: indigo
accent: indigo
primary: custom
accent: custom
toggle:
icon: material/brightness-7
name: Switch to dark mode
- media: '(prefers-color-scheme: dark)'
scheme: slate
primary: indigo
accent: indigo
primary: custom
accent: custom
toggle:
icon: material/brightness-4
name: Switch to light mode
icon:
repo: fontawesome/brands/github
font:
text: Roboto
code: JetBrains Mono
font: false
logo: images/wordmark-header.svg
features:
- navigation.instant
- navigation.tracking
- navigation.tabs
- navigation.indexes
- navigation.top
- navigation.footer
- toc.follow
- search.suggest
- search.highlight
- content.code.copy
- content.tabs.link
- content.action.edit
- content.action.view
@@ -619,3 +625,7 @@ plugins:
extra_css:
- css/custom.css
- css/brand.css
extra_javascript:
- js/mermaid-brand.js