彩蛋调整:文案改回原句,去掉悬停变色/下划线,那句话改回纯文本
按站主要求三处调整: 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 = [
|
const phrases = [
|
||||||
{ prefix: "一个人只拥有此生此世", highlight: "是不够的," },
|
{ prefix: "一个人只拥有此生此世", highlight: "是不够的," },
|
||||||
{ prefix: "他还需要一个", highlight: "诗意的世界。" },
|
{ prefix: "他还应该拥有", highlight: "诗意的世界。" },
|
||||||
]
|
]
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -166,27 +166,18 @@ export function Hero() {
|
|||||||
|
|
||||||
{/*
|
{/*
|
||||||
彩蛋:这句话出自王小波《万寿寺》。
|
彩蛋:这句话出自王小波《万寿寺》。
|
||||||
- 悬停/聚焦:整句话由墨黑变朱红,下方淡入署名(无 hover 的设备常显署名)
|
- 平时完全看不出可点,那句话本身不动(纯粹的排版)
|
||||||
- 点那句话 → 直接去豆瓣人物页
|
- 悬停/聚焦:下方淡入署名(无 hover 的设备常显署名)
|
||||||
- 点署名 → 展开一张极简卡片,卡片里也能去豆瓣
|
- 点署名 → 展开一张极简作者卡片,卡片里可以去豆瓣
|
||||||
|
|
||||||
结构上用 <h1><a> 而不是把 h1 本身变成链接:保住标题语义,
|
那句话故意不做成链接:点击文字不跳转,交互只落在署名上,
|
||||||
而且点击热区只包住文字,不会连整行空白一起可点。
|
免得读的时候误触跳走。
|
||||||
光标 ::after 挂在 h1 上(链接外面),点光标不会触发跳转。
|
|
||||||
*/}
|
*/}
|
||||||
<div className="hero-quote">
|
<div className="hero-quote">
|
||||||
<h1
|
<h1
|
||||||
className={`hero-typewriter font-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
|
className={`hero-typewriter font-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
|
||||||
>
|
>
|
||||||
<a
|
{renderText()}
|
||||||
className="hero-quote-link"
|
|
||||||
href={DOUBAN_URL}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
aria-label="这句话出自王小波《万寿寺》,点击查看他的豆瓣主页"
|
|
||||||
>
|
|
||||||
{renderText()}
|
|
||||||
</a>
|
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
{/* 固定高度的一行,内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */}
|
{/* 固定高度的一行,内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */}
|
||||||
@@ -197,6 +188,7 @@ export function Hero() {
|
|||||||
onClick={() => setCardOpen((open) => !open)}
|
onClick={() => setCardOpen((open) => !open)}
|
||||||
aria-expanded={cardOpen}
|
aria-expanded={cardOpen}
|
||||||
aria-controls="hero-quote-card"
|
aria-controls="hero-quote-card"
|
||||||
|
aria-label="查看这句话的出处:王小波《万寿寺》"
|
||||||
>
|
>
|
||||||
—— 王小波 ·《万寿寺》
|
—— 王小波 ·《万寿寺》
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"updatedAt": "2026-09-16T10:03:27.302Z",
|
"updatedAt": "2026-09-16T10:24:32.413Z",
|
||||||
"source": "weread",
|
"source": "weread",
|
||||||
"books": [
|
"books": [
|
||||||
{
|
{
|
||||||
|
|||||||
+2
-18
@@ -804,29 +804,14 @@ a.card-github:hover .github-logo {
|
|||||||
|
|
||||||
/* ——— 首屏彩蛋:那句话出自王小波《万寿寺》 ———
|
/* ——— 首屏彩蛋:那句话出自王小波《万寿寺》 ———
|
||||||
*
|
*
|
||||||
* 默认完全看不出可点。悬停/聚焦时整句话由墨黑转朱红、浮出细下划线,
|
* 那句话本身不做任何变化(不加下划线、不变色、不可点),保持纯排版。
|
||||||
* 署名随之淡入。点那句话直接去豆瓣;点署名展开一张极简作者卡片。
|
* 悬停/聚焦时只有署名淡入,点署名展开一张极简作者卡片。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.hero-quote {
|
.hero-quote {
|
||||||
position: relative;
|
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 才淡入。
|
/* 署名占一行固定高度:平时透明,hover 才淡入。
|
||||||
空间一直留着,所以展开卡片时下面的按钮不会往上跳。 */
|
空间一直留着,所以展开卡片时下面的按钮不会往上跳。 */
|
||||||
.hero-quote-credit-row {
|
.hero-quote-credit-row {
|
||||||
@@ -922,7 +907,6 @@ a.card-github:hover .github-logo {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.hero-quote-link,
|
|
||||||
.hero-quote-credit,
|
.hero-quote-credit,
|
||||||
.hero-quote-card {
|
.hero-quote-card {
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user