Skip to content

Commit e6908fe

Browse files
ycode-linycode-lin
committed
fix: improve pages typography and anchor offset
1 parent 1cd1c26 commit e6908fe

File tree

1 file changed

+108
-26
lines changed

1 file changed

+108
-26
lines changed

‎docs/index.html‎

Lines changed: 108 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="preconnect" href="https://fonts.googleapis.com" />
1212
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1313
<link
14-
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
14+
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
1515
rel="stylesheet"
1616
/>
1717
<style>
@@ -27,6 +27,10 @@
2727
--shadow: 0 30px 80px rgba(48, 31, 16, 0.18);
2828
--radius: 28px;
2929
--container: min(1180px, calc(100vw - 40px));
30+
--scroll-offset: 136px;
31+
--font-body: "IBM Plex Sans", sans-serif;
32+
--font-heading: "Cormorant Garamond", serif;
33+
--font-label: "IBM Plex Mono", monospace;
3034
}
3135

3236
* {
@@ -35,13 +39,22 @@
3539

3640
html {
3741
scroll-behavior: smooth;
42+
scroll-padding-top: var(--scroll-offset);
43+
}
44+
45+
html[lang="zh-CN"] {
46+
--font-body: "Noto Sans SC", sans-serif;
47+
--font-heading: "Noto Serif SC", serif;
48+
--font-label: "Noto Sans SC", sans-serif;
3849
}
3950

4051
body {
4152
margin: 0;
4253
color: var(--ink);
43-
font-family: "IBM Plex Sans", sans-serif;
44-
line-height: 1.6;
54+
font-family: var(--font-body);
55+
font-size: 17px;
56+
line-height: 1.72;
57+
text-rendering: optimizeLegibility;
4558
background:
4659
radial-gradient(circle at top left, rgba(177, 73, 47, 0.12), transparent 34%),
4760
radial-gradient(circle at top right, rgba(33, 102, 109, 0.12), transparent 28%),
@@ -117,12 +130,12 @@
117130
.section-title,
118131
.quote,
119132
.metric strong {
120-
font-family: "Cormorant Garamond", serif;
133+
font-family: var(--font-heading);
121134
}
122135

123136
.brand-copy strong {
124137
display: block;
125-
font-size: 1.1rem;
138+
font-size: 1.22rem;
126139
letter-spacing: 0.02em;
127140
}
128141

@@ -134,10 +147,10 @@
134147
.stage-label,
135148
.footer-note,
136149
.lang-switch button {
137-
font-family: "IBM Plex Mono", monospace;
150+
font-family: var(--font-label);
138151
text-transform: uppercase;
139152
letter-spacing: 0.12em;
140-
font-size: 0.76rem;
153+
font-size: 0.78rem;
141154
}
142155

143156
.brand-copy span,
@@ -174,6 +187,7 @@
174187

175188
nav a {
176189
color: var(--muted);
190+
font-size: 0.92rem;
177191
}
178192

179193
.lang-switch {
@@ -220,6 +234,9 @@
220234
border: 1px solid rgba(31, 35, 40, 0.16);
221235
color: var(--ink);
222236
background: var(--panel-strong);
237+
font-family: var(--font-body);
238+
font-size: 0.98rem;
239+
font-weight: 500;
223240
}
224241

225242
.button-primary {
@@ -238,7 +255,7 @@
238255
}
239256

240257
main {
241-
padding: 36px 0 72px;
258+
padding: 44px 0 84px;
242259
}
243260

244261
.hero {
@@ -259,14 +276,15 @@
259276
}
260277

261278
.hero-copy {
262-
padding: 34px;
279+
padding: 40px;
263280
}
264281

265282
.eyebrow {
266283
display: inline-flex;
267284
align-items: center;
268285
gap: 10px;
269286
color: var(--signal);
287+
margin-bottom: 8px;
270288
}
271289

272290
.eyebrow::before {
@@ -279,15 +297,18 @@
279297
h1 {
280298
margin: 18px 0 16px;
281299
font-size: clamp(3.4rem, 9vw, 6.9rem);
282-
line-height: 0.9;
300+
line-height: 0.96;
283301
font-weight: 600;
284302
letter-spacing: -0.04em;
303+
max-width: 8ch;
285304
}
286305

287306
.lead {
288-
max-width: 58ch;
289-
font-size: 1.06rem;
307+
max-width: 43rem;
308+
font-size: 1.13rem;
309+
line-height: 1.9;
290310
color: #34383d;
311+
text-wrap: pretty;
291312
}
292313

293314
.hero-actions {
@@ -305,15 +326,15 @@
305326
}
306327

307328
.metric {
308-
padding: 16px;
329+
padding: 18px 18px 16px;
309330
border-radius: 22px;
310331
background: rgba(255, 255, 255, 0.5);
311332
border: 1px solid rgba(31, 35, 40, 0.08);
312333
}
313334

314335
.metric strong {
315336
display: block;
316-
font-size: 2rem;
337+
font-size: 2.15rem;
317338
line-height: 1;
318339
margin-bottom: 6px;
319340
}
@@ -369,7 +390,8 @@
369390

370391
.node span {
371392
color: var(--muted);
372-
font-size: 0.92rem;
393+
font-size: 0.96rem;
394+
line-height: 1.6;
373395
}
374396

375397
.node-primary {
@@ -441,20 +463,24 @@
441463

442464
.section {
443465
margin-top: 28px;
444-
padding: 28px;
466+
padding: 34px;
445467
}
446468

447469
.section-title {
448-
margin: 0 0 10px;
470+
margin: 0 0 14px;
449471
font-size: clamp(2rem, 5vw, 3.4rem);
450-
line-height: 0.95;
472+
line-height: 1.08;
451473
font-weight: 600;
452474
letter-spacing: -0.03em;
475+
max-width: 13ch;
476+
text-wrap: balance;
453477
}
454478

455479
.section-copy {
456-
max-width: 62ch;
480+
max-width: 46rem;
457481
color: #394047;
482+
line-height: 1.9;
483+
text-wrap: pretty;
458484
}
459485

460486
.feature-grid,
@@ -474,22 +500,24 @@
474500

475501
.card {
476502
min-height: 100%;
477-
padding: 22px;
503+
padding: 26px 24px;
478504
border-radius: 24px;
479505
border: 1px solid rgba(31, 35, 40, 0.1);
480506
background: rgba(255, 255, 255, 0.5);
481507
}
482508

483509
.card h3,
484510
.table-card h3 {
485-
margin: 0 0 10px;
486-
font-size: 1.12rem;
511+
margin: 0 0 12px;
512+
font-size: 1.16rem;
513+
line-height: 1.45;
487514
}
488515

489516
.card p,
490517
.table-card p {
491518
margin: 0;
492519
color: var(--muted);
520+
line-height: 1.82;
493521
}
494522

495523
.chip-row {
@@ -511,7 +539,7 @@
511539
}
512540

513541
.table-card {
514-
padding: 24px;
542+
padding: 30px;
515543
}
516544

517545
.spec-table {
@@ -522,7 +550,7 @@
522550

523551
.spec-table th,
524552
.spec-table td {
525-
padding: 14px 0;
553+
padding: 16px 0;
526554
text-align: left;
527555
vertical-align: top;
528556
border-bottom: 1px solid rgba(31, 35, 40, 0.12);
@@ -531,14 +559,16 @@
531559
.spec-table th {
532560
font-weight: 500;
533561
color: var(--muted);
534-
width: 34%;
562+
width: 28%;
535563
}
536564

537565
.quote {
538566
margin: 0;
539567
font-size: clamp(2rem, 4.4vw, 3.15rem);
540-
line-height: 1;
568+
line-height: 1.18;
541569
letter-spacing: -0.03em;
570+
max-width: 12ch;
571+
text-wrap: balance;
542572
}
543573

544574
.quote + p {
@@ -564,6 +594,53 @@
564594
padding: 0 4px;
565595
}
566596

597+
#capabilities,
598+
#details,
599+
#open-source,
600+
#top {
601+
scroll-margin-top: var(--scroll-offset);
602+
}
603+
604+
html[lang="zh-CN"] .brand-copy strong,
605+
html[lang="zh-CN"] .hero-copy h1,
606+
html[lang="zh-CN"] .section-title,
607+
html[lang="zh-CN"] .quote,
608+
html[lang="zh-CN"] .metric strong {
609+
letter-spacing: -0.02em;
610+
}
611+
612+
html[lang="zh-CN"] .brand-copy span,
613+
html[lang="zh-CN"] .eyebrow,
614+
html[lang="zh-CN"] .micro,
615+
html[lang="zh-CN"] .metric span,
616+
html[lang="zh-CN"] .chip,
617+
html[lang="zh-CN"] .stage-label,
618+
html[lang="zh-CN"] .footer-note,
619+
html[lang="zh-CN"] .lang-switch button {
620+
text-transform: none;
621+
letter-spacing: 0.04em;
622+
font-weight: 500;
623+
}
624+
625+
html[lang="zh-CN"] nav a {
626+
letter-spacing: 0.02em;
627+
}
628+
629+
html[lang="zh-CN"] h1 {
630+
line-height: 1.08;
631+
max-width: 10ch;
632+
}
633+
634+
html[lang="zh-CN"] .section-title {
635+
line-height: 1.26;
636+
max-width: 18ch;
637+
}
638+
639+
html[lang="zh-CN"] .quote {
640+
line-height: 1.34;
641+
max-width: 16ch;
642+
}
643+
567644
@media (prefers-reduced-motion: no-preference) {
568645
.hero-copy,
569646
.hero-stage,
@@ -673,6 +750,10 @@
673750
gap: 14px;
674751
}
675752

753+
html {
754+
--scroll-offset: 118px;
755+
}
756+
676757
nav a {
677758
padding-left: 0;
678759
padding-right: 0;
@@ -688,6 +769,7 @@
688769

689770
h1 {
690771
font-size: clamp(3rem, 18vw, 4.8rem);
772+
max-width: none;
691773
}
692774

693775
.diagram {

0 commit comments

Comments
 (0)