Skip to content

style: update docs theme to match Ghost blog #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmadcode merged 1 commit into from
Apr 1, 2026
Merged

style: update docs theme to match Ghost blog #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions website/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,6 @@ export default defineConfig({
title: 'BMad Game Dev Studio',
tagline: 'Game development (Unity, Unreal, Godot) module for the BMad Method.',

logo: {
light: './public/img/bmad-light.png',
dark: './public/img/bmad-dark.png',
alt: 'BMad Game Dev Studio',
replacesTitle: true,
},
favicon: '/favicon.ico',

// Social links
Expand Down
11 changes: 6 additions & 5 deletions website/src/components/Banner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: var(--ai-banner-height, 2.75rem);
background: #334155;
color: rgb(148, 163, 184);
background: #1a1a1a;
color: #a1a1a1;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-bottom: 1px solid rgba(140, 140, 255, 0.15);
border-bottom: 1px solid #262626;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
}

.ai-banner span {
Expand All @@ -32,11 +32,12 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
max-width: 100%;
}
.ai-banner a {
color: #8C8CFF;
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.ai-banner a:hover {
color: #fafafa;
text-decoration: underline;
}

Expand Down
101 changes: 60 additions & 41 deletions website/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* BMad Game Dev Studio Documentation - Custom Styles for Starlight
* Electric Blue theme optimized for dark mode
* Dark theme matching bmadcode.com Ghost blog
*
* CSS Variable Mapping:
* Docusaurus → Starlight
Expand All @@ -9,6 +9,9 @@
* --ifm-font-color-base → --sl-color-text
*/

/* Google Fonts - match Ghost blog typography */
@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');
Copy link
Copy Markdown

@augmentcode augmentcode Bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@importing Google Fonts from fonts.googleapis.com creates a hard external dependency at runtime; in offline viewing or deployments with a restrictive CSP, the intended typography will silently fall back. Consider whether you need to document required CSP/font domains (or provide a self-hosted alternative) so the theme renders consistently.

Severity: low

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.


/* ============================================
COLOR PALETTE - Light Mode
============================================ */
Expand All @@ -19,10 +22,10 @@
/* Full-width content - override Starlight's default 45rem/67.5rem */
--sl-content-width: 100%;

/* Primary accent colors - purple to match BMAD */
--sl-color-accent-low: #e0e0ff;
--sl-color-accent: #8C8CFF;
--sl-color-accent-high: #4141FF;
/* Primary accent colors - blue to match Ghost blog */
--sl-color-accent-low: #dbeafe;
--sl-color-accent: #2563eb;
--sl-color-accent-high: #1d4ed8;

/* Text colors */
--sl-color-white: #1e293b;
Expand All @@ -35,13 +38,14 @@
--sl-color-black: #f8fafc;

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

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

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

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

/* Background colors */
--sl-color-bg: #1b1b1d;
--sl-color-bg-nav: #1b1b1d;
--sl-color-bg-sidebar: #1b1b1d;
--sl-color-hairline-light: rgba(140, 140, 255, 0.1);
--sl-color-hairline: rgba(140, 140, 255, 0.15);
--sl-color-bg: #0a0a0a;
--sl-color-bg-nav: #0a0a0a;
--sl-color-bg-sidebar: #0a0a0a;
--sl-color-hairline-light: rgba(255, 255, 255, 0.06);
--sl-color-hairline: #262626;

/* Text colors */
--sl-color-white: #f8fafc;
--sl-color-white: #fafafa;
--sl-color-gray-1: #e2e8f0;
--sl-color-gray-2: #cbd5e1;
--sl-color-gray-2: #a1a1a1;
--sl-color-gray-3: #94a3b8;
--sl-color-gray-4: #64748b;
--sl-color-gray-4: #666666;
--sl-color-gray-5: #475569;
--sl-color-gray-6: #334155;
--sl-color-black: #1b1b1d;
--sl-color-gray-6: #262626;
--sl-color-black: #0a0a0a;

/* Code highlighting */
--sl-color-bg-inline-code: rgba(140, 140, 255, 0.15);
--sl-color-bg-inline-code: rgba(59, 130, 246, 0.15);
}

/* ============================================
TYPOGRAPHY
============================================ */

/* Space Grotesk for all headings - match Ghost blog */
.sl-markdown-content h1,
.sl-markdown-content h2,
.sl-markdown-content h3,
.sl-markdown-content h4,
.sl-markdown-content h5,
.sl-markdown-content h6,
.site-title,
starlight-toc h2 {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
letter-spacing: -0.02em;
}

.sl-markdown-content h1 {
margin-bottom: 1.5rem;
}
Expand Down Expand Up @@ -138,14 +156,14 @@

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

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

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

.site-title {
Expand Down Expand Up @@ -265,20 +284,20 @@ header.header .header.sl-flex {
.card:hover {
transform: translateY(-3px);
border-color: var(--sl-color-accent);
box-shadow: 0 8px 24px rgba(140, 140, 255, 0.15);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

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

:root[data-theme='dark'] .card:hover {
border-color: rgba(140, 140, 255, 0.5);
border-color: #3b82f6;
box-shadow:
0 8px 32px rgba(140, 140, 255, 0.2),
0 0 0 1px rgba(140, 140, 255, 0.1);
0 8px 32px #262626,
0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* Starlight card grid */
Expand All @@ -297,11 +316,11 @@ header.header .header.sl-flex {
}

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

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

/* ============================================
Expand Down Expand Up @@ -341,21 +360,21 @@ table {
}

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

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

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

/* Blockquotes */
blockquote {
border-left-color: var(--sl-color-accent);
background-color: rgba(140, 140, 255, 0.05);
background-color: rgba(59, 130, 246, 0.05);
border-radius: 0 8px 8px 0;
padding: 1rem 1.25rem;
}
Expand Down Expand Up @@ -392,19 +411,19 @@ blockquote {

/* Note aside */
.starlight-aside--note {
background-color: rgba(140, 140, 255, 0.08);
background-color: rgba(59, 130, 246, 0.08);
}

.starlight-aside--note .starlight-aside__title {
color: #8C8CFF;
color: #3b82f6;
}

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

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

/* Caution aside */
Expand Down
Loading