Skip to content

Commit 3a2a783

Browse files
danielroedanielroe
committed
fix(app): address some a11y issues
1 parent 074c334 commit 3a2a783

File tree

2 files changed

+65
-38
lines changed

2 files changed

+65
-38
lines changed

‎app/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en-US">
33

44
<head>
55
<meta charset="utf-8">
@@ -21,7 +21,7 @@ <h1 class="hero-title">download <span class="highlight">StackBlitz</span><br>pro
2121
</p>
2222

2323
<div class="url-example">
24-
<h3>How it works</h3>
24+
<h2>How it works</h2>
2525
<script server>
2626
const example = {
2727
name: 'nuxtblitz',
@@ -78,7 +78,7 @@ <h3>CLI</h3>
7878
<span>copy</span>
7979
</button>
8080
</div>
81-
<pre><code lang="bash" id="cli-code"><span class="comment"># download to my-project.zip</span>
81+
<pre><code id="cli-code"><span class="comment"># download to my-project.zip</span>
8282

8383
npx stackblitz-zip https://stackblitz.com/edit/nuxtblitz my-project.zip</code></pre>
8484
</div>
@@ -96,7 +96,7 @@ <h3>Programmatic</h3>
9696
<span>copy</span>
9797
</button>
9898
</div>
99-
<pre><code lang="javascript" id="programmatic-code"><span class="keyword">import</span> { <span class="function">downloadProject</span> } <span class="keyword">from</span> <span class="string">'stackblitz-zip'</span>
99+
<pre><code id="programmatic-code"><span class="keyword">import</span> { <span class="function">downloadProject</span> } <span class="keyword">from</span> <span class="string">'stackblitz-zip'</span>
100100

101101
<span class="keyword">await</span> <span class="function">downloadProject</span>(<span class="string">'nuxtblitz'</span>, <span class="string">'output.zip'</span>)</code></pre>
102102
</div>

‎app/src/main.css‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,30 @@
66

77
:root {
88
--bg: #0a0a0a;
9+
--bg-elevated: #111;
10+
--bg-elevated-hover: #1a1a1a;
11+
--bg-elevated-alt: #222;
912
--text: #ffffff;
10-
--text-muted: #a0a0a0;
13+
--text-muted: #b3b3b3;
14+
--text-muted-dark: #8a8a8a;
1115
--border: #1a1a1a;
1216
--accent: #646cff;
1317
--accent-hover: #747bff;
18+
--gradient-end: #a0a0a0;
19+
--highlight-blue: #1389fd;
20+
--highlight-red: #ff8787;
21+
--highlight-green: #69db7c;
22+
--warning-bg: rgba(255, 193, 7, 0.02);
23+
--warning-border: rgba(255, 193, 7, 0.1);
24+
--warning-icon: rgba(255, 193, 7, 0.5);
25+
--warning-text: #ffc107;
26+
--warning-text-muted: rgba(255, 193, 7, 0.3);
27+
--success-bg: #1a4d1a;
28+
--success-accent: #51cf66;
29+
--syntax-comment: #8b949e;
30+
--syntax-keyword: #ff7b72;
31+
--syntax-string: #a5d6ff;
32+
--syntax-function: #d2a8ff;
1433
}
1534

1635
body {
@@ -49,16 +68,16 @@ main {
4968
line-height: 1.1;
5069
margin-bottom: 1.5rem;
5170
color: var(--text);
52-
background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
71+
background: linear-gradient(135deg, var(--text) 0%, var(--gradient-end) 100%);
5372
-webkit-background-clip: text;
5473
-webkit-text-fill-color: transparent;
5574
background-clip: text;
5675
}
5776

5877
.hero-title .highlight {
59-
color: #1389fd;
78+
color: var(--highlight-blue);
6079
background: none;
61-
-webkit-text-fill-color: #1389fd;
80+
-webkit-text-fill-color: var(--highlight-blue);
6281
}
6382

6483
@supports not (background-clip: text) {
@@ -78,7 +97,7 @@ main {
7897

7998
.url-example {
8099
margin: 0 auto 4rem;
81-
background: #111;
100+
background: var(--bg-elevated);
82101
border: 1px solid var(--border);
83102
border-radius: 12px;
84103
padding: 2rem;
@@ -123,7 +142,7 @@ main {
123142

124143
.url-example-link {
125144
padding: 0.4rem 0.8rem;
126-
background: #1a1a1a;
145+
background: var(--bg-elevated-hover);
127146
border: 1px solid var(--border);
128147
border-radius: 6px;
129148
color: var(--text-muted);
@@ -134,7 +153,7 @@ main {
134153
}
135154

136155
.url-example-link:hover {
137-
background: #222;
156+
background: var(--bg-elevated-alt);
138157
border-color: var(--accent);
139158
color: var(--text);
140159
}
@@ -158,19 +177,19 @@ main {
158177
}
159178

160179
.url-value .highlight-red {
161-
color: #ff6b6b;
180+
color: var(--highlight-red);
162181
text-decoration: line-through;
163182
text-decoration-thickness: 2px;
164183
}
165184

166185
.url-value .highlight-green {
167-
color: #51cf66;
186+
color: var(--highlight-green);
168187
font-weight: 700;
169188
}
170189

171190
.disclaimer {
172-
background: rgba(255, 193, 7, 0.02);
173-
border-top: 1px solid rgba(255, 193, 7, 0.1);
191+
background: var(--warning-bg);
192+
border-top: 1px solid var(--warning-border);
174193
padding: 0.75rem 1rem;
175194
margin: 0 -2rem -2rem -2rem;
176195
border-radius: 0 0 12px 12px;
@@ -183,28 +202,28 @@ main {
183202
flex-shrink: 0;
184203
width: 14px;
185204
height: 14px;
186-
color: rgba(255, 193, 7, 0.5);
205+
color: var(--warning-icon);
187206
}
188207

189208
.disclaimer-text {
190209
font-size: 0.75rem;
191-
color: #6a6a6a;
210+
color: var(--text-muted-dark);
192211
line-height: 1.4;
193212
}
194213

195214
.disclaimer-text a {
196-
color: rgba(255, 193, 7, 0.7);
197-
text-decoration: none;
198-
border-bottom: 1px solid transparent;
199-
transition: border-color 0.2s;
215+
color: var(--warning-text);
216+
text-decoration: underline;
217+
text-decoration-color: var(--warning-text-muted);
218+
transition: text-decoration-color 0.2s;
200219
}
201220

202221
.disclaimer-text a:hover {
203-
border-bottom-color: rgba(255, 193, 7, 0.7);
222+
text-decoration-color: var(--warning-text);
204223
}
205224

206225
.code-sample {
207-
background: #111;
226+
background: var(--bg-elevated);
208227
border: 1px solid var(--border);
209228
border-radius: 12px;
210229
padding: 1.5rem;
@@ -222,7 +241,7 @@ main {
222241
}
223242

224243
.copy-button {
225-
background: #1a1a1a;
244+
background: var(--bg-elevated-hover);
226245
border: 1px solid var(--border);
227246
border-radius: 6px;
228247
color: var(--text-muted);
@@ -236,15 +255,15 @@ main {
236255
}
237256

238257
.copy-button:hover {
239-
background: #222;
258+
background: var(--bg-elevated-alt);
240259
border-color: var(--accent);
241260
color: var(--text);
242261
}
243262

244263
.copy-button.copied {
245-
background: #1a4d1a;
246-
border-color: #51cf66;
247-
color: #51cf66;
264+
background: var(--success-bg);
265+
border-color: var(--success-accent);
266+
color: var(--success-accent);
248267
}
249268

250269
.copy-button svg {
@@ -280,7 +299,7 @@ main {
280299
}
281300

282301
.code-sample pre {
283-
background: #0a0a0a;
302+
background: var(--bg);
284303
border: 1px solid var(--border);
285304
border-radius: 8px;
286305
padding: 1.25rem;
@@ -291,19 +310,19 @@ main {
291310
}
292311

293312
.code-sample .comment {
294-
color: #6a737d;
313+
color: var(--syntax-comment);
295314
}
296315

297316
.code-sample .keyword {
298-
color: #ff7b72;
317+
color: var(--syntax-keyword);
299318
}
300319

301320
.code-sample .string {
302-
color: #a5d6ff;
321+
color: var(--syntax-string);
303322
}
304323

305324
.code-sample .function {
306-
color: #d2a8ff;
325+
color: var(--syntax-function);
307326
}
308327

309328
.read-more {
@@ -316,7 +335,7 @@ main {
316335
align-items: center;
317336
gap: 0.5rem;
318337
padding: 0.75rem 1.5rem;
319-
background: #111;
338+
background: var(--bg-elevated);
320339
border: 1px solid var(--border);
321340
border-radius: 8px;
322341
color: var(--text);
@@ -326,7 +345,7 @@ main {
326345
}
327346

328347
.read-more-link:hover {
329-
background: #1a1a1a;
348+
background: var(--bg-elevated-hover);
330349
border-color: var(--accent);
331350
transform: translateY(-2px);
332351
}
@@ -358,13 +377,15 @@ footer {
358377

359378
.footer-links a {
360379
color: var(--text-muted);
361-
text-decoration: none;
380+
text-decoration: underline;
381+
text-decoration-color: rgba(179, 179, 179, 0.3);
362382
font-size: 0.9rem;
363-
transition: color 0.2s;
383+
transition: all 0.2s;
364384
}
365385

366386
.footer-links a:hover {
367387
color: var(--text);
388+
text-decoration-color: currentColor;
368389
}
369390

370391
.copyright {
@@ -387,8 +408,14 @@ footer {
387408
.copyright a {
388409
display: inline-flex;
389410
align-items: center;
390-
text-decoration: none;
411+
text-decoration: underline;
412+
text-decoration-color: rgba(179, 179, 179, 0.3);
391413
color: inherit;
414+
transition: text-decoration-color 0.2s;
415+
}
416+
417+
.copyright a:hover {
418+
text-decoration-color: currentColor;
392419
}
393420

394421
.copyright a:hover svg {

0 commit comments

Comments
 (0)