Skip to content

Commit 3f960b3

Browse files
dndungudndungu
committed
feat(site): customize Book theme colors and branding to match landing page
1 parent 57cc637 commit 3f960b3

3 files changed

Lines changed: 182 additions & 0 deletions

File tree

‎assets/_custom.scss‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
// Zerfoo brand colors matching the landing page (static/index.html)
2+
// Dark: purple #8B5CF6, blue #3B82F6, cyan #06B6D4
3+
// Light: purple #7C3AED, blue #2563EB, cyan #0891B2
4+
5+
@mixin theme-light {
6+
--body-background: #FFFFFF;
7+
--body-background-tint: none;
8+
--body-font-color: #111827;
9+
10+
--color-link: #2563EB;
11+
--color-visited-link: #7C3AED;
12+
13+
--icon-filter: none;
14+
15+
--gray-100: #F3F4F6;
16+
--gray-200: #E5E7EB;
17+
--gray-500: #6B7280;
18+
19+
--brand-purple: #7C3AED;
20+
--brand-blue: #2563EB;
21+
--brand-cyan: #0891B2;
22+
23+
--sidebar-bg: #F9FAFB;
24+
--sidebar-border: #E5E7EB;
25+
--sidebar-active: #7C3AED;
26+
27+
--code-bg: #F3F4F6;
28+
--code-border: #E5E7EB;
29+
30+
@include accent("default", #6B7280);
31+
@include accent("note", #2563EB);
32+
@include accent("tip", #059669);
33+
@include accent("important", #7C3AED);
34+
@include accent("warning", #D97706);
35+
@include accent("caution", #DC2626);
36+
37+
@include accent("info", #2563EB);
38+
@include accent("success", #059669);
39+
@include accent("danger", #DC2626);
40+
}
41+
42+
@mixin theme-dark {
43+
--body-background: #0B0F1A;
44+
--body-background-tint: none;
45+
--body-font-color: #F9FAFB;
46+
47+
--color-link: #60A5FA;
48+
--color-visited-link: #A78BFA;
49+
50+
--icon-filter: brightness(0) invert(1);
51+
52+
--gray-100: #1F2937;
53+
--gray-200: #374151;
54+
--gray-500: #9CA3AF;
55+
56+
--brand-purple: #8B5CF6;
57+
--brand-blue: #3B82F6;
58+
--brand-cyan: #06B6D4;
59+
60+
--sidebar-bg: #111827;
61+
--sidebar-border: rgba(255, 255, 255, 0.06);
62+
--sidebar-active: #8B5CF6;
63+
64+
--code-bg: #1F2937;
65+
--code-border: #374151;
66+
67+
@include accent("default", #60A5FA);
68+
@include accent("note", #3B82F6);
69+
@include accent("tip", #34D399);
70+
@include accent("important", #8B5CF6);
71+
@include accent("warning", #FBBF24);
72+
@include accent("caution", #F87171);
73+
74+
@include accent("info", #3B82F6);
75+
@include accent("success", #34D399);
76+
@include accent("danger", #F87171);
77+
}
78+
79+
// Brand logo in sidebar
80+
.book-brand {
81+
img {
82+
height: 1.75em;
83+
width: 1.75em;
84+
}
85+
86+
span {
87+
font-weight: 700;
88+
background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue), var(--brand-cyan));
89+
-webkit-background-clip: text;
90+
-webkit-text-fill-color: transparent;
91+
background-clip: text;
92+
}
93+
}
94+
95+
// Sidebar styling
96+
.book-menu {
97+
.book-menu-content {
98+
background: var(--sidebar-bg);
99+
border-right: 1px solid var(--sidebar-border);
100+
}
101+
102+
a.active {
103+
color: var(--sidebar-active);
104+
font-weight: 600;
105+
}
106+
}
107+
108+
// "Back to Home" link styling
109+
.sidebar-home-link {
110+
display: flex;
111+
align-items: center;
112+
gap: 0.4em;
113+
padding: 0.4em 0;
114+
margin-bottom: 0.5em;
115+
font-size: var(--font-size-smaller);
116+
color: var(--gray-500);
117+
transition: color 0.15s;
118+
119+
&:hover {
120+
color: var(--brand-purple);
121+
}
122+
123+
svg {
124+
width: 1em;
125+
height: 1em;
126+
flex-shrink: 0;
127+
}
128+
}
129+
130+
// Code blocks - monokai-inspired styling
131+
.book-page .markdown {
132+
code {
133+
background: var(--code-bg);
134+
border: 1px solid var(--code-border);
135+
border-radius: 0.25rem;
136+
padding: 0.15em 0.35em;
137+
font-size: 0.875em;
138+
}
139+
140+
pre {
141+
background: var(--code-bg);
142+
border: 1px solid var(--code-border);
143+
border-radius: 0.5rem;
144+
padding: 1em;
145+
146+
code {
147+
background: none;
148+
border: none;
149+
padding: 0;
150+
}
151+
}
152+
}
153+
154+
// Links use brand palette
155+
.book-page .markdown {
156+
a[href] {
157+
color: var(--color-link);
158+
transition: color 0.15s;
159+
160+
&:hover {
161+
color: var(--brand-cyan);
162+
}
163+
}
164+
}
165+
166+
// Selection color
167+
::selection {
168+
background: var(--brand-purple);
169+
color: #fff;
170+
}

‎layouts/_partials/docs/brand.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<h2 class="book-brand">
2+
<a class="flex align-center" href="{{ cond (not .Site.Home.File) .Sites.Default.Home.RelPermalink .Site.Home.RelPermalink }}">
3+
{{- with .Site.Params.BookLogo -}}
4+
<img src="{{ . | relURL }}" alt="Zerfoo" />
5+
{{- end -}}
6+
<span>Zerfoo</span>
7+
</a>
8+
</h2>

‎layouts/_partials/docs/inject/menu-before.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<a href="/" class="sidebar-home-link">
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
3+
Back to Home
4+
</a>

0 commit comments

Comments
 (0)