Skip to content

Commit 89a52d3

Browse files
bmadcodebmadcode
authored
style: update docs theme to match bmadcode.com Ghost blog (#12)
Replace purple/electric blue accent with Ghost blog design tokens: - Background #0a0a0a, surface #1a1a1a, borders #262626 - Accent blue #3b82f6, text #fafafa/#a1a1a1/#666666 - Inter body, Space Grotesk headings, JetBrains Mono code - Remove logo images, use text title
1 parent 278c360 commit 89a52d3

3 files changed

Lines changed: 66 additions & 52 deletions

File tree

‎website/astro.config.mjs‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,6 @@ export default defineConfig({
4141
title: 'BMad Game Dev Studio',
4242
tagline: 'Game development (Unity, Unreal, Godot) module for the BMad Method.',
4343

44-
logo: {
45-
light: './public/img/bmad-light.png',
46-
dark: './public/img/bmad-dark.png',
47-
alt: 'BMad Game Dev Studio',
48-
replacesTitle: true,
49-
},
5044
favicon: '/favicon.ico',
5145

5246
// Social links

‎website/src/components/Banner.astro‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
1313
width: 100vw;
1414
margin-left: calc(-50vw + 50%);
1515
height: var(--ai-banner-height, 2.75rem);
16-
background: #334155;
17-
color: rgb(148, 163, 184);
16+
background: #1a1a1a;
17+
color: #a1a1a1;
1818
padding: 0.5rem 1rem;
1919
font-size: 0.875rem;
20-
border-bottom: 1px solid rgba(140, 140, 255, 0.15);
20+
border-bottom: 1px solid #262626;
2121
display: flex;
2222
align-items: center;
2323
justify-content: center;
2424
box-sizing: border-box;
25-
font-family: system-ui, sans-serif;
25+
font-family: 'Inter', system-ui, sans-serif;
2626
}
2727

2828
.ai-banner span {
@@ -32,11 +32,12 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
3232
max-width: 100%;
3333
}
3434
.ai-banner a {
35-
color: #8C8CFF;
35+
color: #3b82f6;
3636
text-decoration: none;
3737
font-weight: 600;
3838
}
3939
.ai-banner a:hover {
40+
color: #fafafa;
4041
text-decoration: underline;
4142
}
4243

‎website/src/styles/custom.css‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* BMad Game Dev Studio Documentation - Custom Styles for Starlight
3-
* Electric Blue theme optimized for dark mode
3+
* Dark theme matching bmadcode.com Ghost blog
44
*
55
* CSS Variable Mapping:
66
* Docusaurus → Starlight
@@ -9,6 +9,9 @@
99
* --ifm-font-color-base → --sl-color-text
1010
*/
1111

12+
/* Google Fonts - match Ghost blog typography */
13+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
14+
1215
/* ============================================
1316
COLOR PALETTE - Light Mode
1417
============================================ */
@@ -19,10 +22,10 @@
1922
/* Full-width content - override Starlight's default 45rem/67.5rem */
2023
--sl-content-width: 100%;
2124

22-
/* Primary accent colors - purple to match BMAD */
23-
--sl-color-accent-low: #e0e0ff;
24-
--sl-color-accent: #8C8CFF;
25-
--sl-color-accent-high: #4141FF;
25+
/* Primary accent colors - blue to match Ghost blog */
26+
--sl-color-accent-low: #dbeafe;
27+
--sl-color-accent: #2563eb;
28+
--sl-color-accent-high: #1d4ed8;
2629

2730
/* Text colors */
2831
--sl-color-white: #1e293b;
@@ -35,13 +38,14 @@
3538
--sl-color-black: #f8fafc;
3639

3740
/* Font settings */
38-
--sl-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
41+
--sl-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
3942
Arial, sans-serif;
43+
--sl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
4044
--sl-text-base: 1rem;
4145
--sl-line-height: 1.7;
4246

4347
/* Code highlighting */
44-
--sl-color-bg-inline-code: rgba(140, 140, 255, 0.1);
48+
--sl-color-bg-inline-code: rgba(59, 130, 246, 0.08);
4549
}
4650

4751
/* ============================================
@@ -51,35 +55,49 @@
5155
/* Full-width content - override Starlight's default */
5256
--sl-content-width: 100%;
5357

54-
/* Primary accent colors - purple to match BMAD */
55-
--sl-color-accent-low: #2a2a5a;
56-
--sl-color-accent: #8C8CFF;
57-
--sl-color-accent-high: #B9B9FF;
58+
/* Primary accent colors - blue to match Ghost blog */
59+
--sl-color-accent-low: rgba(59, 130, 246, 0.12);
60+
--sl-color-accent: #3b82f6;
61+
--sl-color-accent-high: #60a5fa;
5862

5963
/* Background colors */
60-
--sl-color-bg: #1b1b1d;
61-
--sl-color-bg-nav: #1b1b1d;
62-
--sl-color-bg-sidebar: #1b1b1d;
63-
--sl-color-hairline-light: rgba(140, 140, 255, 0.1);
64-
--sl-color-hairline: rgba(140, 140, 255, 0.15);
64+
--sl-color-bg: #0a0a0a;
65+
--sl-color-bg-nav: #0a0a0a;
66+
--sl-color-bg-sidebar: #0a0a0a;
67+
--sl-color-hairline-light: rgba(255, 255, 255, 0.06);
68+
--sl-color-hairline: #262626;
6569

6670
/* Text colors */
67-
--sl-color-white: #f8fafc;
71+
--sl-color-white: #fafafa;
6872
--sl-color-gray-1: #e2e8f0;
69-
--sl-color-gray-2: #cbd5e1;
73+
--sl-color-gray-2: #a1a1a1;
7074
--sl-color-gray-3: #94a3b8;
71-
--sl-color-gray-4: #64748b;
75+
--sl-color-gray-4: #666666;
7276
--sl-color-gray-5: #475569;
73-
--sl-color-gray-6: #334155;
74-
--sl-color-black: #1b1b1d;
77+
--sl-color-gray-6: #262626;
78+
--sl-color-black: #0a0a0a;
7579

7680
/* Code highlighting */
77-
--sl-color-bg-inline-code: rgba(140, 140, 255, 0.15);
81+
--sl-color-bg-inline-code: rgba(59, 130, 246, 0.15);
7882
}
7983

8084
/* ============================================
8185
TYPOGRAPHY
8286
============================================ */
87+
88+
/* Space Grotesk for all headings - match Ghost blog */
89+
.sl-markdown-content h1,
90+
.sl-markdown-content h2,
91+
.sl-markdown-content h3,
92+
.sl-markdown-content h4,
93+
.sl-markdown-content h5,
94+
.sl-markdown-content h6,
95+
.site-title,
96+
starlight-toc h2 {
97+
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
98+
letter-spacing: -0.02em;
99+
}
100+
83101
.sl-markdown-content h1 {
84102
margin-bottom: 1.5rem;
85103
}
@@ -138,14 +156,14 @@
138156

139157
/* Active state - thin left accent bar */
140158
.sidebar-content a[aria-current='page'] {
141-
background-color: rgba(140, 140, 255, 0.08);
159+
background-color: rgba(59, 130, 246, 0.08);
142160
color: var(--sl-color-accent);
143161
border-left-color: var(--sl-color-accent);
144162
font-weight: 600;
145163
}
146164

147165
:root[data-theme='dark'] .sidebar-content a[aria-current='page'] {
148-
background-color: rgba(140, 140, 255, 0.1);
166+
background-color: rgba(59, 130, 246, 0.1);
149167
color: var(--sl-color-accent-high);
150168
border-left-color: var(--sl-color-accent);
151169
}
@@ -216,7 +234,8 @@ header.header .header.sl-flex {
216234
}
217235

218236
:root[data-theme='dark'] header.header {
219-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
237+
box-shadow: none;
238+
border-bottom: 1px solid #262626;
220239
}
221240

222241
.site-title {
@@ -265,20 +284,20 @@ header.header .header.sl-flex {
265284
.card:hover {
266285
transform: translateY(-3px);
267286
border-color: var(--sl-color-accent);
268-
box-shadow: 0 8px 24px rgba(140, 140, 255, 0.15);
287+
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
269288
}
270289

271290
:root[data-theme='dark'] .card {
272-
background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
273-
border-color: rgba(140, 140, 255, 0.2);
291+
background: #1a1a1a;
292+
border-color: #262626;
274293
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
275294
}
276295

277296
:root[data-theme='dark'] .card:hover {
278-
border-color: rgba(140, 140, 255, 0.5);
297+
border-color: #3b82f6;
279298
box-shadow:
280-
0 8px 32px rgba(140, 140, 255, 0.2),
281-
0 0 0 1px rgba(140, 140, 255, 0.1);
299+
0 8px 32px #262626,
300+
0 0 0 1px rgba(59, 130, 246, 0.1);
282301
}
283302

284303
/* Starlight card grid */
@@ -297,11 +316,11 @@ header.header .header.sl-flex {
297316
}
298317

299318
:root[data-theme='dark'] .sl-link-card {
300-
border-color: rgba(140, 140, 255, 0.2);
319+
border-color: #262626;
301320
}
302321

303322
:root[data-theme='dark'] .sl-link-card:hover {
304-
border-color: rgba(140, 140, 255, 0.5);
323+
border-color: #3b82f6;
305324
}
306325

307326
/* ============================================
@@ -341,21 +360,21 @@ table {
341360
}
342361

343362
:root[data-theme='dark'] table {
344-
border-color: rgba(140, 140, 255, 0.1);
363+
border-color: rgba(59, 130, 246, 0.1);
345364
}
346365

347366
:root[data-theme='dark'] table th {
348-
background-color: rgba(140, 140, 255, 0.05);
367+
background-color: rgba(59, 130, 246, 0.05);
349368
}
350369

351370
:root[data-theme='dark'] table tr:nth-child(2n) {
352-
background-color: rgba(140, 140, 255, 0.02);
371+
background-color: rgba(255, 255, 255, 0.02);
353372
}
354373

355374
/* Blockquotes */
356375
blockquote {
357376
border-left-color: var(--sl-color-accent);
358-
background-color: rgba(140, 140, 255, 0.05);
377+
background-color: rgba(59, 130, 246, 0.05);
359378
border-radius: 0 8px 8px 0;
360379
padding: 1rem 1.25rem;
361380
}
@@ -392,19 +411,19 @@ blockquote {
392411

393412
/* Note aside */
394413
.starlight-aside--note {
395-
background-color: rgba(140, 140, 255, 0.08);
414+
background-color: rgba(59, 130, 246, 0.08);
396415
}
397416

398417
.starlight-aside--note .starlight-aside__title {
399-
color: #8C8CFF;
418+
color: #3b82f6;
400419
}
401420

402421
:root[data-theme='dark'] .starlight-aside--note {
403-
background-color: rgba(140, 140, 255, 0.12);
422+
background-color: rgba(59, 130, 246, 0.12);
404423
}
405424

406425
:root[data-theme='dark'] .starlight-aside--note .starlight-aside__title {
407-
color: #8C8CFF;
426+
color: #3b82f6;
408427
}
409428

410429
/* Caution aside */

0 commit comments

Comments
 (0)