彩蛋调整:文案改回原句,去掉悬停变色/下划线,那句话改回纯文本
按站主要求三处调整: 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) 手机常显
This commit is contained in:
+8
-16
@@ -14,7 +14,7 @@ const DOUBAN_URL = "https://www.douban.com/personage/27480512/"
|
||||
|
||||
const phrases = [
|
||||
{ prefix: "一个人只拥有此生此世", highlight: "是不够的," },
|
||||
{ prefix: "他还需要一个", highlight: "诗意的世界。" },
|
||||
{ prefix: "他还应该拥有", highlight: "诗意的世界。" },
|
||||
]
|
||||
|
||||
/**
|
||||
@@ -166,27 +166,18 @@ export function Hero() {
|
||||
|
||||
{/*
|
||||
彩蛋:这句话出自王小波《万寿寺》。
|
||||
- 悬停/聚焦:整句话由墨黑变朱红,下方淡入署名(无 hover 的设备常显署名)
|
||||
- 点那句话 → 直接去豆瓣人物页
|
||||
- 点署名 → 展开一张极简卡片,卡片里也能去豆瓣
|
||||
- 平时完全看不出可点,那句话本身不动(纯粹的排版)
|
||||
- 悬停/聚焦:下方淡入署名(无 hover 的设备常显署名)
|
||||
- 点署名 → 展开一张极简作者卡片,卡片里可以去豆瓣
|
||||
|
||||
结构上用 <h1><a> 而不是把 h1 本身变成链接:保住标题语义,
|
||||
而且点击热区只包住文字,不会连整行空白一起可点。
|
||||
光标 ::after 挂在 h1 上(链接外面),点光标不会触发跳转。
|
||||
那句话故意不做成链接:点击文字不跳转,交互只落在署名上,
|
||||
免得读的时候误触跳走。
|
||||
*/}
|
||||
<div className="hero-quote">
|
||||
<h1
|
||||
className={`hero-typewriter font-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
|
||||
>
|
||||
<a
|
||||
className="hero-quote-link"
|
||||
href={DOUBAN_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="这句话出自王小波《万寿寺》,点击查看他的豆瓣主页"
|
||||
>
|
||||
{renderText()}
|
||||
</a>
|
||||
{renderText()}
|
||||
</h1>
|
||||
|
||||
{/* 固定高度的一行,内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */}
|
||||
@@ -197,6 +188,7 @@ export function Hero() {
|
||||
onClick={() => setCardOpen((open) => !open)}
|
||||
aria-expanded={cardOpen}
|
||||
aria-controls="hero-quote-card"
|
||||
aria-label="查看这句话的出处:王小波《万寿寺》"
|
||||
>
|
||||
—— 王小波 ·《万寿寺》
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user