Skip to content

Commit 5733216

Browse files
committed
docs: modernize the site theme
Sidebar: restore the child indent that navigation.sections cancels, add a guide line, uppercase muted section labels, tighter nav rhythm, and hide the duplicated site-name row. All scoped to the desktop breakpoint; the mobile drawer keeps stock styling. Brand: use the MCP mark as header logo (currentColor SVG) and favicon, copied from the spec repo's docs assets; set Inter / JetBrains Mono to match modelcontextprotocol.io and the TypeScript SDK docs; give headings a solid weight and full foreground color instead of the 300-weight light gray. Navigation: enable navigation.prune (drops the collapsed API Reference subtree from every page's HTML), navigation.instant with progress and prefetch, navigation.footer prev/next links, and navigation.top. Switch the slate palette entry to primary black so the dark-mode header is deliberately near-black (link colors are identical for black and white primaries).
1 parent e4d95e0 commit 5733216

4 files changed

Lines changed: 106 additions & 5 deletions

File tree

docs/.overrides/.icons/mcp.svg

Lines changed: 1 addition & 0 deletions
Loading

docs/extra.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* Sidebar hierarchy + density for MkDocs Material 9.7.x.
2+
All rules scoped to the desktop sidebar breakpoint (>= 76.25em), matching
3+
Material's own scoping for navigation.sections, so the mobile drill-down
4+
drawer keeps stock styling. Colors use Material tokens, so the light and
5+
slate schemes both work without extra palette handling. */
6+
7+
@media screen and (min-width: 76.25em) {
8+
/* Section labels: smaller, uppercase, letter-spaced, muted. Covers both the
9+
clickable index-page headers and the bare API Reference label. */
10+
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
11+
font-size: 0.62rem;
12+
font-weight: 700;
13+
text-transform: uppercase;
14+
letter-spacing: 0.1em;
15+
color: var(--md-default-fg-color--light);
16+
}
17+
18+
/* Indent section children and hang a guide line. Material outdents section
19+
children with margin-left: -0.6rem, which is why they sit flush under the
20+
header; restoring the margin re-exposes the stock 0.6rem list padding. */
21+
[dir="ltr"] .md-sidebar--primary .md-nav__item--section > .md-nav {
22+
margin-left: 0.1rem;
23+
border-left: 0.05rem solid var(--md-default-fg-color--lightest);
24+
}
25+
[dir="rtl"] .md-sidebar--primary .md-nav__item--section > .md-nav {
26+
margin-right: 0.1rem;
27+
border-right: 0.05rem solid var(--md-default-fg-color--lightest);
28+
}
29+
30+
/* Same guide line for collapsible groups inside the API Reference subtree
31+
(section items also carry --nested, so exclude them). */
32+
[dir="ltr"] .md-sidebar--primary
33+
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav {
34+
border-left: 0.05rem solid var(--md-default-fg-color--lightest);
35+
}
36+
[dir="rtl"] .md-sidebar--primary
37+
.md-nav__item--nested:not(.md-nav__item--section) > .md-nav {
38+
border-right: 0.05rem solid var(--md-default-fg-color--lightest);
39+
}
40+
41+
/* Tighten vertical rhythm (stock: 0.625em link margins, 1.25em sections).
42+
The child combinator keeps this off anchors inside md-nav__container,
43+
which carry their own margin-top: 0 stock rule. */
44+
.md-sidebar--primary .md-nav__item > .md-nav__link {
45+
margin-top: 0.45em;
46+
}
47+
.md-sidebar--primary .md-nav__item--section {
48+
margin: 1em 0;
49+
}
50+
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
51+
margin-top: 0;
52+
}
53+
54+
/* The current page stands out from its siblings. */
55+
.md-sidebar--primary .md-nav__link--active {
56+
font-weight: 600;
57+
}
58+
59+
/* The sidebar repeats the site name right above the homepage nav entry;
60+
drop the title row on desktop (the mobile drawer still needs it for its
61+
drill-down back-navigation, hence the media-query scope). */
62+
.md-sidebar--primary .md-nav--primary > .md-nav__title {
63+
display: none;
64+
}
65+
}
66+
67+
/* Headings: Material's 300-weight light-gray defaults read washed out; use
68+
the full foreground color and a solid weight instead. */
69+
.md-typeset h1,
70+
.md-typeset h2 {
71+
font-weight: 600;
72+
color: var(--md-default-fg-color);
73+
}
74+
.md-typeset h3 {
75+
font-weight: 600;
76+
}

docs/favicon.svg

Lines changed: 11 additions & 0 deletions
Loading

mkdocs.yml

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,13 @@ nav:
6969

7070
theme:
7171
name: "material"
72+
custom_dir: docs/.overrides
73+
font:
74+
text: Inter
75+
code: JetBrains Mono
76+
icon:
77+
logo: mcp
78+
favicon: favicon.svg
7279
palette:
7380
- media: "(prefers-color-scheme)"
7481
scheme: default
@@ -86,7 +93,7 @@ theme:
8693
name: "Switch to dark mode"
8794
- media: "(prefers-color-scheme: dark)"
8895
scheme: slate
89-
primary: white
96+
primary: black
9097
accent: white
9198
toggle:
9299
icon: material/lightbulb-auto-outline
@@ -98,14 +105,20 @@ theme:
98105
- content.code.annotate
99106
- content.code.copy
100107
- content.code.select
101-
- navigation.path
108+
- navigation.footer
102109
- navigation.indexes
110+
- navigation.instant
111+
- navigation.instant.prefetch
112+
- navigation.instant.progress
113+
- navigation.path
114+
- navigation.prune
103115
- navigation.sections
116+
- navigation.top
104117
- navigation.tracking
105118
- toc.follow
106-
# logo: "img/logo-white.svg"
107-
# TODO(Marcelo): Add a favicon.
108-
# favicon: "favicon.ico"
119+
120+
extra_css:
121+
- extra.css
109122

110123
# https://www.mkdocs.org/user-guide/configuration/#validation
111124
validation:

0 commit comments

Comments
 (0)