彩蛋调整:文案改回原句,去掉悬停变色/下划线,那句话改回纯文本

按站主要求三处调整:

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:
dsh
2026-09-16 18:24:49 +08:00
parent 0f74467933
commit 2c876f8776
3 changed files with 11 additions and 35 deletions
+8 -16
View File
@@ -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>
+1 -1
View File
@@ -1,5 +1,5 @@
{
"updatedAt": "2026-09-16T10:03:27.302Z",
"updatedAt": "2026-09-16T10:24:32.413Z",
"source": "weread",
"books": [
{
+2 -18
View File
@@ -804,29 +804,14 @@ a.card-github:hover .github-logo {
/* ——— 首屏彩蛋:那句话出自王小波《万寿寺》 ———
*
* 默认完全看不出可点。悬停/聚焦时整句话由墨黑转朱红、浮出细下划线,
* 署名随之淡入。点那句话直接去豆瓣;点署名展开一张极简作者卡片。
* 那句话本身不做任何变化(不加下划线、不变色、不可点),保持纯排版。
* 悬停/聚焦时只有署名淡入,点署名展开一张极简作者卡片。
*/
.hero-quote {
position: relative;
}
.hero-quote-link {
color: inherit;
text-decoration: none;
transition: color 240ms ease;
}
.hero-quote:hover .hero-quote-link,
.hero-quote:focus-within .hero-quote-link {
color: var(--primary);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.14em;
text-decoration-color: var(--primary);
}
/* 署名占一行固定高度:平时透明,hover 才淡入。
空间一直留着,所以展开卡片时下面的按钮不会往上跳。 */
.hero-quote-credit-row {
@@ -922,7 +907,6 @@ a.card-github:hover .github-logo {
}
@media (prefers-reduced-motion: reduce) {
.hero-quote-link,
.hero-quote-credit,
.hero-quote-card {
transition: none;