余白 UI：按设计稿模块化还原 + 站主自定义 CSS + 详情 neighbors + 静态缓存头

前端（新增 ui/yohaku/，各视图按 ui_id=vivid 分支渲染；classic 与后台不受影响） - 令牌层：设计稿数值原样落地，28 个 --v-* 为站主接口（自定义 CSS 可覆盖，放 @layer 让出优先级）；另加防线，中和 styles.css 裸选择器（h1 衬线 / body 行高 / 后台 .stat/.toolbar/.chip 卡片）漏进余白元素 - 顶栏（滚动收缩态）/ 阅读进度（顶部 2px + READ n%）/ 页脚 - 首页：hero（统计条）/ 筛选（类型分段 + 标签 chips + 搜索）/ 长文卡片与短文纸条 / 分页 / 作品展示区（3 件 + 查看所有，参照 diygod.cc）；面板栅格改 1.6fr 1fr 1fr 且高度自适应内容（标签云明显大一圈） - 文章页：三栏「纸」—— 左时间线（前后各两篇）/ 中纸张 / 右目录与阅读进度；短文详情不显示标题（h1 视觉隐藏保留无障碍） - 全部规则收敛在 html[data-ui='vivid'] 前缀下；无 !important 后端 - GET /api/posts/:slug 增 neighbors（前后各两篇，详情页侧栏时间线用） - SPA 缓存头：index.html no-cache，assets/ 带 hash 长期 immutable （此前无缓存头，浏览器会一直拿旧构建）其他 - 站主自定义 CSS 管线（customCss.js + ui/sections.js，按分区注入，仅 vivid） - 删除旧 vivid 覆盖层实现（VividNav/Hero/Footer/Timeline/Toc、ui/vivid.css） - 设计稿原型附于仓库根 index.html；作品表清掉外链 diygod.cc 的示例封面，改用本地占位图（public/covers/）
2026-09-23 15:37:42 +08:00
parent 3238175ef0
commit fbda293072
46 changed files with 4266 additions and 35 deletions
@@ -0,0 +1,182 @@
+/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
+ *
+ * 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
+ * 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
+ * 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
+ * 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
+ *
+ * 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
+ * html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
+ * chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
+ */
+
+
+/* ---- 设计稿分节：详情：三栏「纸」 ---- */
+/* ============================================================
+   详情：三栏「纸」· 左时间线 / 中纸张 / 右目录+进度
+   ============================================================ */
+html[data-ui='vivid'] .article-layout{
+  max-width:1100px;margin:0 auto;padding:36px 28px 60px;
+  display:grid;
+  grid-template-columns:140px minmax(0,1fr) 180px;
+  gap:32px;align-items:start;
+}
+@media (max-width:960px) {
+  html[data-ui='vivid'] .article-layout{grid-template-columns:1fr;gap:0}
+  html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r{display:none}
+  html[data-ui='vivid'] .progress-pct{display:none}
+}
+/* 左：时间线 */
+html[data-ui='vivid'] .side-l{position:sticky;top:80px;padding-top:8px}
+html[data-ui='vivid'] .tl{position:relative;padding-left:14px}
+html[data-ui='vivid'] .tl::before{
+  content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1.5px;
+  background:linear-gradient(180deg,var(--accent),transparent);
+  border-radius:2px;
+}
+html[data-ui='vivid'] .tl-item{
+  position:relative;padding:0 0 18px 0;font-size:12px;color:var(--muted);
+}
+html[data-ui='vivid'] .tl-item::before{
+  content:"";position:absolute;left:-14px;top:5px;
+  width:7px;height:7px;border-radius:50%;
+  background:var(--card);border:2px solid var(--accent);
+}
+html[data-ui='vivid'] .tl-item.now::before{
+  background:var(--accent);
+  box-shadow:0 0 0 4px var(--accent-soft);
+}
+html[data-ui='vivid'] .tl-item b{display:block;color:var(--soft);font-weight:700;font-size:12px}
+html[data-ui='vivid'] .tl-item.now b{color:var(--accent)}
+/* 中：纸张 */
+html[data-ui='vivid'] .paper{
+  background:var(--card);
+  border:1px solid var(--line);
+  border-radius:var(--radius-lg);
+  box-shadow:var(--shadow-lg);
+  padding:44px 48px 52px;
+  position:relative;
+  overflow:hidden;
+  animation:paperIn .7s var(--spring) both;
+}
+@keyframes paperIn {
+  html[data-ui='vivid'] from{opacity:0;transform:translateY(24px) scale(.985)}
+  html[data-ui='vivid'] to{opacity:1;transform:none}
+}
+/* 纸的纹理感：右上角一抹强调色 */
+html[data-ui='vivid'] .paper::before{
+  content:"";position:absolute;top:0;right:0;
+  width:120px;height:120px;
+  background:radial-gradient(circle at 100% 0,var(--accent-soft),transparent 70%);
+  pointer-events:none;
+}
+html[data-ui='vivid'] .paper .meta{
+  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
+  font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px;
+}
+html[data-ui='vivid'] .paper h1{
+  margin:0 0 20px;font-size:clamp(28px,4vw,40px);font-weight:800;
+  letter-spacing:-.03em;line-height:1.25;color:var(--ink);
+}
+html[data-ui='vivid'] .paper .dek{
+  margin:0 0 32px;font-size:17px;line-height:1.8;color:var(--soft);
+  padding-left:16px;border-left:3px solid var(--accent);
+  font-family:var(--serif);
+}
+html[data-ui='vivid'] .prose{font-size:16.5px;line-height:1.95;color:var(--text);max-width:var(--measure)}
+html[data-ui='vivid'] .prose p{margin:0 0 1.35em}
+html[data-ui='vivid'] .prose h2{
+  font-size:21px;font-weight:800;margin:2.2em 0 .8em;
+  letter-spacing:-.02em;color:var(--ink);
+  padding-bottom:10px;border-bottom:1px solid var(--line);
+}
+html[data-ui='vivid'] .prose a{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent-soft);transition:border-color .25s}
+html[data-ui='vivid'] .prose a:hover{border-bottom-color:var(--accent)}
+html[data-ui='vivid'] .prose code{
+  font-family:var(--mono);font-size:.88em;
+  background:var(--accent-soft);color:var(--accent);
+  padding:2px 7px;border-radius:6px;
+}
+html[data-ui='vivid'] .prose pre{
+  background:color-mix(in srgb,var(--ink) 92%,var(--accent));
+  color:#e8e8f0;padding:18px 20px;border-radius:12px;
+  overflow-x:auto;font-size:13.5px;line-height:1.7;
+  box-shadow:var(--shadow-lg);
+}
+html[data-ui='vivid'] .prose pre code{background:none;padding:0;color:inherit;font-size:inherit}
+html[data-ui='vivid'] .prose blockquote{
+  margin:1.8em 0;padding:16px 20px;
+  background:var(--accent-soft);
+  border-left:3px solid var(--accent);
+  border-radius:0 12px 12px 0;
+  font-family:var(--serif);font-size:1.05em;
+  color:var(--soft);font-style:italic;
+}
+html[data-ui='vivid'] .prose ul{padding-left:1.3em}
+html[data-ui='vivid'] .prose li{margin-bottom:.55em}
+html[data-ui='vivid'] .prose hr{border:0;border-top:1px dashed var(--line-strong);margin:2.5em 0}
+html[data-ui='vivid'] .paper .end{
+  margin-top:40px;padding-top:24px;border-top:1px dashed var(--line-strong);
+  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
+}
+html[data-ui='vivid'] .paper .end .lbl{font-size:12px;color:var(--muted);font-weight:700;margin-right:4px}
+html[data-ui='vivid'] .back{
+  display:inline-flex;align-items:center;gap:6px;
+  font-size:13px;font-weight:700;color:var(--accent);
+  margin-bottom:20px;padding:6px 0;
+  transition:gap .4s var(--spring);
+}
+html[data-ui='vivid'] .back:hover{gap:12px}
+/* 右：目录 + 进度 */
+html[data-ui='vivid'] .side-r{position:sticky;top:80px;padding-top:8px}
+html[data-ui='vivid'] .toc h4{
+  margin:0 0 12px;font-size:11px;font-weight:800;
+  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
+}
+html[data-ui='vivid'] .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
+html[data-ui='vivid'] .toc li{counter-increment:toc;margin-bottom:2px}
+html[data-ui='vivid'] .toc a{
+  display:flex;gap:8px;font-size:12.5px;color:var(--soft);
+  padding:6px 8px;border-radius:8px;line-height:1.4;
+  transition:all .4s var(--spring);
+}
+html[data-ui='vivid'] .toc a::before{
+  content:counter(toc,decimal-leading-zero);
+  font-family:var(--mono);font-size:10px;color:var(--muted);
+  flex:none;padding-top:2px;
+}
+html[data-ui='vivid'] .toc a:hover, html[data-ui='vivid'] .toc a.on{
+  background:var(--accent-soft);color:var(--accent);transform:translateX(4px);
+}
+html[data-ui='vivid'] .toc a:hover::before, html[data-ui='vivid'] .toc a.on::before{color:var(--accent)}
+html[data-ui='vivid'] .read-meter{
+  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
+}
+html[data-ui='vivid'] .read-meter .bar{
+  height:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);
+  border-radius:999px;overflow:hidden;
+}
+html[data-ui='vivid'] .read-meter .bar i{
+  display:block;height:100%;width:0%;
+  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
+  border-radius:999px;transition:width .15s linear;
+}
+html[data-ui='vivid'] .read-meter .num{
+  display:flex;justify-content:space-between;
+  font-family:var(--mono);font-size:11px;color:var(--muted);
+  margin-top:8px;font-weight:600;
+}
+html[data-ui='vivid'] .read-meter .num b{color:var(--accent)}
+
+/* 视觉隐藏但保留可访问性：短文详情用它放一个文档级 h1（站主要求短文不显示标题） */
+html[data-ui='vivid'] .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}