Skip to content

Commit 177aa43

Browse files
author
danhnguyen
committed
🎨 style(theme): streamline head configuration and add custom styles
1 parent 0930953 commit 177aa43

File tree

3 files changed

+236
-10
lines changed

3 files changed

+236
-10
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,7 @@ export default defineConfig({
1919
},
2020

2121
// Ensure CSS is properly included
22-
head: [
23-
['meta', { name: 'theme-color', content: '#3c82f6' }],
24-
[
25-
'link',
26-
{
27-
rel: 'stylesheet',
28-
href: 'https://unpkg.com/[email protected]/dist/client/theme-default/style.css',
29-
},
30-
],
31-
],
22+
head: [['meta', { name: 'theme-color', content: '#3c82f6' }]],
3223

3324
themeConfig: {
3425
nav: [

‎docs/.vitepress/theme/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// .vitepress/theme/index.js
22
import DefaultTheme from 'vitepress/theme';
3+
import './style.css';
34

45
export default DefaultTheme;

‎docs/.vitepress/theme/style.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/* Import all VitePress theme CSS files that exist */
2+
@import 'vitepress/dist/client/theme-default/styles/fonts.css';
3+
@import 'vitepress/dist/client/theme-default/styles/vars.css';
4+
@import 'vitepress/dist/client/theme-default/styles/base.css';
5+
@import 'vitepress/dist/client/theme-default/styles/utils.css';
6+
@import 'vitepress/dist/client/theme-default/styles/icons.css';
7+
@import 'vitepress/dist/client/theme-default/styles/components/custom-block.css';
8+
@import 'vitepress/dist/client/theme-default/styles/components/vp-code.css';
9+
@import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css';
10+
@import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css';
11+
@import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css';
12+
13+
/* Custom theme overrides */
14+
:root {
15+
--vp-c-brand-1: #3c82f6;
16+
--vp-c-brand-2: #2563eb;
17+
--vp-c-brand-3: #1d4ed8;
18+
}
19+
20+
/* Ensure proper styling for the documentation */
21+
.VPDoc {
22+
max-width: none;
23+
}
24+
25+
.VPContent {
26+
padding-top: var(--vp-nav-height);
27+
}
28+
29+
/* Fix any missing styles */
30+
.vp-doc {
31+
line-height: 1.7;
32+
}
33+
34+
.vp-doc h1,
35+
.vp-doc h2,
36+
.vp-doc h3,
37+
.vp-doc h4,
38+
.vp-doc h5,
39+
.vp-doc h6 {
40+
font-weight: 600;
41+
line-height: 1.25;
42+
}
43+
44+
.vp-doc p {
45+
margin: 16px 0;
46+
}
47+
48+
.vp-doc a {
49+
color: var(--vp-c-brand-1);
50+
text-decoration: underline;
51+
text-underline-offset: 2px;
52+
transition: color 0.25s;
53+
}
54+
55+
.vp-doc a:hover {
56+
color: var(--vp-c-brand-2);
57+
}
58+
59+
/* Navigation styles */
60+
.VPNav {
61+
background-color: var(--vp-c-bg);
62+
border-bottom: 1px solid var(--vp-c-divider);
63+
}
64+
65+
/* Home page styles */
66+
.VPHome {
67+
padding: 0 24px;
68+
}
69+
70+
.VPHero {
71+
padding: 48px 0;
72+
text-align: center;
73+
}
74+
75+
.VPFeatures {
76+
padding: 48px 0;
77+
}
78+
79+
/* Button styles */
80+
.VPButton {
81+
display: inline-block;
82+
border: 1px solid transparent;
83+
text-align: center;
84+
font-weight: 600;
85+
white-space: nowrap;
86+
transition:
87+
color 0.25s,
88+
border-color 0.25s,
89+
background-color 0.25s;
90+
}
91+
92+
.VPButton.brand {
93+
border-color: var(--vp-button-brand-border);
94+
color: var(--vp-button-brand-text);
95+
background-color: var(--vp-button-brand-bg);
96+
}
97+
98+
.VPButton.brand:hover {
99+
border-color: var(--vp-button-brand-hover-border);
100+
color: var(--vp-button-brand-hover-text);
101+
background-color: var(--vp-button-brand-hover-bg);
102+
}
103+
104+
.VPButton.alt {
105+
border-color: var(--vp-button-alt-border);
106+
color: var(--vp-button-alt-text);
107+
background-color: var(--vp-button-alt-bg);
108+
}
109+
110+
.VPButton.alt:hover {
111+
border-color: var(--vp-button-alt-hover-border);
112+
color: var(--vp-button-alt-hover-text);
113+
background-color: var(--vp-button-alt-hover-bg);
114+
}
115+
116+
.VPButton.medium {
117+
border-radius: 20px;
118+
padding: 0 20px;
119+
line-height: 38px;
120+
font-size: 14px;
121+
}
122+
123+
/* Code block styles */
124+
.vp-code-group {
125+
margin: 16px 0;
126+
}
127+
128+
div[class*='language-'] {
129+
position: relative;
130+
margin: 16px 0;
131+
background-color: var(--vp-code-block-bg);
132+
overflow-x: auto;
133+
transition: background-color 0.5s;
134+
}
135+
136+
div[class*='language-'] code {
137+
display: block;
138+
padding: 0 24px;
139+
width: fit-content;
140+
min-width: 100%;
141+
line-height: var(--vp-code-line-height);
142+
font-size: var(--vp-code-font-size);
143+
color: var(--vp-code-block-color);
144+
transition: color 0.5s;
145+
}
146+
147+
/* Feature grid styles */
148+
.VPFeatures .items {
149+
display: flex;
150+
flex-wrap: wrap;
151+
margin: -8px;
152+
}
153+
154+
.VPFeatures .item {
155+
padding: 8px;
156+
width: 100%;
157+
}
158+
159+
@media (min-width: 640px) {
160+
.VPFeatures .item {
161+
width: 50%;
162+
}
163+
}
164+
165+
@media (min-width: 960px) {
166+
.VPFeatures .item {
167+
width: 33.333333%;
168+
}
169+
}
170+
171+
.VPFeature {
172+
display: block;
173+
border: 1px solid var(--vp-c-bg-soft);
174+
border-radius: 12px;
175+
height: 100%;
176+
background-color: var(--vp-c-bg-soft);
177+
transition:
178+
border-color 0.25s,
179+
background-color 0.25s;
180+
}
181+
182+
.VPFeature:hover {
183+
border-color: var(--vp-c-brand-1);
184+
}
185+
186+
.VPFeature .box {
187+
padding: 28px 32px;
188+
height: 100%;
189+
}
190+
191+
.VPFeature .icon {
192+
display: flex;
193+
justify-content: center;
194+
align-items: center;
195+
margin-bottom: 20px;
196+
border-radius: 6px;
197+
background-color: var(--vp-c-default-soft);
198+
width: 48px;
199+
height: 48px;
200+
font-size: 24px;
201+
transition: background-color 0.25s;
202+
}
203+
204+
.VPFeature .title {
205+
line-height: 24px;
206+
font-size: 16px;
207+
font-weight: 600;
208+
margin: 0 0 8px 0;
209+
}
210+
211+
.VPFeature .details {
212+
flex-grow: 1;
213+
padding-top: 8px;
214+
line-height: 24px;
215+
font-size: 14px;
216+
font-weight: 500;
217+
color: var(--vp-c-text-2);
218+
margin: 0;
219+
}
220+
221+
/* Responsive adjustments */
222+
@media (max-width: 639px) {
223+
.VPHome {
224+
padding: 0 16px;
225+
}
226+
227+
.VPHero {
228+
padding: 32px 0;
229+
}
230+
231+
.VPFeatures {
232+
padding: 32px 0;
233+
}
234+
}

0 commit comments

Comments
 (0)