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
..
2026-09-16 18:03:32 +08:00
2026-09-15 19:53:43 +08:00
2026-09-16 18:03:32 +08:00
2026-09-14 20:44:12 +08:00
2026-09-15 12:45:24 +08:00
2026-09-15 10:51:50 +08:00
2026-09-15 11:11:32 +08:00
2026-09-14 20:44:12 +08:00
2026-09-14 20:44:12 +08:00
2026-09-16 18:03:32 +08:00
2026-09-14 20:44:12 +08:00