Skip to content

Commit dfe2d22

Browse files
author
gaoruilin
committed
feat(site): one title block, a four-step type scale, and a canvas that is not pure black
The audit put four presentation defects on the table, all inherited from the same template family as the paper site: - The canvas was #010102 (body text at 16-19:1, near-pure black) with surfaces #0f1011/#141516/#18191a so close together they were indistinguishable. Now #0b0d10 with #12141a/#191c22/#1f232b — the Radix dark gray-1 (#111111) to Primer dimmed (#212830) band — and hairlines at #262c36/#363d47. - Eight type sizes (11/12/12.5/13/14/15/20/22), five of them 13px, and `.section-label` had no rule at all: "⭐ First Timers" inherited the browser's 16px and outsized the body text. The scale is now four steps — 20 title / 15 section heading / 14 body and controls / 12.5 metadata — with an explicit `body { font-size: 14px }` so a component without a rule lands on the scale instead of the UA default. - Headings skipped a level: h1 (brand) → h3 (dates), no h2. The date headers are h2 now, emitted by the generator, so the outline is h1 + h2 × 7. - `.legend-item` was an 18px-tall tap target; it is 24px now (inline-flex + min-height). Measured after: 0 contrast failures (worst text 4.70:1), exactly four font sizes in the built page, h1=1/h2=7/h3=0, every interactive target >= 24px, no horizontal overflow. 196 tests and all 16 receipts pass, including text-tokens-pass-wcag-aa, which recomputes the tokens against the new canvas.
1 parent c509aae commit dfe2d22

3 files changed

Lines changed: 94 additions & 52 deletions

File tree

‎docs/index.html‎

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
2121

2222
/* Linear Design System Tokens */
23+
/* 字阶只有 4 档:20(页面标题)/ 15(区块标题、条目名)/ 14(正文、控件)/ 12.5(次要元信息)。
24+
新组件从这四档取值 —— 之前是 11/12/12.5/13/14/15/20/22 八档混用,13px 一个人占了九处。 */
2325
:root {
2426
--primary: #5e6ad2;
2527
--primary-hover: #828fff;
@@ -28,12 +30,12 @@
2830
--ink-muted: #d0d6e0;
2931
--ink-subtle: #8a8f98;
3032
--ink-tertiary: #7f8794;
31-
--canvas: #010102;
32-
--surface-1: #0f1011;
33-
--surface-2: #141516;
34-
--surface-3: #18191a;
35-
--hairline: #23252a;
36-
--hairline-strong: #34343a;
33+
--canvas: #0b0d10;
34+
--surface-1: #12141a;
35+
--surface-2: #191c22;
36+
--surface-3: #1f232b;
37+
--hairline: #262c36;
38+
--hairline-strong: #363d47;
3739
--success: #27a644;
3840
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
3941
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
@@ -42,6 +44,7 @@
4244
* { margin: 0; padding: 0; box-sizing: border-box; }
4345

4446
body {
47+
font-size: 14px; /* 基准落在字阶上:没有它,未指定的组件会掉到浏览器默认 16px */
4548
font-family: var(--font-sans);
4649
background: var(--canvas);
4750
color: var(--ink);
@@ -76,15 +79,15 @@
7679
align-items: baseline;
7780
gap: 10px;
7881
}
79-
.brand-icon { font-size: 22px; }
82+
.brand-icon { font-size: 20px; }
8083
.brand h1 {
8184
font-size: 20px;
8285
font-weight: 600;
8386
letter-spacing: -0.4px;
8487
color: var(--ink);
8588
}
8689
.brand .tagline {
87-
font-size: 13px;
90+
font-size: 14px;
8891
color: var(--ink-subtle);
8992
}
9093
.header-links {
@@ -93,7 +96,7 @@
9396
}
9497
.header-links a {
9598
padding: 6px 14px;
96-
font-size: 13px;
99+
font-size: 14px;
97100
font-weight: 500;
98101
color: var(--ink-muted);
99102
text-decoration: none;
@@ -124,7 +127,7 @@
124127
}
125128
.filter-btn {
126129
padding: 6px 14px;
127-
font-size: 13px;
130+
font-size: 14px;
128131
font-weight: 500;
129132
color: var(--ink-subtle);
130133
background: transparent;
@@ -142,7 +145,7 @@
142145
}
143146
.date-select {
144147
padding: 6px 28px 6px 12px;
145-
font-size: 13px;
148+
font-size: 14px;
146149
font-weight: 500;
147150
color: var(--ink);
148151
background: var(--surface-2);
@@ -168,14 +171,29 @@
168171
border-bottom: 1px solid var(--hairline);
169172
margin-bottom: 4px;
170173
}
171-
.date-header h3 {
174+
.date-header h2 {
172175
font-size: 15px;
173176
font-weight: 600;
174177
color: var(--ink);
175178
letter-spacing: -0.2px;
176179
}
180+
.section-label {
181+
display: flex;
182+
align-items: center;
183+
gap: 6px;
184+
font-size: 15px;
185+
font-weight: 600;
186+
color: var(--ink-muted);
187+
margin: 16px 0 4px;
188+
}
189+
.section-label .label-count {
190+
font-size: 12.5px;
191+
font-weight: 400;
192+
color: var(--ink-tertiary);
193+
font-variant-numeric: tabular-nums;
194+
}
177195
.date-count {
178-
font-size: 13px;
196+
font-size: 12.5px;
179197
color: var(--ink-tertiary);
180198
}
181199

@@ -232,7 +250,7 @@
232250
.repo-meta {
233251
display: flex;
234252
gap: 16px;
235-
font-size: 12px;
253+
font-size: 12.5px;
236254
color: var(--ink-tertiary);
237255
padding-left: 30px;
238256
flex-wrap: wrap;
@@ -253,7 +271,7 @@
253271
border-radius: 10px;
254272
background: var(--surface-2);
255273
border: 1px solid var(--hairline);
256-
font-size: 11px;
274+
font-size: 12.5px;
257275
color: var(--ink-muted);
258276
}
259277
.meta-bar {
@@ -262,7 +280,7 @@
262280
flex-wrap: wrap;
263281
gap: 12px;
264282
padding: 0 0 16px;
265-
font-size: 12px;
283+
font-size: 12.5px;
266284
color: var(--ink-tertiary);
267285
}
268286
.meta-bar .meta-stats {
@@ -280,6 +298,9 @@
280298
font-weight: 500;
281299
}
282300
.meta-bar .legend-item {
301+
display: inline-flex;
302+
align-items: center;
303+
min-height: 24px; /* 命中区:原来只有 18px */
283304
white-space: nowrap;
284305
color: var(--ink-tertiary);
285306
text-decoration: none;
@@ -292,7 +313,7 @@
292313
.score-tag {
293314
display: inline-block;
294315
padding: 2px 8px;
295-
font-size: 11px;
316+
font-size: 12.5px;
296317
font-weight: 600;
297318
border-radius: 4px;
298319
background: var(--surface-2);
@@ -325,7 +346,7 @@
325346
margin-bottom: 4px;
326347
}
327348
.footer-tagline {
328-
font-size: 13px;
349+
font-size: 12.5px;
329350
color: var(--ink-tertiary);
330351
}
331352
.footer-sub-form {
@@ -338,7 +359,7 @@
338359
border: 1px solid var(--hairline);
339360
border-radius: 6px;
340361
color: var(--ink);
341-
font-size: 13px;
362+
font-size: 14px;
342363
font-family: var(--font-sans);
343364
min-width: 220px;
344365
}
@@ -355,7 +376,7 @@
355376
border: none;
356377
border-radius: 6px;
357378
color: var(--on-primary);
358-
font-size: 13px;
379+
font-size: 14px;
359380
font-weight: 500;
360381
cursor: pointer;
361382
font-family: var(--font-sans);
@@ -364,7 +385,7 @@
364385
.footer-sub-form button:hover { background: var(--primary-hover); }
365386
.subscribe-success {
366387
display: none;
367-
font-size: 13px;
388+
font-size: 14px;
368389
color: var(--success);
369390
margin-top: 8px;
370391
}
@@ -375,7 +396,7 @@
375396
text-align: center;
376397
}
377398
.footer-bottom p {
378-
font-size: 12px;
399+
font-size: 12.5px;
379400
color: var(--ink-tertiary);
380401
}
381402
.footer-bottom a {
@@ -479,7 +500,7 @@ <h1>GitHub Discovery</h1>
479500
</div>
480501

481502
<div class="date-section" data-date="2026-09-15" style="display:">
482-
<div class="date-header"><h3>2026-09-15</h3><span class="date-count">11 repos</span></div>
503+
<div class="date-header"><h2>2026-09-15</h2><span class="date-count">11 repos</span></div>
483504
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
484505
<div class="repo" data-lang="go" data-source="trending">
485506
<div class="repo-top">
@@ -638,7 +659,7 @@ <h1>GitHub Discovery</h1>
638659
</div>
639660
</div>
640661
<div class="date-section" data-date="2026-09-14" style="display:none">
641-
<div class="date-header"><h3>2026-09-14</h3><span class="date-count">12 repos</span></div>
662+
<div class="date-header"><h2>2026-09-14</h2><span class="date-count">12 repos</span></div>
642663
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
643664
<div class="repo" data-lang="javascript" data-source="trending">
644665
<div class="repo-top">
@@ -811,7 +832,7 @@ <h1>GitHub Discovery</h1>
811832
</div>
812833
</div>
813834
<div class="date-section" data-date="2026-09-13" style="display:none">
814-
<div class="date-header"><h3>2026-09-13</h3><span class="date-count">10 repos</span></div>
835+
<div class="date-header"><h2>2026-09-13</h2><span class="date-count">10 repos</span></div>
815836
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
816837
<div class="repo" data-lang="typescript" data-source="trending">
817838
<div class="repo-top">
@@ -955,7 +976,7 @@ <h1>GitHub Discovery</h1>
955976
</div>
956977
</div>
957978
<div class="date-section" data-date="2026-09-12" style="display:none">
958-
<div class="date-header"><h3>2026-09-12</h3><span class="date-count">12 repos</span></div>
979+
<div class="date-header"><h2>2026-09-12</h2><span class="date-count">12 repos</span></div>
959980
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
960981
<div class="repo" data-lang="typescript" data-source="trending">
961982
<div class="repo-top">
@@ -1128,7 +1149,7 @@ <h1>GitHub Discovery</h1>
11281149
</div>
11291150
</div>
11301151
<div class="date-section" data-date="2026-09-11" style="display:none">
1131-
<div class="date-header"><h3>2026-09-11</h3><span class="date-count">14 repos</span></div>
1152+
<div class="date-header"><h2>2026-09-11</h2><span class="date-count">14 repos</span></div>
11321153
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
11331154
<div class="repo" data-lang="typescript" data-source="trending">
11341155
<div class="repo-top">
@@ -1329,7 +1350,7 @@ <h1>GitHub Discovery</h1>
13291350
</div>
13301351
</div>
13311352
<div class="date-section" data-date="2026-09-10" style="display:none">
1332-
<div class="date-header"><h3>2026-09-10</h3><span class="date-count">13 repos</span></div>
1353+
<div class="date-header"><h2>2026-09-10</h2><span class="date-count">13 repos</span></div>
13331354
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
13341355
<div class="repo" data-lang="python" data-source="trending">
13351356
<div class="repo-top">
@@ -1516,7 +1537,7 @@ <h1>GitHub Discovery</h1>
15161537
</div>
15171538
</div>
15181539
<div class="date-section" data-date="2026-09-09" style="display:none">
1519-
<div class="date-header"><h3>2026-09-09</h3><span class="date-count">11 repos</span></div>
1540+
<div class="date-header"><h2>2026-09-09</h2><span class="date-count">11 repos</span></div>
15201541
<div class="section-label"><span class="label-icon">⭐</span><span>First Timers</span><span class="label-count">10</span></div>
15211542
<div class="repo" data-lang="javascript" data-source="trending">
15221543
<div class="repo-top">

0 commit comments

Comments
 (0)