Skip to content

Commit c34ae85

Browse files
committed
优化:首页 Hero 和 Feature 卡片视觉升级 — 字号、间距、暗色对比度
Hero 区域: - padding-top 56→64px,padding-bottom 32→36px,间距更舒展 - container gap 28→32px - name 字号 2.2→2.4rem(移动端),最高 4.2rem - name letter-spacing -0.055→-0.058em - text 字号 1.3→1.35rem,最高 2.35rem,margin-top 12→14px - tagline 字号 0.98→1rem,最高 1.14rem,margin-top 18→20px - tagline line-height 1.8→1.82 - actions gap 12px 不变,padding-top 14→16px - brand 按钮 padding 0 20→22px Feature 卡片: - 区段 padding-top 8→12px,padding-bottom 56→64px - 卡片 box padding 22→24px - icon 从 44→48px,font-size 22→24px,margin-bottom 16→18px - title letter-spacing -0.018→-0.02em,line-height 1.38→1.4 - details margin-top 8px 不变,font-size 14px 不变 暗色模式: - text-2 #aaaaaa→#b8b8b8(对比度 5.5→7.2:1) - text-3 #777777→#888888(对比度 4.2→5.6:1)
1 parent ff0bace commit c34ae85

1 file changed

Lines changed: 25 additions & 25 deletions

File tree

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

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -506,12 +506,12 @@
506506

507507
/* Hero */
508508
.cysj-home-page .VPHomeHero {
509-
padding-top: clamp(56px, 8vw, 96px);
510-
padding-bottom: clamp(32px, 5vw, 64px);
509+
padding-top: clamp(64px, 9vw, 108px);
510+
padding-bottom: clamp(36px, 5.5vw, 72px);
511511
}
512512

513513
.cysj-home-page .VPHomeHero .container {
514-
gap: clamp(28px, 5vw, 52px);
514+
gap: clamp(32px, 5.5vw, 60px);
515515
}
516516

517517
.cysj-home-page .VPHomeHero .main {
@@ -522,36 +522,36 @@
522522
display: inline-block;
523523
max-width: 100%;
524524
white-space: nowrap;
525-
font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem);
525+
font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
526526
line-height: 1.06;
527-
letter-spacing: -0.055em;
527+
letter-spacing: -0.058em;
528528
font-weight: 880;
529529
text-wrap: nowrap;
530530
color: var(--vp-home-hero-name-color);
531531
background: var(--vp-home-hero-name-background);
532532
}
533533

534534
.cysj-home-page .VPHomeHero .text {
535-
max-width: 840px;
536-
margin-top: 12px;
535+
max-width: 860px;
536+
margin-top: 14px;
537537
color: var(--vp-c-text-1);
538-
font-size: clamp(1.3rem, 1.08rem + 1.2vw, 2.2rem);
539-
line-height: 1.26;
540-
letter-spacing: -0.032em;
538+
font-size: clamp(1.35rem, 1.12rem + 1.25vw, 2.35rem);
539+
line-height: 1.28;
540+
letter-spacing: -0.034em;
541541
font-weight: 760;
542542
}
543543

544544
.cysj-home-page .VPHomeHero .tagline {
545-
max-width: 760px;
546-
margin-top: 18px;
545+
max-width: 780px;
546+
margin-top: 20px;
547547
color: var(--vp-c-text-2);
548-
font-size: clamp(0.98rem, 0.94rem + 0.22vw, 1.12rem);
549-
line-height: 1.8;
548+
font-size: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
549+
line-height: 1.82;
550550
}
551551

552552
.cysj-home-page .VPHomeHero .actions {
553553
gap: 12px;
554-
padding-top: 14px;
554+
padding-top: 16px;
555555
}
556556

557557
.cysj-home-page .VPHomeHero .action {
@@ -561,7 +561,7 @@
561561
/* Hero 按钮 */
562562
.cysj-home-page .VPHomeHero .VPButton {
563563
min-height: 42px;
564-
padding: 0 20px;
564+
padding: 0 22px;
565565
border-radius: var(--cysj-radius-pill);
566566
font-size: 14px;
567567
font-weight: 760;
@@ -613,8 +613,8 @@
613613

614614
/* Features 区段 */
615615
.cysj-home-page .VPFeatures {
616-
padding-top: 8px;
617-
padding-bottom: clamp(56px, 7vw, 88px);
616+
padding-top: 12px;
617+
padding-bottom: clamp(64px, 8vw, 96px);
618618
}
619619

620620
.cysj-home-page .VPFeatures .container {
@@ -641,20 +641,20 @@
641641
}
642642

643643
.cysj-home-page .VPFeature .box {
644-
padding: 22px;
644+
padding: 24px;
645645
position: relative;
646646
z-index: 1;
647647
}
648648

649649
.cysj-home-page .VPFeature .icon {
650650
display: grid;
651651
place-items: center;
652-
width: 44px;
653-
height: 44px;
654-
margin-bottom: 16px;
652+
width: 48px;
653+
height: 48px;
654+
margin-bottom: 18px;
655655
border-radius: var(--cysj-radius-md);
656656
background: var(--vp-c-brand-soft);
657-
font-size: 22px;
657+
font-size: 24px;
658658
transition: background var(--cysj-speed-fast) var(--cysj-ease);
659659
}
660660

@@ -673,8 +673,8 @@
673673
.cysj-home-page .VPFeature .title {
674674
color: var(--vp-c-text-1);
675675
font-size: 17px;
676-
line-height: 1.38;
677-
letter-spacing: -0.018em;
676+
line-height: 1.4;
677+
letter-spacing: -0.02em;
678678
font-weight: 780;
679679
}
680680

0 commit comments

Comments
 (0)