Skip to content

Commit 80b5e33

Browse files
jnMetaCodejnMetaCode
committed
feat(book): unify mdbook theme with landing brand
Custom CSS overrides mdbook's default Light theme to match the landing visual language: cream warm background, Songti SC serif headings, 朱砂橙 accent bar, JetBrains Mono code blocks, branded sidebar. Print/PDF mode preserved as clean white via @media print resets — saves ink and looks proper in physical form.
1 parent 8fc7154 commit 80b5e33

2 files changed

Lines changed: 286 additions & 0 deletions

File tree

‎book/book.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ git-repository-url = "https://github.com/jnMetaCode/ai-coding-guide"
1313
git-repository-icon = "fa-github"
1414
edit-url-template = "https://github.com/jnMetaCode/ai-coding-guide/edit/main/book/{path}"
1515
site-url = "/book/"
16+
additional-css = ["theme/custom.css"]
1617

1718
[output.html.search]
1819
enable = true

‎book/theme/custom.css‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
/* ===== AI 不止语 · mdbook brand override ===== */
2+
/* 让 /book/ 视觉跟 landing 同源：朱砂 + 暖纸 + 衬线 */
3+
4+
:root {
5+
--aibz-cream: oklch(0.972 0.012 82);
6+
--aibz-cream-soft: oklch(0.955 0.018 80);
7+
--aibz-cream-card: oklch(0.985 0.008 85);
8+
--aibz-cream-deep: oklch(0.93 0.025 75);
9+
--aibz-ink: oklch(0.22 0.02 60);
10+
--aibz-ink-2: oklch(0.36 0.022 60);
11+
--aibz-ink-3: oklch(0.52 0.02 65);
12+
--aibz-line: oklch(0.86 0.02 75);
13+
--aibz-accent: oklch(0.62 0.18 38);
14+
--aibz-accent-soft: oklch(0.93 0.05 50);
15+
16+
--aibz-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
17+
--aibz-sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
18+
--aibz-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
19+
}
20+
21+
/* ── Light 主题改造（mdbook 默认主题）─────────────── */
22+
.light, html:not(.coal):not(.navy):not(.ayu):not(.rust) {
23+
--bg: var(--aibz-cream);
24+
--fg: var(--aibz-ink);
25+
--sidebar-bg: var(--aibz-cream-soft);
26+
--sidebar-fg: var(--aibz-ink);
27+
--sidebar-non-existant: var(--aibz-ink-3);
28+
--sidebar-active: var(--aibz-accent);
29+
--sidebar-spacer: var(--aibz-line);
30+
--scrollbar: var(--aibz-line);
31+
--icons: var(--aibz-ink-2);
32+
--icons-hover: var(--aibz-accent);
33+
--links: var(--aibz-accent);
34+
--inline-code-color: var(--aibz-accent);
35+
--theme-popup-bg: var(--aibz-cream-card);
36+
--theme-popup-border: var(--aibz-line);
37+
--theme-hover: var(--aibz-cream-deep);
38+
--quote-bg: var(--aibz-cream-soft);
39+
--quote-border: var(--aibz-accent);
40+
--table-border-color: var(--aibz-line);
41+
--table-header-bg: var(--aibz-cream-deep);
42+
--table-alternate-bg: var(--aibz-cream-card);
43+
--searchbar-border-color: var(--aibz-line);
44+
--searchbar-bg: var(--aibz-cream-card);
45+
--searchbar-fg: var(--aibz-ink);
46+
--searchbar-shadow-color: rgba(0,0,0,0.06);
47+
--searchresults-header-fg: var(--aibz-ink-2);
48+
--searchresults-border-color: var(--aibz-line);
49+
--searchresults-li-bg: var(--aibz-cream-card);
50+
--search-mark-bg: oklch(0.85 0.16 80);
51+
}
52+
53+
/* 暖纸感的页面背景 */
54+
html, body, .page, .content {
55+
background: var(--aibz-cream) !important;
56+
color: var(--aibz-ink);
57+
font-family: var(--aibz-sans);
58+
}
59+
60+
/* ── 顶部 menu bar ── */
61+
.menu-bar {
62+
background: var(--aibz-cream-soft) !important;
63+
border-bottom: 1px solid var(--aibz-line);
64+
}
65+
.menu-bar .menu-title {
66+
font-family: var(--aibz-serif);
67+
font-weight: 700;
68+
letter-spacing: -0.01em;
69+
color: var(--aibz-ink);
70+
}
71+
72+
/* ── 标题：衬线宋体 ── */
73+
.content h1,
74+
.content h2,
75+
.content h3,
76+
.content h4 {
77+
font-family: var(--aibz-serif);
78+
font-weight: 800;
79+
letter-spacing: -0.01em;
80+
color: var(--aibz-ink);
81+
}
82+
.content h1 {
83+
font-size: 2.4rem;
84+
border-bottom: 2px solid var(--aibz-accent);
85+
padding-bottom: 0.3em;
86+
margin-top: 0.5em;
87+
}
88+
.content h2 {
89+
font-size: 1.7rem;
90+
margin-top: 2.2em;
91+
position: relative;
92+
padding-left: 16px;
93+
}
94+
.content h2::before {
95+
content: '';
96+
position: absolute;
97+
left: 0; top: 0.25em; bottom: 0.25em;
98+
width: 4px;
99+
background: var(--aibz-accent);
100+
border-radius: 2px;
101+
}
102+
.content h3 { font-size: 1.3rem; margin-top: 1.8em; }
103+
104+
/* ── 正文 ── */
105+
.content p, .content li {
106+
line-height: 1.78;
107+
font-size: 16px;
108+
}
109+
.content strong { color: var(--aibz-ink); font-weight: 700; }
110+
111+
/* ── 链接 ── */
112+
.content a:link, .content a:visited {
113+
color: var(--aibz-accent);
114+
text-decoration: none;
115+
border-bottom: 1px solid oklch(0.62 0.18 38 / 0.25);
116+
transition: all 0.2s;
117+
}
118+
.content a:hover {
119+
border-bottom-color: var(--aibz-accent);
120+
background: oklch(0.62 0.18 38 / 0.06);
121+
}
122+
123+
/* ── 行内代码 ── */
124+
.content code {
125+
font-family: var(--aibz-mono);
126+
font-size: 0.92em;
127+
background: var(--aibz-cream-deep);
128+
color: var(--aibz-accent);
129+
padding: 1px 6px;
130+
border-radius: 4px;
131+
border: 1px solid var(--aibz-line);
132+
}
133+
134+
/* ── 代码块 ── */
135+
.content pre {
136+
background: oklch(0.16 0.01 60) !important;
137+
border: 1px solid var(--aibz-line);
138+
border-radius: 8px;
139+
padding: 18px 20px !important;
140+
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
141+
}
142+
.content pre > code {
143+
background: none !important;
144+
border: none !important;
145+
color: oklch(0.92 0.01 80);
146+
padding: 0;
147+
font-size: 13.5px;
148+
line-height: 1.6;
149+
}
150+
151+
/* ── 引用块（blockquote） ── */
152+
.content blockquote {
153+
background: var(--aibz-cream-soft);
154+
border-left: 4px solid var(--aibz-accent);
155+
border-radius: 0 6px 6px 0;
156+
padding: 14px 20px;
157+
margin: 1.5em 0;
158+
color: var(--aibz-ink-2);
159+
}
160+
161+
/* ── 表格 ── */
162+
.content table {
163+
border-collapse: collapse;
164+
margin: 1.5em 0;
165+
border: 1px solid var(--aibz-line);
166+
border-radius: 6px;
167+
overflow: hidden;
168+
}
169+
.content th {
170+
background: var(--aibz-cream-deep);
171+
font-family: var(--aibz-sans);
172+
font-weight: 600;
173+
color: var(--aibz-ink);
174+
padding: 10px 14px;
175+
border-bottom: 2px solid var(--aibz-accent);
176+
}
177+
.content td {
178+
padding: 10px 14px;
179+
border-top: 1px solid var(--aibz-line);
180+
}
181+
.content tr:nth-child(even) td { background: var(--aibz-cream-card); }
182+
183+
/* ── 侧边栏 ── */
184+
.sidebar {
185+
background: var(--aibz-cream-soft) !important;
186+
border-right: 1px solid var(--aibz-line);
187+
font-family: var(--aibz-sans);
188+
}
189+
.sidebar .sidebar-scrollbox { padding: 16px 12px; }
190+
.chapter li > a {
191+
color: var(--aibz-ink-2);
192+
font-size: 14px;
193+
padding: 4px 10px;
194+
border-radius: 4px;
195+
transition: all 0.15s;
196+
}
197+
.chapter li > a:hover {
198+
background: var(--aibz-cream-deep);
199+
color: var(--aibz-accent);
200+
}
201+
.chapter li > a.active {
202+
color: var(--aibz-accent);
203+
background: oklch(0.62 0.18 38 / 0.08);
204+
font-weight: 600;
205+
}
206+
.chapter li.part-title {
207+
font-family: var(--aibz-serif);
208+
color: var(--aibz-ink);
209+
font-weight: 700;
210+
font-size: 13.5px;
211+
letter-spacing: 0.02em;
212+
padding-top: 18px;
213+
margin-bottom: 6px;
214+
}
215+
.chapter li > .section { color: var(--aibz-ink-3); }
216+
217+
/* ── 搜索框 ── */
218+
#searchbar {
219+
background: var(--aibz-cream-card);
220+
border: 1px solid var(--aibz-line);
221+
color: var(--aibz-ink);
222+
font-family: var(--aibz-sans);
223+
}
224+
#searchbar:focus {
225+
border-color: var(--aibz-accent);
226+
box-shadow: 0 0 0 3px oklch(0.62 0.18 38 / 0.12);
227+
}
228+
229+
/* ── 暗色模式（Coal/Navy 维持原生不动，跟 landing 暗色一致）── */
230+
.coal, .navy {
231+
/* 让暗色保留 mdbook 默认风味，不强行 override */
232+
}
233+
234+
/* ── 响应式微调 ── */
235+
@media (max-width: 700px) {
236+
.content h1 { font-size: 1.8rem; }
237+
.content h2 { font-size: 1.4rem; }
238+
.content { padding: 16px 4vw; }
239+
}
240+
241+
/* ── 顶部品牌"回 landing"按钮 ── */
242+
.menu-title::after {
243+
content: '· aibuzhiyu.com';
244+
font-size: 12px;
245+
color: var(--aibz-ink-3);
246+
font-family: var(--aibz-mono);
247+
font-weight: 400;
248+
margin-left: 10px;
249+
letter-spacing: 0.04em;
250+
}
251+
252+
/* ── 打印 / PDF 模式：纯白背景节约油墨 ── */
253+
@media print {
254+
html, body, .page, .content {
255+
background: #fff !important;
256+
color: #000 !important;
257+
}
258+
.content h1 {
259+
border-bottom-color: #000 !important;
260+
}
261+
.content h2::before {
262+
background: #000 !important;
263+
}
264+
.content blockquote {
265+
background: #f5f5f5 !important;
266+
border-left-color: #000 !important;
267+
}
268+
.content pre {
269+
background: #f5f5f5 !important;
270+
border-color: #ccc !important;
271+
}
272+
.content pre > code {
273+
color: #000 !important;
274+
}
275+
.content code {
276+
background: #f5f5f5 !important;
277+
color: #000 !important;
278+
border-color: #ccc !important;
279+
}
280+
.content a:link, .content a:visited {
281+
color: #000 !important;
282+
border-bottom: none !important;
283+
}
284+
.menu-title::after { content: '' !important; }
285+
}

0 commit comments

Comments
 (0)