Sakurasan
a1d515e435
手机端（≤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 无警告。
39 lines
1.7 KiB
HTML
39 lines
1.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
|
||
<meta name="theme-color" content="#faf7f1" media="(prefers-color-scheme: light)" />
|
||
<meta name="theme-color" content="#1f1d1a" media="(prefers-color-scheme: dark)" />
|
||
<title>ONE · 一个博客</title>
|
||
<meta name="description" content="长文与短文，同一种节奏。" />
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<!--
|
||
UI 版本在 <html> 上以 data-ui 表达，服务端设置要等 /api/site 才知道。
|
||
这里先读本地缓存设上，避免首帧闪一下 classic 再跳到 vivid。
|
||
站点级设置（非访客偏好），缓存是安全的。值与 site.js 的 UI_KEY 保持一致。
|
||
-->
|
||
<script>
|
||
(function () {
|
||
try {
|
||
// 后台一律 classic：vivid.css 也会命中 .btn / .input 这类全局类，
|
||
// 而后台表单正在用，所以这里就要把路径也判断掉，别等 App 挂载再纠正。
|
||
var isAdmin = location.pathname.indexOf('/admin') === 0
|
||
var v = localStorage.getItem('one.ui')
|
||
document.documentElement.setAttribute(
|
||
'data-ui',
|
||
!isAdmin && v === 'vivid' ? 'vivid' : 'classic'
|
||
)
|
||
} catch (e) {
|
||
document.documentElement.setAttribute('data-ui', 'classic')
|
||
}
|
||
})()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|