Skip to content

Commit ebde2f3

Browse files
zTgxzTgx
authored
Merge pull request #117 from vectorlessflow/dev
feat(docs): enhance homepage design and add GitHub link
2 parents 9acb0b9 + 8fafd42 commit ebde2f3

4 files changed

Lines changed: 193 additions & 215 deletions

File tree

‎docs/docusaurus.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const config: Config = {
1818

1919
stylesheets: [
2020
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
21+
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
2122
],
2223

2324
organizationName: 'vectorlessflow',
@@ -74,6 +75,7 @@ const config: Config = {
7475
},
7576
items: [
7677
{to: '/docs/getting-started', label: 'Documentation', position: 'left'},
78+
{href: 'https://github.com/vectorlessflow/vectorless', label: 'GitHub', position: 'left'},
7779
],
7880
},
7981
prism: {

‎docs/src/css/custom.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -137,17 +137,7 @@ nav.navbar,
137137
color: var(--primary) !important;
138138
}
139139

140-
/* ===== Homepage Code Syntax Highlighting ===== */
141-
.kw { color: #FF7B72; font-weight: 600; }
142-
.fn { color: #D2A8FF; }
143-
.str { color: #A5D6FF; }
144-
.cmt { color: #8B949E; font-style: italic; }
145-
146-
/* ===== Prevent scroll on homepage ===== */
147-
html:has(.heroBanner) {
148-
overflow: hidden;
140+
.navbar__link--external::after {
141+
display: none !important;
149142
}
150143

151-
html:has(.heroBanner) body {
152-
overflow: hidden;
153-
}

‎docs/src/pages/index.module.css‎

Lines changed: 125 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -5,221 +5,200 @@
55
/* ===== Hero Banner ===== */
66
.heroBanner {
77
margin: 0;
8-
padding: 0;
8+
padding: 40px 24px 32px;
99
min-height: calc(100vh - 68px);
1010
overflow: hidden;
1111
position: relative;
1212
display: flex;
1313
flex-direction: column;
14-
align-items: center;
14+
align-items: flex-start;
1515
justify-content: center;
16-
gap: 48px;
1716
background-color: var(--bg);
18-
font-family: 'Space Grotesk', sans-serif;
17+
font-family: 'Inter', sans-serif;
1918
color: var(--text);
20-
line-height: 1.5;
21-
padding: 40px 24px;
19+
line-height: 1.4;
2220
}
2321

24-
/* ===== Stats widget (top-right corner) ===== */
25-
.statsCorner {
22+
/* Dot-grid background */
23+
.heroBanner::before {
24+
content: '';
2625
position: absolute;
27-
top: 20px;
28-
right: 32px;
29-
z-index: 2;
26+
inset: 0;
27+
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
28+
background-size: 28px 28px;
29+
opacity: 0.5;
30+
pointer-events: none;
31+
z-index: 0;
3032
}
3133

32-
/* ===== Hero Container ===== */
33-
.hero {
34-
max-width: 1120px;
34+
/* Radial glow */
35+
.heroBanner::after {
36+
content: '';
37+
position: absolute;
38+
top: 20%;
39+
left: 35%;
40+
transform: translateX(-50%);
41+
width: 600px;
42+
height: 600px;
43+
background: radial-gradient(
44+
circle,
45+
rgba(175, 120, 139, 0.10) 0%,
46+
transparent 70%
47+
);
48+
pointer-events: none;
49+
z-index: 0;
50+
}
51+
52+
/* ===== Left-aligned Content ===== */
53+
.heroContent {
54+
position: relative;
55+
z-index: 1;
56+
text-align: left;
57+
max-width: 960px;
3558
width: 100%;
3659
margin: 0 auto;
37-
display: flex;
38-
flex-wrap: wrap;
39-
align-items: center;
40-
gap: 48px;
4160
}
4261

43-
/* ===== Left: Brand + CTA ===== */
44-
.heroContent {
45-
flex: 1.1;
46-
min-width: 300px;
62+
.mainTitle {
63+
font-size: clamp(1.6rem, 4vw, 2.4rem);
64+
font-weight: 700;
65+
letter-spacing: -0.03em;
66+
color: var(--text);
67+
margin-bottom: 6px;
68+
line-height: 1;
4769
}
4870

49-
.mainTitle {
50-
font-size: 4rem;
51-
font-weight: 800;
52-
letter-spacing: -0.04em;
53-
background: linear-gradient(135deg, var(--text) 0%, var(--text-light) 80%);
54-
-webkit-background-clip: text;
55-
background-clip: text;
56-
color: transparent;
57-
margin-bottom: 12px;
58-
line-height: 1.05;
71+
.badges {
72+
display: flex;
73+
gap: 6px;
74+
margin-bottom: 10px;
75+
}
76+
77+
.badges img {
78+
height: 20px;
5979
}
6080

6181
.tagline {
62-
font-size: 1.2rem;
82+
font-size: 1rem;
6383
font-weight: 600;
6484
color: var(--primary);
65-
margin-bottom: 16px;
85+
margin-bottom: 4px;
6686
font-style: italic;
6787
}
6888

6989
.subTitle {
70-
font-size: 1rem;
90+
font-size: 0.88rem;
7191
font-weight: 400;
7292
color: var(--text-light);
73-
margin-bottom: 32px;
93+
margin-bottom: 20px;
7494
line-height: 1.6;
75-
max-width: 480px;
95+
max-width: none;
96+
}
97+
98+
/* ===== Section titles & paragraphs ===== */
99+
.sectionTitle {
100+
font-size: 1rem;
101+
font-weight: 700;
102+
color: var(--text);
103+
margin-top: 16px;
104+
margin-bottom: 4px;
105+
padding-bottom: 0;
106+
border-bottom: none;
107+
}
108+
109+
.paragraph {
110+
font-size: 0.85rem;
111+
font-weight: 400;
112+
color: var(--text-light);
113+
line-height: 1.5;
114+
margin-bottom: 2px;
115+
}
116+
117+
.paragraph code {
118+
background-color: var(--primary-soft);
119+
color: var(--text);
120+
padding: 1px 5px;
121+
border-radius: 3px;
122+
font-size: 0.85em;
123+
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
124+
}
125+
126+
/* ===== Code Section ===== */
127+
.codeSection {
128+
margin-top: 4px;
129+
margin-bottom: 0;
130+
max-width: none;
131+
}
132+
133+
.codeSection pre {
134+
border-radius: 6px !important;
135+
font-size: 0.75rem !important;
136+
line-height: 1.5 !important;
137+
padding: 12px !important;
76138
}
77139

78140
/* ===== Buttons ===== */
79141
.heroActions {
80142
display: flex;
81-
gap: 12px;
143+
gap: 10px;
82144
align-items: center;
83145
flex-wrap: wrap;
84-
}
85-
86-
.primaryButton {
87-
display: inline-flex;
88-
align-items: center;
89-
gap: 0.5rem;
90-
padding: 0.85rem 2rem;
91-
font-size: 0.95rem;
92-
font-weight: 600;
93-
border-radius: 999px;
94-
background-color: var(--primary);
95-
color: #fff;
96-
text-decoration: none;
97-
transition: transform 0.15s, box-shadow 0.15s;
98-
font-family: 'Space Grotesk', sans-serif;
99-
}
100-
101-
.primaryButton:hover {
102-
color: #fff;
103-
text-decoration: none;
104-
transform: translateY(-2px);
105-
box-shadow: 0 8px 24px rgba(175, 120, 139, 0.35);
146+
margin-top: 20px;
106147
}
107148

108149
.secondaryButton {
109150
display: inline-flex;
110151
align-items: center;
111-
gap: 0.5rem;
112-
padding: 0.85rem 1.8rem;
113-
font-size: 0.95rem;
152+
gap: 0.4rem;
153+
padding: 0.55rem 1.2rem;
154+
font-size: 0.85rem;
114155
font-weight: 600;
115-
border-radius: 999px;
156+
border-radius: 6px;
116157
background-color: transparent;
117158
color: var(--text);
118159
border: 1px solid var(--border);
119160
text-decoration: none;
120-
transition: transform 0.15s, border-color 0.15s;
121-
font-family: 'Space Grotesk', sans-serif;
161+
transition: border-color 0.15s;
162+
font-family: 'Inter', sans-serif;
122163
}
123164

124165
.secondaryButton:hover {
125166
color: var(--text);
126167
text-decoration: none;
127168
border-color: var(--primary);
128-
transform: translateY(-2px);
129-
}
130-
131-
/* ===== Right: Code Card ===== */
132-
.codeCard {
133-
flex: 0.9;
134-
min-width: 340px;
135-
background: #0D1117 !important;
136-
border-radius: 12px;
137-
overflow: hidden;
138-
border: 1px solid #30363D;
139-
box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.4);
140-
}
141-
142-
.codeHeader {
143-
display: flex;
144-
align-items: center;
145-
gap: 8px;
146-
padding: 12px 16px;
147-
background: #161B22;
148-
border-bottom: 1px solid #30363D;
149-
}
150-
151-
.codeDot {
152-
width: 12px;
153-
height: 12px;
154-
border-radius: 50%;
155-
}
156-
157-
.codeTitle {
158-
margin-left: 8px;
159-
font-size: 0.78rem;
160-
color: #8B949E;
161-
font-family: 'Space Grotesk', sans-serif;
162-
}
163-
164-
.codeBlock {
165-
margin: 0;
166-
padding: 20px;
167-
font-size: 0.82rem;
168-
line-height: 1.75;
169-
color: #E6EDF3 !important;
170-
background: transparent !important;
171-
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
172-
overflow-x: auto;
173-
white-space: pre;
174169
}
175170

176-
177171
/* ===== Responsive ===== */
178-
@media (max-width: 960px) {
179-
.hero {
180-
flex-direction: column;
181-
align-items: center;
182-
}
183-
184-
.heroContent {
185-
text-align: center;
186-
}
187-
188-
.subTitle {
189-
max-width: 100%;
190-
}
191-
192-
.heroActions {
193-
justify-content: center;
172+
@media (max-width: 640px) {
173+
.heroBanner {
174+
padding: 32px 16px 24px;
194175
}
195176

196177
.mainTitle {
197-
font-size: 3rem;
178+
font-size: 2rem;
198179
}
199180

200-
.codeCard {
201-
min-width: 0;
202-
width: 100%;
181+
.tagline {
182+
font-size: 0.92rem;
203183
}
204-
}
205184

206-
@media (max-width: 640px) {
207-
.principles {
208-
flex-direction: column;
209-
align-items: center;
210-
gap: 24px;
185+
.subTitle {
186+
font-size: 0.82rem;
187+
max-width: 100%;
211188
}
212189

213-
.mainTitle {
214-
font-size: 2.4rem;
190+
.codeSection {
191+
max-width: 100%;
215192
}
216193

217-
.tagline {
218-
font-size: 1.05rem;
194+
.heroActions {
195+
flex-direction: column;
196+
width: 100%;
219197
}
220198

221-
.heroBanner {
222-
padding: 32px 16px;
223-
gap: 32px;
199+
.primaryButton,
200+
.secondaryButton {
201+
width: 100%;
202+
justify-content: center;
224203
}
225204
}

0 commit comments

Comments
 (0)