 dsh
|
2c876f8776
|
彩蛋调整：文案改回原句，去掉悬停变色/下划线，那句话改回纯文本
按站主要求三处调整：
1) 文案改回原文
他还需要一个诗意的世界。 → 他还应该拥有诗意的世界。
（仍是 12 字，和最长那句 15 字的关系不变，固定字号不受影响）
2) 去掉悬停的变色与下划线
现在那句话悬停时完全不变化，保持纯排版。
删掉 .hero-quote-link 的两条规则，以及 reduced-motion 里对它的引用。
3) 那句话不再可点
去掉 h1 里的 <a>，文字恢复成纯文本。豆瓣链接只剩卡片里那一处。
交互全部落在署名上：悬停/聚焦淡入署名 → 点署名展开卡片 → 卡片里去豆瓣。
这样读的时候不会误触跳走。
署名按钮补了 aria-label（「查看这句话的出处：王小波《万寿寺》」），
因为现在它是唯一的交互元素，读屏用户需要知道它是干嘛的。
验证：pnpm build 退出码 0
- 新文案在 hero.*.js 里，旧文案无残留
- dist/index.html 里豆瓣链接只剩 1 处、h1 内为纯 <span>、无 hero-quote-link
- 产物 CSS 从 16 条 hero-quote 规则减到 14 条，
仍保留署名淡入、展开态常显、@media(hover:none) 手机常显
|
2026-09-16 18:24:49 +08:00 |
|
|
dsh
|
0f74467933
|
首屏彩蛋：那句话出自王小波《万寿寺》，可跳豆瓣
交互（默认完全看不出可点，保持留白）：
- 悬停/聚焦：整句话由墨黑转朱红 + 朱红细下划线，署名随之淡入
- 点那句话 → 直接去豆瓣人物页
- 点署名 → 展开一张极简作者卡片，卡片里也能去豆瓣
结构上的几个考量：
- 用 <h1><a> 而不是把 h1 变成链接：保住标题语义，点击热区只包住文字
而不是整行 1024px（点旁边空白也跳走会很怪）
- 光标 ::after 挂在 h1 上（链接外面），点那个闪烁的竖线不会触发跳转
- 署名占一行固定高度（2.25rem）平时透明，hover 才淡入 —— 空间一直留着，
所以展开卡片时下面的按钮不会往上跳
- 卡片是手风琴式展开（max-height 过渡），留在文档流里，不盖住下面的按钮
- @media (hover: none) 下署名常显 —— 否则手机上这个彩蛋永远看不到
- aria-expanded / aria-controls / aria-label + focus-within 可见焦点，
键盘和读屏用户都能用
- prefers-reduced-motion 下关掉所有过渡
出处核实：多个豆瓣《万寿寺》原文摘录页都收录这句，确认为王小波《万寿寺》。
豆瓣链接在 curl 下会跳 sec.douban.com（反爬），真实浏览器可正常打开。
验证：pnpm build 退出码 0；dist/index.html 里豆瓣链接出现 2 次、
h1 内为 <a>、署名与卡片均在、卡片默认 data-open="false"；
产物 CSS 含 16 条 hero-quote 规则（含 @media(hover:none)）
|
2026-09-16 18:03:32 +08:00 |
|
|
dsh
|
ee5ec50602
|
首屏打字机改为固定字号 + CSS 光标，并修掉首屏白屏
按 Firefly banner 的做法重做，三件事：
1) 字号固定，不随句子长度变
- 文案从 4 句（14/11/4/4 字，差 3.5 倍）压成 2 句长度接近的王小波
- 字号用 text-[clamp(1.125rem,5.6vw,4rem)]，只跟视口缩放
· 手机 390px → 21.8px（15 个字一行刚好放得下）
· 桌面 1280px → 64px（比 Firefly 的 3rem 更大更醒目）
- 容器 max-w-4xl(896px) → max-w-5xl(1024px)：15 字 × 64px = 954px，4xl 装不下
- 实测 320/360/390/430/640/768/1024/1280/1920 全部放得下，无溢出
2) 光标改成 CSS ::after
- 删掉整套运行时测量：measureRef / designRef / fontSize state /
fitFontSize / ResizeObserver / CURSOR_EM / CURSOR_GAP_PX / 两个隐藏量具
- hero.tsx 298 → 208 行，两个文件净减 52 行
- 顺带消除测量误差，光标跟着字号自动缩放
3) 去掉和打字机重复的 Flannery O'Connor 引语
另外修掉两个自己发现的问题：
- 【真 bug】首屏在 JS 加载前是隐形的
SSR 出来的包裹层带 opacity-0，要等 React hydrate 才变可见，
慢网络下第一屏是白屏、LCP 被拖后。改成 CSS 入场动画（.hero-enter），
SSR 即可见；顺带删掉只为它存在的 mounted state
- 【算错】第一版 clamp 封顶写了 4.25rem(68px)，但容器 896px 装不下
1013px，≥1280px 会溢出。一起修掉了
验证：pnpm build 退出码 0；dist 里已无 hero-cursor span、无隐藏量具、
无 Flannery 引语，h1 class 为 hero-typewriter + clamp 字号
|
2026-09-16 17:47:20 +08:00 |
|
|
dsh
|
61c39557df
|
首屏打字文案改成长句也不溢出：按实际字宽自适应字号
问题
- h1 是 whitespace-nowrap + 固定字号 text-[min(10.5vw,3rem)] sm:text-6xl
md:text-7xl lg:text-8xl。其实旧文案就已经临界：旧句「折腾 Linux 的乐趣」
约 9.5 字宽，390px 屏上设计字号 40.9px 需要 389px，而 px-6 之后只有 342px。
换成王小波那句（14 字）后溢出更明显。桌面端同理：lg 的 96px × 14 字
= 1344px，而容器 max-w-4xl 只有 896px。
做法
- 不再拍固定字号，改成按「这一句完整文本」的实际渲染宽度算
- 关键点：只会**缩小**，不会放大。上限取当前断点的设计字号 ——
短句（记录思考/总结生活）保持原来的视觉分量，只有放不下的长句让步
- 量的是完整句子不是当前已打出的部分，所以打字机逐字出现时不会重排
- 字号只在句子切换的那一刻变一次，那时 h1 是空的，看不出跳动；
另加了 300ms 的 font-size 过渡
- 光标从固定像素改成 em 单位（w-[0.08em] h-[0.9em]），跟着字号缩放
- 算字号时扣掉光标自身的占宽（ml-2 的 8px + 0.08em），否则右边会顶出去
实现细节
- 设计字号不写死在 JS 里：用一个带同样响应式类的隐藏探针读计算值，
断点逻辑仍然只在 class 里有一处
- 两个隐藏量具放在 h-0 + overflow-hidden 的绝对定位容器里，不参与布局、
不会撑出横向滚动条
- ResizeObserver 跟随容器变化；document.fonts.ready 后再量一次
（网络字体加载完字宽会变）
预期效果（含光标占位，实测可用宽度）
390px 设计 40.9px：14字 24.3px / 11字 30.9px / 4字 40.9px(保持)
430px 设计 45.1px：14字 27.2px / 11字 34.6px / 4字 45.1px(保持)
768px 设计 72.0px：14字 51.9px / 11字 65.9px / 4字 72.0px(保持)
1280px 设计 96.0px：14字 64.7px / 11字 82.2px / 4字 96.0px(保持)
长句刚好占满可用宽度，短句维持原设计大小，无一溢出。
注：hero.tsx 里同时带入了你自己改的那四句文案（王小波那句 + 记录思考 /
总结生活）。src/data/site.ts 里你的 tagline/description/keywords 改动我没有提交。
|
2026-09-15 12:50:09 +08:00 |
|
|
dsh
|
6f4cc13a20
|
初始提交：时之刃的小站
基于 VermilionVoid（朱墨留白）主题的个人博客。
- 站点配置集中在 src/data/site.ts 与 src/data/profile.ts
- 30 篇文章、8 条偶得、相册
- 评论使用自托管 twikoo
- 部署走 deploy.sh（rsync 到树莓派 + 云服务器）
|
2026-09-14 20:44:12 +08:00 |
|