mirrors2/ONE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正

Browse Source 
手机端（≤720 / ≤640）
- 窄屏导航不再平铺：设计稿在窄屏把导航整个 display:none，手机上会没有任何
  入口，之前的做法是在品牌行下再摊一条横向滚动行，5 个中文项挤成一条读起来
  很碎。改为顶栏只留「头像 + ☰」，点 ☰ 开全屏菜单：竖排大字 + 英文小标、
  当前项高亮、底部放主题切换；顶行复用同款标头（关掉时视觉不跳），
  Esc / 点击空白 / 路由变化 / 窗口拉宽回桌面 都会关闭，
  打开时锁背景滚动并把焦点交给对话框（preventScroll）
- 顶栏主题切换 ◐ 在窄屏收进 ☰：两边各一个就是重复。桌面没有 ☰，
  且那枚 ◐ 是设计稿顶栏自带的（index.html:782），所以只在窄屏藏
- 筛选条：≤640 收起标签 chips（会折三四行）与搜索框，只留类型分段；
  标签仍有 /tags 整页入口
- viewport 补 viewport-fit=cover / interactive-widget；触屏补
  -webkit-tap-highlight-color、touch-action:manipulation、44px 可点目标、
  16px 输入框（防 iOS 聚焦缩放）

层叠（这次量出来的真问题）
- 新增 mobile.css 并在 main.ts 里最后 import：.hero/.wrap/.paper/.about-card/
  .toolbar 的窄屏覆盖原本写在 chrome.css（第 2 个 import），同特指度被
  home/article/pages.css 全程压掉 —— 媒体查询不加特指度，「后导入者赢」，
  所以手机上左右留白一直是 28px 而不是设计意图的 18px，圆角/内边距也没换过。
  现统一到 20px，实测 hero / wrap / showcase 左边缘对齐；
  同时删掉 home.css 里那条 ≤860 的 showcase 18px（与同宽度下 hero 的 28px 错开）
- .icon-btn 的 44px 触屏尺寸从 tokens.css 挪回 chrome.css 自己那边：
  原位置被后导入的同特指度 36px 反压，触屏上实际是 36×44 的椭圆
- .toolbar 防线补 border:0：只中和 top 会漏出左右两道边框
- 后台 3 处 100vh 补 100dvh 兜底；9 处 transition:all 展开为显式属性列表；
  19 处 :hover 收进 @media (hover:hover) and (pointer:fine)（触屏不再粘住 hover）

组件修正
- 首页作品卡片改用与 /projects 同一套结构：文字包进 .body（.proj 自身
  padding:0，原来 h3/p 直接贴左边框）、有封面才渲染 .cov（原来无封面时留
  150px 空色块）、无封面时用 .st-plain 显示状态
- .proj-grid 轨道下限改 min(300px,100%)：320px 视口下裸 300px 会顶破容器，
  被 body 的 overflow-x:hidden 裁掉右边
- 「全部作品 / 查看所有作品」改 RouterLink（原为 <a href>，会整页重载）

清理
- 删除 panels.css：.panels/.panel/.cloud/.plist/.about-box 在 vivid 里已无任何
  使用者（后台走 data-ui=classic，命中不到），连带 tokens.css 里的死规则与
  main.ts 的 import
- 修正注释里残留的 panels 描述

验证：headless Chromium 同源 iframe 探针 + 截图，390 / 320 / 1200 三档；
/admin 确认 classic 未被带坏；npm run build 无警告。
This commit is contained in:
Sakurasan
2026-09-23 23:20:51 +08:00
parent c431248796
commit a1d515e435
13 changed files with 1085 additions and 2113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/yohaku/article.css
+78 -140
View File
@@ -1,176 +1,114 @@
/* 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;
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;
}
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'] .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;
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;
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);
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;
}
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}
from {opacity:0;transform:translateY(24px) scale(.985)}
to {opacity:1;transform:none}
}
/* 纸的纹理感：右上角一抹强调色 */
html[data-ui='vivid'] .paper::before{
content:"";position:absolute;top:0;right:0;
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);
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;
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);
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}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .prose a:hover {border-bottom-color:var(--accent)}
}
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;
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));
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;
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;
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);
transition:gap .4s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .back:hover {gap:12px}
}
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);
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);
transition:background .4s var(--spring),color .4s var(--spring),transform .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;
flex:none;padding-top:2px;}
html[data-ui='vivid'] .toc a.on {background:var(--accent-soft);color:var(--accent);transform:translateX(4px);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .toc a:hover {background:var(--accent-soft);color:var(--accent);transform:translateX(4px);}
}
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.on::before {color:var(--accent)}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .toc a:hover::before {color:var(--accent)}
}
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%;
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;
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;
margin-top:8px;font-weight:600;}
html[data-ui='vivid'] .read-meter .num b {color:var(--accent)}
html[data-ui='vivid'] .sr-only {position: absolute;
width: 1px;
height: 1px;
padding: 0;
@@ -178,5 +116,5 @@ html[data-ui='vivid'] .sr-only {
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
border: 0;}
html[data-ui='vivid'] .toc a:active { color: var(--accent); }