余白 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/）
This commit is contained in:
Sakurasan
@@ -0,0 +1,138 @@
|
||||
/* 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'] .top{
|
||||
position:sticky;top:0;z-index:100;
|
||||
backdrop-filter:blur(16px) saturate(1.3);
|
||||
-webkit-backdrop-filter:blur(16px) saturate(1.3);
|
||||
background:color-mix(in srgb,var(--paper) 78%,transparent);
|
||||
border-bottom:1px solid transparent;
|
||||
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
|
||||
}
|
||||
html[data-ui='vivid'] .top.scrolled{
|
||||
border-bottom-color:var(--line);
|
||||
box-shadow:0 1px 0 var(--line);
|
||||
}
|
||||
html[data-ui='vivid'] .top-in{
|
||||
max-width:1100px;margin:0 auto;
|
||||
padding:0 28px;height:60px;
|
||||
display:flex;align-items:center;gap:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .brand{
|
||||
display:flex;align-items:center;gap:10px;
|
||||
font-weight:700;font-size:15px;letter-spacing:.02em;
|
||||
transition:transform .5s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .brand:hover{transform:scale(1.04)}
|
||||
html[data-ui='vivid'] .brand .av{
|
||||
width:30px;height:30px;border-radius:50%;
|
||||
background:linear-gradient(135deg,var(--accent),var(--accent-deep));
|
||||
display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
|
||||
box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .brand .av::after{
|
||||
content:"";position:absolute;right:-1px;bottom:-1px;
|
||||
width:9px;height:9px;border-radius:50%;
|
||||
background:#34c759;border:2px solid var(--paper);
|
||||
}
|
||||
html[data-ui='vivid'] .nav{display:flex;gap:2px;flex:1;justify-content:center}
|
||||
html[data-ui='vivid'] .nav a{
|
||||
position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
|
||||
padding:8px 14px;border-radius:999px;
|
||||
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .nav a:hover{color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
|
||||
html[data-ui='vivid'] .nav a.on{color:var(--accent)}
|
||||
html[data-ui='vivid'] .nav a.on::after{
|
||||
content:"";position:absolute;left:50%;bottom:4px;
|
||||
width:4px;height:4px;border-radius:50%;
|
||||
background:var(--accent);transform:translateX(-50%);
|
||||
}
|
||||
html[data-ui='vivid'] .top-acts{display:flex;align-items:center;gap:6px}
|
||||
html[data-ui='vivid'] .icon-btn{
|
||||
width:36px;height:36px;border-radius:50%;
|
||||
display:grid;place-items:center;color:var(--soft);font-size:15px;
|
||||
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .icon-btn:hover{background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
|
||||
@media (max-width:720px) {
|
||||
html[data-ui='vivid'] .nav{display:none}
|
||||
}
|
||||
|
||||
/* ---- 设计稿分节：阅读进度（详情页） ---- */
|
||||
/* ---- 阅读进度（详情页） ---- */
|
||||
html[data-ui='vivid'] .progress{
|
||||
position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
|
||||
background:transparent;pointer-events:none;
|
||||
}
|
||||
html[data-ui='vivid'] .progress i{
|
||||
display:block;height:100%;width:0%;
|
||||
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
|
||||
transition:width .1s linear;
|
||||
}
|
||||
html[data-ui='vivid'] .progress-pct{
|
||||
position:fixed;right:22px;top:50%;transform:translateY(-50%);
|
||||
z-index:90;font-family:var(--mono);font-size:11px;font-weight:700;
|
||||
color:var(--muted);letter-spacing:.06em;
|
||||
writing-mode:vertical-rl;
|
||||
opacity:0;transition:opacity .4s var(--ease);
|
||||
pointer-events:none;
|
||||
}
|
||||
html[data-ui='vivid'] .progress-pct.show{opacity:1}
|
||||
html[data-ui='vivid'] .progress-pct b{color:var(--accent);font-weight:800}
|
||||
|
||||
/* ---- 设计稿分节：页脚 ---- */
|
||||
/* ---- 页脚 ---- */
|
||||
html[data-ui='vivid'] .foot{
|
||||
max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
|
||||
border-top:1px solid var(--line);
|
||||
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;
|
||||
}
|
||||
html[data-ui='vivid'] .foot a{color:var(--accent);font-weight:600;transition:opacity .25s}
|
||||
html[data-ui='vivid'] .foot a:hover{opacity:.75}
|
||||
html[data-ui='vivid'] .foot .sep{margin:0 8px;opacity:.4}
|
||||
html[data-ui='vivid'] .foot .quote{
|
||||
font-family:var(--serif);font-style:italic;
|
||||
color:var(--soft);margin-bottom:8px;font-size:13.5px;
|
||||
}
|
||||
|
||||
/* ---- 设计稿分节：切换器 / 窄屏 ---- */
|
||||
/* ---- 切换器 ---- */
|
||||
html[data-ui='vivid'] .switch{
|
||||
position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
|
||||
display:flex;gap:6px;padding:6px;border-radius:999px;
|
||||
background:rgba(28,28,30,.88);backdrop-filter:blur(14px);
|
||||
box-shadow:0 10px 36px rgba(0,0,0,.35);
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
}
|
||||
html[data-ui='vivid'] .switch button{
|
||||
padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
|
||||
color:rgba(255,255,255,.55);transition:.2s;
|
||||
}
|
||||
html[data-ui='vivid'] .switch button:hover{color:#fff;background:rgba(255,255,255,.1)}
|
||||
html[data-ui='vivid'] .switch button.on{background:#fff;color:#111}
|
||||
html[data-ui='vivid'] .switch .lbl{color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
|
||||
@media (max-width:640px) {
|
||||
html[data-ui='vivid'] .hero{padding:48px 20px 32px}
|
||||
html[data-ui='vivid'] .wrap{padding:8px 18px 36px}
|
||||
html[data-ui='vivid'] .paper{padding:28px 22px 36px;border-radius:16px}
|
||||
html[data-ui='vivid'] .about-card{padding:32px 22px}
|
||||
html[data-ui='vivid'] .panels{padding:16px 18px 12px}
|
||||
html[data-ui='vivid'] .toolbar{flex-direction:column;align-items:stretch}
|
||||
html[data-ui='vivid'] .search{width:100%}
|
||||
html[data-ui='vivid'] .search input{flex:1;width:auto}
|
||||
html[data-ui='vivid'] .top-in{padding:0 16px;gap:12px}
|
||||
}
|
||||
Reference in New Issue
Block a user