 Sakurasan
|
8fd8674910
|
余白：文章详情按 innei.in 重排题头与正文 + 顶栏宽度统一 + 纸面留白收紧
参考 innei.in 的文章页（它本身也用 yohaku 命名，把它的 CSS 拆出来对了值）
题头居中
- 元信息行 justify-content:center + tabular-nums（日期/字数等宽，换行不左右跳），
标题 text-align:center + text-wrap:balance（防居中标题折出「最后一行只落一两个字」）；
正文仍回到左对齐，和参考一致
- 这几条都改成 > 直接子元素：原来的 .paper h1 会连正文里的 h1 一起命中
（有的文章正文就是从 `# 标题` 开始的），把正文标题也居中了——手机截图上一眼看到
正文
- 段距 0 0 1.35em -> 上下各 1.5em（参考 .v10dui0 .rich-paragraph），首末元素吃掉外边距
- 补设计稿漏掉的 h1 / h3 / ol / img / figcaption（h1 之前是浏览器默认 2em+.67em 外边距、
h3 是 1.17em，在 16.5px/1.95 的正文里很突兀；插图之前顶满整列且和文字紧贴）
- 链接改用 text-decoration（1px、underline-offset 2px、hover 加粗 2px）替掉 border-bottom
- 分隔线收成 60px 居中细线；.prose 加 text-autospace:normal（中英混排自动字距）
把 classic 的 .prose 挡回去
- styles.css 那段 .prose 不带 data-ui 前缀，vivid 也照样命中；我们的规则特指度更高，
但只覆盖自己声明过的属性，没声明的就漏过来。量出来并逐条认领：
a 的 border-bottom（和新下划线叠成双线）、hr 的 height+background（细线被垫成 2px）、
h3::after（每条 h3 下方多一条 28×2 强调色横杠）、ul/ol 的 1.1em 下边距、
blockquote 末段 p、pre 的 1px 边框、h4（用 classic 的 16.5px 不成层级）
- 首字下沉也在这批里：设计稿没有，是 classic 漏过来的固定 52px，参考站余白模式也有，
于是认领成自己的 2.4em（跟着正文字号缩放），短文按 classic 的分法关掉
顶栏宽度
- 撤掉上一版按 /post/* 放宽到 1340 的 .top-in.wide：从首页点进文章时导航会跳一下。
顶栏全站固定 1100，品牌与主题键在首页和文章页落在同一 x（实测 199 / 1207）
纸面与栅格收紧
- .paper padding 44/48/52 -> 30/24/40；--v-measure 680 -> 728；中列仍 776 = 728 + 24×2
（这三个数是一组，只改内边距会让正文在列里偏左：实测离左栏 83px、离右栏 131px）
- .article-layout max-width 1340 -> 1272、padding 36/28/60 -> 24/24/44、gap 32 -> 24。
上限必须正好等于「三栏 + 两个 gap + 左右内边距」，声明的 gap 才是渲染出来的 gap：
180+776+220+24×2 = 1224 内容宽，+48 = 1272。否则 space-between 把富余塞回列间隙，
数字改小也不动（实测只改 pad/gap 数字，正文到侧栏反而 78 -> 86）
- 手机 .article-layout padding 24/20/48 -> 20/20/40
实测（用列的实际位置反推，不信任声明值；正文宽度用 offsetWidth，.paper 有入场动画的 scale）
- 1456：正文到侧栏 78 -> 48，正文 728 不变，布局 1340 -> 1272
- 1280：正文 697 -> 721；1200：617 -> 641；三档实际列间隙都等于声明的 24
- 公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告
|
2026-09-24 01:03:59 +08:00 |
|
|
Sakurasan
|
565b5be3d7
|
余白：桌面端文章去卡片 + 阅读页宽屏三栏外扩
去卡片（桌面 + 手机统一）
- .paper 去掉底色 / 1px 边框 / 20px 圆角 / box-shadow，正文直接落在页面上；
右上角那团强调色渐晕（::before）是卡片的角饰，一并删掉，position/overflow 随之不再需要
- 48px 横向内边距保留：它不是装饰，是「中列 776 - 96 = 680 = --measure」这半个算式，
删了正文要么超出行宽、要么在列里右空 96px；手机上归零（那 48px 在 390 屏上是浪费）
宽屏三栏外扩（≥1200px）
- 1100 的画布上限在 1456 的屏上两侧各空 171px，同时中列只有 650px、正文 554px
——根本没到 --measure 的 680。所以「文章太窄」和「留白太大」是同一个原因
- 上限提到 1340，列改 180 / minmax(0,776) / 220 + space-between：
中列 776 = 680(正文) + 48×2(.paper 内边距)，正文吃满 --measure 且列内不剩空；
space-between 让时间线左缘 / 目录右缘正好落在 28px 内边距上
- 顶栏在阅读页同步放宽（YohakuTop 按 /post/* 加 .top-in.wide），否则品牌和主题键
会比左右栏缩进一百多像素。首页仍 1100 —— 信息流卡片跟着放到 1340 只会把封面拉成条
实测（offsetWidth，.paper 有入场动画的 scale，getBoundingClientRect 会带上它）
- 1456：画布 1100 -> 1340，两侧空白 171 -> 51，中列 650 -> 776，正文 554 -> 678
- 1920：两侧空白 403 -> 283；1200 及以下不变；首页 top-in 仍 1100、卡片 1044
- 平铺后桌面 .paper：bg 透明 / border 0 / radius 0 / shadow none / ::before none，
正文 680；手机正文 335（与上一版一致）
修一处自己引入的编译错误：顶栏那个 class 起初命名 wide，与组件里已有的
wide（721px matchMedia）撞名 —— Identifier 'wide' has already been declared，
:3000 直接 500、页面全白。已改名 mqWide。
公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告。
|
2026-09-24 00:30:15 +08:00 |
|
|
Sakurasan
|
a1d515e435
|
余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正
手机端（≤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 无警告。
|
2026-09-23 23:20:51 +08:00 |
|
|
Sakurasan
|
fbda293072
|
余白 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 |
|