feat(motion): 动效层三件——背景辉光/入场/心跳,页脚撤双入口
- 背景鼠标辉光:ink 色 4% 径向渐变跟随(pointer:fine×非
reduced-motion 才有 JS,raf 节流 document 级监听 VT 存活)——
丙灰阶语言的"活背景",触屏/减动效自动隐藏
- 正文入场 rise-in 12px/0.4s(VT 换页自然重放)+ 列表行悬停
1px 微浮;全量 prefers-reduced-motion 豁免
- 首页"最近心跳":构建期拉 blog 仓最新 commit(gitea API 8s 超时
静默降级),脉冲点+相对时长——本站自己的脉搏
- 页脚撤「装备/制作」入口(页面保留,用户决策:只删入口)
- E2E 加固:g-chords 修好后 location.href 与 goto 竞态(en 页弦
导航迟到提交打断 goto)——中断重试模式
- 过程教训:str.replace 静默无操作再犯(锚点瞄错组件文件)——
脚本未进产物却报"全落地",replace 必须 assert 配对 grep 产物
验证: --mx 鼠标双跳 15.6% 实测跟随;E2E 31/31 PASS(竞态重试后
确定性);构建 34 页 exit 0
Spec: none (动效层+页脚撤口+测试加固,车道级交付)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
0b6524f53c
commit
363cc616f7
6 files changed
+110
-5
No files matched your search
@@ -6,6 +6,7 @@ import IdCard from '../components/IdCard.astro';
|
||||
import PostList from '../components/PostList.astro';
|
||||
import ProjectWall from '../components/geek/ProjectWall.astro';
|
||||
import Heatmap from '../components/geek/Heatmap.astro';
|
||||
import { fetchHeartbeat, agoZh } from '../lib/heartbeat';
|
||||
import { t } from '../i18n/ui';
|
||||
|
||||
const posts = (await getCollection('posts', ({ data }) => !data.draft && !data.tags.includes('hidden'))).sort(
|
||||
@@ -13,6 +14,7 @@ const posts = (await getCollection('posts', ({ data }) => !data.draft && !data.t
|
||||
);
|
||||
// 最新影像取集合前 4 张;照片时间序由照片管线(exif 车道)治理,此处只裁切
|
||||
const photos = (await getCollection('photos')).slice(0, 4);
|
||||
const heartbeat = await fetchHeartbeat();
|
||||
---
|
||||
|
||||
<BaseLayout title="wait4x">
|
||||
@@ -99,9 +101,31 @@ const photos = (await getCollection('photos')).slice(0, 4);
|
||||
}}
|
||||
/>
|
||||
<ProjectWall />
|
||||
{heartbeat && (
|
||||
<p class="heartbeat" aria-label="最近心跳">
|
||||
<span class="beat-dot" aria-hidden="true"></span>
|
||||
最近心跳:{agoZh(heartbeat.when)} · {heartbeat.msg}
|
||||
</p>
|
||||
)}
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.heartbeat {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
color: var(--ink-3);
|
||||
margin-top: var(--space-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.beat-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--ink-2);
|
||||
animation: beat 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes beat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .beat-dot { animation: none; } }
|
||||
.socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in new issue
Block a user