Skip to content

Commit b41fac9

Browse files
bensabicbensabic
committed
Update homepage hero styling and header consistency
1 parent c3f2ab3 commit b41fac9

3 files changed

Lines changed: 156 additions & 132 deletions

File tree

‎public/index.css‎

Lines changed: 115 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,92 +12,110 @@
1212

1313
/* Hero Section */
1414
.hero {
15-
padding: 4rem 0 0;
15+
padding: 6rem 0 0;
1616
}
1717

1818
@media (min-width: 1024px) {
1919
.hero {
20-
padding: 6rem 0 0;
20+
padding: 10rem 0 0;
2121
}
2222
}
2323

2424
.hero-content {
25-
max-width: 640px;
25+
max-width: 800px;
26+
margin: 0 auto;
27+
text-align: center;
2628
}
2729

2830
.hero-title {
29-
font-family: "Bricolage Grotesque", sans-serif;
30-
font-optical-sizing: auto;
31-
font-size: 2.5rem;
31+
font-family: "Public Sans", sans-serif;
32+
font-size: 2.25rem;
3233
font-weight: 700;
33-
font-style: normal;
34-
line-height: 1.1;
35-
letter-spacing: -0.025em;
34+
line-height: 1.2;
35+
letter-spacing: -0.03em;
3636
margin-bottom: 1.5rem;
37+
color: var(--foreground);
3738
}
3839

3940
@media (min-width: 640px) {
4041
.hero-title {
41-
font-size: 3rem;
42+
font-size: 2.75rem;
4243
}
4344
}
4445

4546
@media (min-width: 1024px) {
4647
.hero-title {
47-
font-size: 3.5rem;
48+
font-size: 3.25rem;
4849
}
4950
}
5051

5152
.hero-title-accent {
53+
display: inline;
54+
}
55+
56+
.hero-title-accent em {
57+
font-style: normal;
5258
background: linear-gradient(
5359
135deg,
54-
hsl(240 5.9% 10%) 0%,
55-
hsl(240 3.8% 46.1%) 100%
60+
hsl(210 100% 50%) 0%,
61+
hsl(230 90% 60%) 100%
5662
);
5763
-webkit-background-clip: text;
5864
-webkit-text-fill-color: transparent;
5965
background-clip: text;
6066
}
6167

6268
@media (prefers-color-scheme: dark) {
63-
.hero-title-accent {
69+
.hero-title-accent em {
6470
background: linear-gradient(
6571
135deg,
66-
hsl(0 0% 98%) 0%,
67-
hsl(240 5% 64.9%) 100%
72+
hsl(210 100% 65%) 0%,
73+
hsl(230 90% 75%) 100%
6874
);
6975
-webkit-background-clip: text;
7076
-webkit-text-fill-color: transparent;
7177
background-clip: text;
7278
}
7379
}
7480

75-
:root[data-theme="dark"] .hero-title-accent {
76-
background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(240 5% 64.9%) 100%);
81+
:root[data-theme="dark"] .hero-title-accent em {
82+
background: linear-gradient(
83+
135deg,
84+
hsl(210 100% 65%) 0%,
85+
hsl(230 90% 75%) 100%
86+
);
7787
-webkit-background-clip: text;
7888
-webkit-text-fill-color: transparent;
7989
background-clip: text;
8090
}
8191

82-
:root[data-theme="light"] .hero-title-accent {
92+
:root[data-theme="light"] .hero-title-accent em {
8393
background: linear-gradient(
8494
135deg,
85-
hsl(240 5.9% 10%) 0%,
86-
hsl(240 3.8% 46.1%) 100%
95+
hsl(210 100% 50%) 0%,
96+
hsl(230 90% 60%) 100%
8797
);
8898
-webkit-background-clip: text;
8999
-webkit-text-fill-color: transparent;
90100
background-clip: text;
91101
}
92102

93103
.hero-description {
94-
font-family: "JetBrains Mono", monospace;
95-
font-optical-sizing: auto;
96-
font-size: 1.125rem;
97-
font-style: normal;
104+
font-family: "Public Sans", sans-serif;
105+
font-size: 1.0625rem;
106+
font-weight: 400;
98107
color: var(--muted-foreground);
99108
line-height: 1.7;
100-
margin-bottom: 2rem;
109+
margin-bottom: 2.5rem;
110+
max-width: 600px;
111+
margin-left: auto;
112+
margin-right: auto;
113+
}
114+
115+
@media (min-width: 640px) {
116+
.hero-description {
117+
font-size: 1.125rem;
118+
}
101119
}
102120

103121
.hero-actions {
@@ -106,92 +124,101 @@
106124
gap: 0.75rem;
107125
}
108126

109-
.hero-code {
110-
margin-top: 3rem;
127+
.hero-cta {
128+
display: flex;
129+
flex-direction: column;
130+
align-items: center;
131+
justify-content: center;
132+
gap: 1rem;
111133
}
112134

113-
.hero-code .code-block {
114-
display: inline-block;
115-
background-color: hsl(from var(--muted) h s l / 0.35);
116-
border: 1px solid var(--border);
117-
border-radius: var(--radius);
118-
overflow: hidden;
135+
@media (min-width: 640px) {
136+
.hero-cta {
137+
flex-direction: row;
138+
justify-content: center;
139+
gap: 0.75rem;
140+
}
119141
}
120142

121-
.code-header {
143+
.cdn-inline {
122144
display: flex;
123145
align-items: center;
124-
justify-content: space-between;
125-
padding: 0.75rem 1rem;
126-
background-color: hsl(from var(--muted) h s l / 0.5);
127-
border-bottom: 1px solid var(--border);
146+
background-color: hsl(from var(--muted) h s l / 0.4);
147+
border: 1px solid var(--border);
148+
border-radius: var(--radius);
149+
padding: 0.5rem 0.5rem 0.5rem 1rem;
150+
gap: 0.75rem;
151+
max-width: 100%;
152+
transition:
153+
background-color 0.2s ease,
154+
border-color 0.2s ease;
128155
}
129156

130-
.code-dots {
157+
.cdn-inline:hover {
158+
border-color: hsl(from var(--border) h s l / 0.8);
159+
}
160+
161+
.cdn-url {
162+
font-family: "JetBrains Mono", var(--font-mono);
163+
font-size: 0.8125rem;
164+
color: var(--muted-foreground);
165+
white-space: nowrap;
166+
overflow: hidden;
167+
text-overflow: ellipsis;
168+
max-width: 420px;
169+
user-select: all;
131170
display: flex;
132-
gap: 0.375rem;
171+
align-items: center;
133172
}
134173

135-
.code-dot {
136-
width: 0.75rem;
137-
height: 0.75rem;
138-
border-radius: 50%;
139-
background-color: var(--border);
174+
@media (max-width: 767px) {
175+
.cdn-url {
176+
max-width: 200px;
177+
font-size: 0.75rem;
178+
}
140179
}
141180

142-
.code-copy-btn {
181+
.cdn-copy-btn {
143182
display: flex;
144183
align-items: center;
145184
justify-content: center;
146-
width: 1.75rem;
147-
height: 1.75rem;
185+
width: 2rem;
186+
height: 2rem;
148187
padding: 0;
149188
border: none;
150189
border-radius: calc(var(--radius) - 2px);
151-
background-color: transparent;
190+
background-color: var(--background);
152191
color: var(--muted-foreground);
153192
cursor: pointer;
193+
flex-shrink: 0;
154194
transition:
155195
background-color 0.15s ease,
156196
color 0.15s ease;
157197
}
158198

159-
.code-copy-btn:hover {
199+
.cdn-copy-btn:hover {
160200
background-color: var(--accent);
161201
color: var(--foreground);
162202
}
163203

164-
.code-copy-btn .code-check-icon {
204+
.cdn-copy-btn:focus-visible {
205+
outline: none;
206+
box-shadow: 0 0 0 2px hsl(from var(--ring) h s l / 0.3);
207+
}
208+
209+
.cdn-copy-btn .cdn-check-icon {
165210
display: none;
166211
color: hsl(142 70% 45%);
167212
}
168213

169-
.code-copy-btn.copied .code-copy-icon {
214+
.cdn-copy-btn.copied .cdn-copy-icon {
170215
display: none;
171216
}
172217

173-
.code-copy-btn.copied .code-check-icon {
218+
.cdn-copy-btn.copied .cdn-check-icon {
174219
display: block;
175220
}
176221

177-
.hero-code pre {
178-
margin: 0;
179-
padding: 1.25rem;
180-
}
181-
182-
@media (max-width: 767px) {
183-
.hero-code pre {
184-
white-space: pre-wrap;
185-
word-break: break-word;
186-
}
187-
}
188-
189-
.hero-code code {
190-
font-family: var(--font-mono);
191-
font-size: 0.8125rem;
192-
line-height: 1.7;
193-
}
194-
195222
.hljs-comment {
196223
color: var(--muted-foreground);
197224
}
@@ -244,8 +271,21 @@
244271
color: hsl(142 70% 35%);
245272
}
246273

247-
.hero-actions .btn {
248-
padding: 0.75rem 1.5rem;
249-
font-size: 1rem;
274+
/* Read Docs Button */
275+
.hero-cta .btn-primary {
276+
padding: 0.625rem 1.25rem;
277+
font-family: "Public Sans", sans-serif;
278+
font-size: 0.9375rem;
279+
font-weight: 600;
250280
text-decoration: none;
281+
gap: 0.5rem;
282+
flex-shrink: 0;
283+
}
284+
285+
.hero-cta .btn-primary svg {
286+
transition: transform 0.2s ease;
287+
}
288+
289+
.hero-cta .btn-primary:hover svg {
290+
transform: translateX(3px);
251291
}

0 commit comments

Comments
 (0)