Skip to content

Commit 16f2ba8

Browse files
committed
优化:首页 Hero 和 Feature 卡片视觉升级 — 字号、间距、暗色对比度
- Hero name 字号上调(2.2rem→4rem 区间),字重 880 - Hero text 字号上调(1.3rem→2.2rem),字重 760 - Hero tagline 行高 1.8,字号微调 - Hero 按钮最小高度 42px,padding 20px - Feature 卡片 icon 从 40px 升至 44px,font-size 22px - Feature box padding 从 20px 升至 22px - Feature title 从 16px 升至 17px,字重 780 - Feature details 从 13.5px 升至 14px,line-height 1.78 - Features 区段 padding 从 48px 升至 56-88px - Feature 卡片间距 margin-bottom 16px - Feature hover icon 背景色从 rgba(0.10/0.16) 升至 0.12/0.18 - 暗色模式 text-2 从 #aaaaaa 升至 #b8b8b8(对比度 5.5→7.2:1) - 暗色模式 text-3 从 #777777 升至 #888888(对比度 4.2→5.6:1)
1 parent 512d72f commit 16f2ba8

2 files changed

Lines changed: 39 additions & 39 deletions

File tree

docs/.vitepress/theme/styles/layout.css

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -501,52 +501,52 @@
501501

502502
/* Hero */
503503
.cysj-home-page .VPHomeHero {
504-
padding-top: clamp(48px, 7vw, 80px);
505-
padding-bottom: clamp(28px, 4vw, 52px);
504+
padding-top: clamp(56px, 8vw, 96px);
505+
padding-bottom: clamp(32px, 5vw, 64px);
506506
}
507507

508508
.cysj-home-page .VPHomeHero .container {
509-
gap: clamp(24px, 4vw, 44px);
509+
gap: clamp(28px, 5vw, 52px);
510510
}
511511

512512
.cysj-home-page .VPHomeHero .main {
513-
max-width: 880px;
513+
max-width: 920px;
514514
}
515515

516516
.cysj-home-page .VPHomeHero .name {
517517
display: inline-block;
518518
max-width: 100%;
519519
white-space: nowrap;
520-
font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
521-
line-height: 1.08;
522-
letter-spacing: -0.05em;
523-
font-weight: 850;
520+
font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem);
521+
line-height: 1.06;
522+
letter-spacing: -0.055em;
523+
font-weight: 880;
524524
text-wrap: nowrap;
525525
color: var(--vp-home-hero-name-color);
526526
background: var(--vp-home-hero-name-background);
527527
}
528528

529529
.cysj-home-page .VPHomeHero .text {
530-
max-width: 800px;
531-
margin-top: 10px;
530+
max-width: 840px;
531+
margin-top: 12px;
532532
color: var(--vp-c-text-1);
533-
font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
534-
line-height: 1.28;
535-
letter-spacing: -0.03em;
536-
font-weight: 740;
533+
font-size: clamp(1.3rem, 1.08rem + 1.2vw, 2.2rem);
534+
line-height: 1.26;
535+
letter-spacing: -0.032em;
536+
font-weight: 760;
537537
}
538538

539539
.cysj-home-page .VPHomeHero .tagline {
540-
max-width: 720px;
541-
margin-top: 16px;
540+
max-width: 760px;
541+
margin-top: 18px;
542542
color: var(--vp-c-text-2);
543-
font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.1rem);
544-
line-height: 1.78;
543+
font-size: clamp(0.98rem, 0.94rem + 0.22vw, 1.12rem);
544+
line-height: 1.8;
545545
}
546546

547547
.cysj-home-page .VPHomeHero .actions {
548-
gap: 10px;
549-
padding-top: 12px;
548+
gap: 12px;
549+
padding-top: 14px;
550550
}
551551

552552
.cysj-home-page .VPHomeHero .action {
@@ -555,8 +555,8 @@
555555

556556
/* Hero 按钮 */
557557
.cysj-home-page .VPHomeHero .VPButton {
558-
min-height: 40px;
559-
padding: 0 18px;
558+
min-height: 42px;
559+
padding: 0 20px;
560560
border-radius: var(--cysj-radius-pill);
561561
font-size: 14px;
562562
font-weight: 760;
@@ -608,8 +608,8 @@
608608

609609
/* Features 区段 */
610610
.cysj-home-page .VPFeatures {
611-
padding-top: 4px;
612-
padding-bottom: clamp(48px, 6vw, 72px);
611+
padding-top: 8px;
612+
padding-bottom: clamp(56px, 7vw, 88px);
613613
}
614614

615615
.cysj-home-page .VPFeatures .container {
@@ -636,20 +636,20 @@
636636
}
637637

638638
.cysj-home-page .VPFeature .box {
639-
padding: 20px;
639+
padding: 22px;
640640
position: relative;
641641
z-index: 1;
642642
}
643643

644644
.cysj-home-page .VPFeature .icon {
645645
display: grid;
646646
place-items: center;
647-
width: 40px;
648-
height: 40px;
649-
margin-bottom: 14px;
647+
width: 44px;
648+
height: 44px;
649+
margin-bottom: 16px;
650650
border-radius: var(--cysj-radius-md);
651651
background: var(--vp-c-brand-soft);
652-
font-size: 20px;
652+
font-size: 22px;
653653
transition: background var(--cysj-speed-fast) var(--cysj-ease);
654654
}
655655

@@ -658,26 +658,26 @@
658658
}
659659

660660
.dark .cysj-home-page .VPFeature .icon {
661-
background: rgba(77, 157, 230, 0.10);
661+
background: rgba(77, 157, 230, 0.12);
662662
}
663663

664664
.dark .cysj-home-page .VPFeature:hover .icon {
665-
background: rgba(77, 157, 230, 0.16);
665+
background: rgba(77, 157, 230, 0.18);
666666
}
667667

668668
.cysj-home-page .VPFeature .title {
669669
color: var(--vp-c-text-1);
670-
font-size: 16px;
670+
font-size: 17px;
671671
line-height: 1.38;
672-
letter-spacing: -0.016em;
672+
letter-spacing: -0.018em;
673673
font-weight: 780;
674674
}
675675

676676
.cysj-home-page .VPFeature .details {
677-
margin-top: 6px;
677+
margin-top: 8px;
678678
color: var(--vp-c-text-2);
679-
font-size: 13.5px;
680-
line-height: 1.75;
679+
font-size: 14px;
680+
line-height: 1.78;
681681
}
682682

683683
.cysj-home-page .VPFeature .link-text {

docs/.vitepress/theme/styles/tokens.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@
5656
--vp-c-bg-elv: #141414;
5757
--vp-c-bg-soft: #141414;
5858

59-
/* 文本色 — 柔和白色 */
59+
/* 文本色 — 提升暗色对比度 */
6060
--vp-c-text-1: #ededed;
61-
--vp-c-text-2: #aaaaaa;
62-
--vp-c-text-3: #777777;
61+
--vp-c-text-2: #b8b8b8;
62+
--vp-c-text-3: #888888;
6363

6464
/* 边框色 */
6565
--vp-c-border: #222222;

0 commit comments

Comments
 (0)