Skip to content

Commit 442d64b

Browse files
author
Thouen
committed
docs(homepage): 整体抛光
- 标题流光恢复:220% size + 14s 横向流光循环,使用 ease-in-out alternate - 修复信号条 hover reflow 抖动:移除 padding-left 过渡,改用 ::before 宽度扫光 - 同步清理 focus-visible/reduced-motion 块中失效的 padding 强制值 - CTA 按钮组间距 12px->14px,加 4px 顶部 margin - 首屏沉浸:hero padding 上 56->64 下 40->48,更从容 - reduced-motion 下停止标题流光动画
1 parent 3c8044d commit 442d64b

1 file changed

Lines changed: 15 additions & 14 deletions

File tree

docs/assets/style.css

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2953,7 +2953,7 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
29532953
.tk-hero {
29542954
position: relative;
29552955
width: 100%;
2956-
padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
2956+
padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 72px);
29572957
overflow: visible;
29582958
}
29592959

@@ -3071,7 +3071,7 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
30713071
.tk-tag::before { content: "·"; color: var(--gold); margin-right: 8px; }
30723072

30733073
/* actions */
3074-
.tk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
3074+
.tk-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
30753075

30763076
.tk-btn {
30773077
display: inline-flex;
@@ -3606,7 +3606,7 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
36063606
padding: 20px 24px;
36073607
border-bottom: 1px solid var(--gold-line);
36083608
overflow: hidden;
3609-
transition: background var(--transition-base), padding var(--transition-base);
3609+
transition: background var(--transition-base);
36103610
}
36113611
.tk-signal::before {
36123612
content: "";
@@ -3616,7 +3616,6 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
36163616
background: var(--gold-bg);
36173617
transition: width var(--transition-slow);
36183618
}
3619-
.tk-signal:hover { padding-left: 34px; }
36203619
.tk-signal:hover::before { width: 100%; }
36213620

36223621
.tk-signal__idx {
@@ -3762,19 +3761,25 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
37623761
/* title 流光梯度(受支持时) */
37633762
@supports (-webkit-background-clip: text) or (background-clip: text) {
37643763
.tk-hero__title {
3765-
background: linear-gradient(120deg,
3764+
background: linear-gradient(110deg,
37663765
var(--text) 0%,
3767-
var(--text) 35%,
3768-
var(--gold-light) 70%,
3766+
var(--text) 28%,
3767+
var(--gold-light) 60%,
37693768
var(--gold) 100%);
3770-
background-size: 100% 100%;
3769+
background-size: 220% 100%;
37713770
background-position: 0 0;
3771+
background-repeat: no-repeat;
37723772
-webkit-background-clip: text;
37733773
background-clip: text;
37743774
-webkit-text-fill-color: transparent;
37753775
color: transparent;
37763776
-webkit-font-smoothing: antialiased;
37773777
-moz-osx-font-smoothing: grayscale;
3778+
animation: tk-title-flow 14s ease-in-out infinite alternate;
3779+
}
3780+
@keyframes tk-title-flow {
3781+
0% { background-position: 0% 0%; }
3782+
100% { background-position: 45% 0%; }
37783783
}
37793784
}
37803785

@@ -3956,7 +3961,7 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
39563961
box-shadow: 0 0 0 3px var(--gold-glow);
39573962
border-color: var(--gold-bright);
39583963
}
3959-
.tk-signal:focus-visible { padding-left: 34px; }
3964+
.tk-signal:focus-visible { padding-left: 24px; }
39603965

39613966
/* ---------- HUD 读数精致化 ---------- */
39623967
.tk-hud {
@@ -4034,9 +4039,6 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
40344039
.tk-signal::before {
40354040
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
40364041
}
4037-
.tk-signal:hover {
4038-
padding-left: 40px;
4039-
}
40404042
.tk-signal__go {
40414043
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
40424044
color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
@@ -4089,15 +4091,14 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
40894091
transition: none !important;
40904092
}
40914093
.tk-register__row:hover { transform: none !important; }
4092-
.tk-signal:hover { padding-left: 24px !important; }
40934094
.tk-signal:hover .tk-signal__go { transform: none !important; text-shadow: none !important; }
40944095
.tk-hud__val--ok::before { animation: none !important; }
40954096
.tk-btn--primary { box-shadow: none !important; }
4097+
.tk-hero__title { animation: none !important; }
40964098
}
40974099

40984100
/* ---------- 移动端打磨 ---------- */
40994101
@media (max-width: 768px) {
41004102
.tk-hud { display: none; }
41014103
.tk-hero__ruler { display: none; }
4102-
.tk-signal:hover { padding-left: 24px; }
41034104
}

0 commit comments

Comments
 (0)