/* ==========================================================
life-reading-responsive.css — 阅读 (Reading) 响应式 + 覆盖节
------------------------------------------------------------
加载序: CSS 第 30 / 37 (index.html 第 30 个 ; 后加载的覆盖先加载的)
★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
(单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
[Backlog #145 · 2026-10-01] 由 life-reading.css 物理迁出。
拆的是什么:
life-reading.css 原本把「基础样式」与「响应式 / 后写覆盖」混在一个文件里,
越往后堆的越像补丁 —— §9 (#141 左 3 右 2)、§10 (#144 单栏铺满) 都是
为了压住前文基础规则而后写的。本轮沿 section 边界把后半段整体切出来:
life-reading.css §1-§5 基础 (筛选/计数/两栏/分组/网格/书卡; #200 删原 §4 后前移)
life-reading-responsive.css §7 + §9 + §10 响应式与覆盖 ← 本文件
加载顺序 (由 index.html 的两个 控制, 本文件必须在基础文件之后):
18. life-reading.css (基础)
19. life-reading-responsive.css (响应式 + 覆盖) ← 本文件
★ CORS 铁律 (与 #26/#85/#140 data 解耦同一原则, 用户 2026-10-01 明确点名):
- **禁止 @import**: CSS 的 @import 在 file:// 下是子资源加载, 行为与
ES Module 一样受 Origin=null 限制, 且失败时静默不报错, 整段样式丢失。
- **必须用两个独立的 标签**, 靠 index.html 的
标签顺序保证「基础 → 覆盖」, 同目录静态 CSS 在 file:// 下直接可读。
- 本站必须双击 index.html 也能正常打开, 任何解耦方案都要过这一关。
- 验证必须**双协议**跑: 同一个 Playwright 流程分别开 http:// 与 file://,
断言正则覆盖 CORS|Access-Control|origin|blocked|net::ERR|Failed to load。
本文件包含 (原 life-reading.css 的节号保持不变, 便于按号回查):
7. 响应式 (≤1024 / ≤900 / ≤600 / ≤420 四档)
9. #141 两栏卡片密度对齐 (左 3 列 / 右 2 列)
10. #144 单栏铺满 (只剩一栏时不分左右)
========================================================== */
/* ==========================================================
7. 响应式
========================================================== */
/* 7.1 ≤1024px: 两栏网格 2 列 → 书籍卡 1 列 (栏本身太窄)
[Backlog #137] 在读区横跨整宽, 降列节奏跟分类区不同:
4 → 3 列 (分类区此时已 1 列, 在读区还能再撑两列) */
@media (max-width: 1024px) {
.reading-books-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.reading-books-grid--now {
grid-template-columns: repeat(3, 1fr);
}
.reading-col--nonfiction,
.reading-col--fiction {
flex: 1 1 0;
}
}
/* 7.2 ≤900px: 两栏 → 单栏纵向堆叠 (非虚构在上, 虚构在下) */
@media (max-width: 900px) {
.reading-cols {
flex-direction: column;
gap: 28px;
}
.reading-col {
width: 100%;
}
.reading-books-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 7.3 ≤600px: 筛选栏 label 独占一行 + 书籍卡 1 列
[Backlog #137] 在读区同步降到 2 列 (它比分类区多一列空间, 不跟着归 1 列) */
@media (max-width: 600px) {
.reading-filter-row {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.reading-filter-label {
min-width: 0;
padding-top: 0;
}
.reading-books-grid {
grid-template-columns: 1fr;
}
.reading-books-grid--now {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
.reading-reading-now {
padding: var(--space-6) var(--space-6) 14px;
}
.reading-book-title-zh {
font-size: var(--type-body);
}
.reading-col-title-zh {
font-size: var(--type-body);
}
}
/* [Backlog #137] ≤420px: 在读区最终降到 1 列 (极窄屏 2 列会挤) */
@media (max-width: 420px) {
.reading-books-grid--now {
grid-template-columns: 1fr;
}
.reading-reading-now__title-en {
font-size:var(--type-micro-sm);
}
}
/* 7.4 减弱动画: 停掉在读 pill 脉动 */
@media (prefers-reduced-motion: reduce) {
.reading-book-card--reading .reading-book-status::before {
animation: none;
}
.reading-group-head::before {
transition: none;
}
.reading-book-card,
.reading-chip {
transition: none;
}
}
/* ==========================================================
9. [Backlog #141] 两栏卡片密度对齐 —— 左 3 列 / 右 2 列
------------------------------------------------------------
改版前的问题 (1366px 视口实测):
左栏 (非虚构) 576px 宽, 卡片网格 repeat(2, 1fr) -> 卡片 279px
右栏 (虚构) 426px 宽, 卡片网格 repeat(2, 1fr) -> 卡片 204px
**左右每行都是 2 张**, 左栏"更宽"完全没有转化成每行多放一张,
反而造成右栏卡片只有左栏的 73%, 显得窄而挤。
本节的做法 (用户选定: 左 3 列 / 右 2 列, 卡片宽度接近):
左栏 576px / 3 列 -> 卡片约 183px
右栏 426px / 2 列 -> 卡片约 204px
两栏卡片宽度差仅 11%, 视觉上"接近等宽";
同时左栏每行 3 张、右栏每行 2 张, 左栏作为主体真正多放了一张。
为什么用**作用域选择器**而不是给网格加 class:
.reading-col--nonfiction .reading-books-grid
作用域已足够精确, **不需要改 life-reading.js** 去加 className,
也不需要碰渲染层 —— 这是纯 CSS 改动, 零 JS 影响。
同时天然排除 --now (在读区横跨整宽, 不在两栏内)。
层级说明: 本节放在文件**末尾**是有意的 ——
§3 定义了两栏比例, §6 定义了基础 2 列, §7 是响应式。
同等特异度下后写的规则胜出, 所以必须置于 §6/§7 之后才能覆盖。
========================================================== */
@media (min-width: 1025px) {
.reading-col--nonfiction .reading-books-grid {
grid-template-columns: repeat(3, 1fr);
}
/* 右栏显式写 2 列: 明确表达"这是有意的不同", 而不是靠继承默认值,
避免将来有人改 §6 基础列数时无意中把右栏一起改掉 */
.reading-col--fiction .reading-books-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 1024px 及以下: §7.1 已把两栏网格统一降为 1 列 (两栏并列时栏宽不足),
此时上面的 3/2 列规则不适用, 故用 max-width 反向覆盖回 1 列保证确定性。
900px 以下两栏已纵向堆叠成单栏, 由 §7.2 接管为 2 列。 */
@media (min-width: 901px) and (max-width: 1024px) {
.reading-col--nonfiction .reading-books-grid,
.reading-col--fiction .reading-books-grid {
grid-template-columns: 1fr;
}
}
/* ≤900px 两栏已堆叠为单栏, 左右不再有"宽窄"之分, 统一 2 列。
范围收窄到 601-900px: 600px 及以下由 §7.3 接管为 1 列 (极窄屏 2 列会挤),
本节必须让位, 否则会把 §7.3 的 1 列反向覆盖回 2 列。 */
@media (min-width: 601px) and (max-width: 900px) {
.reading-col--nonfiction .reading-books-grid,
.reading-col--fiction .reading-books-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================
10. [Backlog #144] 单栏铺满 —— 只剩一栏时不分左右
------------------------------------------------------------
改前的问题 (用户在 TYPE=非虚构 的截图里指出):
筛选到单一类型时, 虚构栏仍占 40% 宽度, 显示一个
"没有符合当前筛选的书目" 空盒; 而非虚构的书卡被挤在 60% 里。
换言之, 有一半版面在空转。
本节的做法:
JS (renderBooks) 按**内容**判定哪一栏真的没有书, 给 .reading-cols
加 reading-cols--solo-nf / --solo-fi; 本节负责隐藏空栏 + 让剩下
那栏吃满整宽 + 把卡片列数提到 5 列 (原左栏 3 列只用到 60% 宽)。
为什么按**内容**而不是按 TYPE 筛选值:
用户原话是"只选择了虚构/非虚构之中的一种", 但选「科幻」「历史」
这类**纯单一类型**的分类时, TYPE 仍是 ALL, 左栏一样是空的 ——
只看 TYPE 会漏掉这一半场景。按内容判定一次覆盖两种触发路径。
层级: 本节同样置于文件末尾 (§10 在 §6/§7/§9 之后),
§9 的列数规则特异度与本节相同 (都是两个类选择器), 靠后写胜出。
两栏都空 (筛选无结果) 时 JS 不加任何 solo class,
保持原样 —— 两边各显示一个空状态, 这正是用户需要的提示。
========================================================== */
/* 空栏整块隐藏 (含栏头 "虚构 FICTION" 与空状态盒)。
这一条不限宽度: ≤900px 纵向堆叠时, 空栏的栏头同样该消失。
同等特异度下后写胜出, 因此能压住 §3 基础规则。 */
.reading-cols--solo-nf .reading-col--fiction,
.reading-cols--solo-fi .reading-col--nonfiction {
display: none;
}
/* 留下的那栏吃满整宽。
**必须限定 ≥901px**: ≤900px 时 §7.2 把 .reading-cols 改成
flex-direction: column, 此时 flex-basis 作用于**高度**,
`flex: 1 1 100%` 会让单栏去撑 100% 容器高, 把堆叠布局撑坏。 */
@media (min-width: 901px) {
.reading-cols--solo-nf .reading-col--nonfiction,
.reading-cols--solo-fi .reading-col--fiction {
flex: 1 1 100%;
}
}
/* 列数: 整宽约 1050px, 5 列 → 卡片约 197px, 与两栏模式下右栏的 204px
接近, 卡片尺寸保持熟悉感, 同时一行多放两张。 */
@media (min-width: 1025px) {
.reading-cols--solo-nf .reading-books-grid,
.reading-cols--solo-fi .reading-books-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* 901-1024px: §9 原本给两栏 1 列, 单栏铺满后空间够, 提到 3 列。
≤900px 不在此节管辖 —— 那里容器本就是整宽, §7.2 的 2 列 / §7.3 的 1 列
直接生效, 只需上面那条 display:none 隐藏空栏即可。 */
@media (min-width: 901px) and (max-width: 1024px) {
.reading-cols--solo-nf .reading-books-grid,
.reading-cols--solo-fi .reading-books-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================
11. 宽屏密度 (用户反馈: "每行显示的内容太少了")
------------------------------------------------------------
用户原话: "reading现在每一行显示的内容都太少了。
宽屏下可以每行多显示一点, 每张卡片可以小一点"
真正的瓶颈不是列数, 而是 **容器宽度上限**:
.collage-modal-container 是 86vw / max-width 1080px (§14), 在 1920px 屏上只用到 1080px,
再切成左右两栏, 每栏只剩 ~500px —— §9 即使给到 3/2 列,
卡片也只有 ~157px, 筛选之上的空白被宽度限制吃掉了。
本节做三件事 (全部限定 #reading-modal, 不动其他 3 个模态):
1. 容器放宽: max-width 1080 -> 1440px, width 86vw -> 94vw (仅 >=1200px)
2. 列数: 非虚构 3 -> 4, 虚构 2 -> 3 (一行 5 -> 7 张)
3. 在读区 (--now) 4 -> 6 列; 间距 14 -> 10px, 卡片内容密度同步收
为何放在 1200px 而不是既有的 1025px 断点:
§9 的 3/2 列是在 1080px 宽度下校验过的 (卡片 ~157px / ~204px),
宽屏时容器放宽到 1440px, 每栏 ~690px, 4 列 等于 ~160px ——
与原设计卡片宽度一致, 不会因为加列数而把字挤混。
1200px 以下保留 §9 原有行为, 不做无意义的全屏变动。
§9 的 solo 模式 (只剩一栏时 5 列) 不受影响: 那时容器本就只有一栏宽,
故不再加列 —— 留给 §9 的 5 列, 否则会被本节的 4/3 反向覆盖。
========================================================== */
@media (min-width: 1200px) {
#reading-modal .collage-modal-container {
width: 94vw !important;
max-width: 1440px !important;
}
#reading-modal .reading-books-grid {
gap: 10px;
}
#reading-modal .reading-col--nonfiction .reading-books-grid {
grid-template-columns: repeat(4, 1fr);
}
#reading-modal .reading-col--fiction .reading-books-grid {
grid-template-columns: repeat(3, 1fr);
}
#reading-modal .reading-books-grid--now {
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
#reading-modal .reading-book-card {
padding: 11px var(--space-6) var(--space-6);
}
#reading-modal .reading-col-head {
margin-bottom: 8px;
}
/* [Backlog #175] 原此处并列的 .reading-section-title 随「社科」层级删除。 */
}