桌面端隐藏侧栏、图像，浮动 ✕ 退出 — Quartz 内置 ReaderMode + 定制 CSS
阅读模式基于 Quartz 内置 ReaderMode.tsx 组件，但交互逻辑经历了三次迭代才稳定：
:root[reader-mode="on"] {
@media all and ($desktop) {
.sidebar.left,
.sidebar.right {
opacity: 0; // 保留占位，不改变网格
pointer-events: none; // 禁用交互
transition: opacity 0.25s ease;
}
}
.center img, .center video, .center iframe, .center .mermaid {
display: none; // 隐藏媒体，纯文字阅读
}
}
// 浮动退出按钮
.readermode-exit {
position: fixed; top: 1rem; right: 1rem;
z-index: 200;
// 悬停高亮...
}
// 平板/手机隐藏（仅桌面 ≥1200px 支持）
@media all and (max-width: 1200px) {
.readermode-exit, .readermode { display: none; }
}// 切换
// 进入时创建浮动 ✕ 按钮，退出时移除
// SPA 导航时保持状态| 决策 | 选择 | 原因 |
|---|---|---|
| 隐藏方式 | opacity: 0 | 保网格占位，避免内容跳动。grid collapse 会导致居中列突然变宽 |
| 退出机制 | 固定浮动 ✕ 按钮 | 侧栏不可见后 hover 无法触发，必须有独立退出路径 |
| 适用范围 | 仅桌面 ≥1200px | 平板/手机上侧栏不同布局，hide 后 layout 破坏。直接隐藏按钮 |
| 媒体隐藏 | display: none | 阅读模式应该只显示文字，图片视频干扰专注 |
| SPA 导航 | 监听 nav 事件 | 切换页面后保持阅读模式状态，不会意外退出 |
grid-template-columns: 0 1fr 0 看起来更「干净」，但会导致内容区突然撑满全宽，文字行宽失控，阅读体验反而更差。opacity: 0 保留了布局稳定性。
| 文件 | 作用 |
|---|---|
quartz/components/ReaderMode.tsx | Quartz 内置，负责挂载 inline 脚本 |
quartz/components/scripts/readermode.inline.ts | Quartz 内置（定制了浮动退出按钮逻辑） |
quartz/styles/custom.scss | ★ 核心定制 — opacity 隐藏、浮动按钮、断点控制 |
quartz.layout.ts | 注册 ReaderMode 到侧边栏工具栏 |