余白:桌面端文章去卡片 + 阅读页宽屏三栏外扩

去卡片(桌面 + 手机统一)
- .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 无警告。
This commit is contained in:
Sakurasan committed 2026-09-24 00:30:15 +08:00
1 parent 5f82b6012f
commit 565b5be3d7
4 files changed
+35 -24

No files matched your search

+5
View File
@@ -9,6 +9,11 @@ html[data-ui='vivid'] .top.scrolled {border-bottom-color: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;}
/* 阅读页(/post/*)在宽屏用的是 1340 的三栏栅格(article.css),顶栏得跟着一起宽:
否则品牌和主题键会落在 1100 的边上,比左栏时间线 / 右栏目录缩进一百多像素。 */
@media (min-width:1200px) {
html[data-ui='vivid'] .top-in.wide {max-width:1340px}
}
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);}