 Sakurasan
|
00e85bf667
|
vivid 时间线加操作行（回复/赞/查看），长文文字边距对齐短文 8px
- 卡片/纸条本体保持整块链接，操作行是链接外的兄弟节点（<a> 里不嵌交互元素）
- 回复 → 文章页 #comments 锚点；查看 → 文章页；赞是本机赞
（无登录体系，状态存 localStorage，后续要做全局计数再加表和端点）
- Phosphor 图标：对话气泡 / 心形 / 眼睛，按下有缩放反馈，liked 态 accent 高亮
- .card .body 横向边距 26px→8px，与纸条文字同一条竖线
|
2026-10-01 17:28:24 +08:00 |
|
|
Sakurasan
|
17b1143183
|
vivid 短文纸条上下内边距归零
|
2026-10-01 17:15:17 +08:00 |
|
|
Sakurasan
|
d3ec39f27b
|
vivid 短文文字缩进 12px→8px
|
2026-10-01 17:12:51 +08:00 |
|
|
Sakurasan
|
8315af0f0c
|
vivid 短文：文字类内容缩进 12px（字不贴边线），图片网格全宽贴边并跟随纸条圆角裁切，外链卡片内缩 12px
|
2026-10-01 17:10:47 +08:00 |
|
|
Sakurasan
|
251de21d5b
|
a.note 内边距删掉：短文正文与 12px 页边线齐平，淡底块紧贴内容
|
2026-10-01 17:05:57 +08:00 |
|
|
Sakurasan
|
c81d56e4fb
|
vivid 短文清掉多余边距：纸条内边距对齐 12px、meta 上方 16px→10px，手机端时间线条目间隔 18px→14px
|
2026-10-01 17:01:56 +08:00 |
|
|
Sakurasan
|
a780da5c3a
|
vivid 短文标记去线改淡底块：背景不占布局宽度，正文与卡片左缘对齐，区分信号 = accent 淡底 + SHORT 徽标
|
2026-10-01 16:59:09 +08:00 |
|
|
Sakurasan
|
5cd0e63ae6
|
vivid 短文纸条贴边：左线 3px→2px，去掉 12px 左外边距、内边距 18/24→14/16，左侧总占位从近 60px 收到 38px
|
2026-10-01 16:45:33 +08:00 |
|
|
Sakurasan
|
92654dec9f
|
带图短文桌面端左右分栏：文字 2/5、图 3/5，图不再全宽铺开吃高度；窄屏维持堆叠
|
2026-09-30 22:55:42 +08:00 |
|
|
Sakurasan
|
a4e182aeb4
|
短文配图网格改 2:1 定高：宽列下 1:1 格子顶掉一整屏，行 minmax(0,1fr) 防图片自然高撑爆
|
2026-09-30 22:37:39 +08:00 |
|
|
Sakurasan
|
e6e4bdc71c
|
修两套 UI 的横向溢出 + vivid 页脚把源码入口从社交排里分出来
溢出（两处，同一类成因）：
- vivid 时间线：短文正文用的是 .note .body 而不是 .prose，所以 c6eb0bb 给
.prose 加的 overflow-wrap:anywhere 没覆盖到它，正文里的裸链接把列撑到 552px
（视口 516）。补上 anywhere 而非 break-word——要参与 min-content 计算才压得住
- classic 时间线：.shell 的页边距在 640px 断点从 20px 收到 12px，而 .row-feed 的
负出血要到 520px 才跟着收到 -12px，521~640 这段出血比父容器内边距多 4px，
整页横向溢出。把出血断点对齐到 640px（桌面视觉不动）
- LinkCard 的 .lc-site 同样补 anywhere：主机名是最典型的不可断行长 token
vivid 页脚：源码仓库入口原先被 concat 进社交数组，和站主的 GitHub/X 排成同一行，
看起来像「又一个社交账号」。改成社交排只放账号（同 classic RightRail 的过滤），
源码图标与版权单独成 .foot-meta 压在页脚最底；样式写在 .foot a 之后，靠同特指度
的后者压掉页脚链接默认的强调色
|
2026-09-29 12:01:11 +08:00 |
|
|
Sakurasan
|
740d47bbf6
|
短文配图：快发盒上传 + Twitter 式网格 + 全站 lightbox 预览；整卡点击进详情、时间线短文豁免首字
|
2026-09-27 23:41:34 +08:00 |
|
|
Sakurasan
|
5f82b6012f
|
余白：手机端文章去卡片 + 信息流元信息下移 + 标签统一为纯文本 #标签
信息流（首页）
- 元信息（类型 / 日期 / 时长 / 字数）从标题上方挪到摘要之后，和标签同一块：
卡片开头只留标题摘要，读完再看「什么时候、多长」
- 标签去掉 chip 样式，改为纯文本 #标签（# 走 ::before，链接的可读名仍是标签本身）；
原来那排药丸看着能点，其实是卡片链接里的 span，点哪儿都进文章
- .card .tags / .note .tags 间距 6px -> 14px，配合纯文本
文章详情页
- 手机上不再套卡片：.article-layout 28px + .paper 22px + 卡片边框三层一共
吃掉约 84px，390 屏上正文只剩 275px；平铺后 330px。同时关掉卡片右上角
那团强调色渐晕（::before，卡片没了就只剩一块脏）。桌面 / 平板仍是卡片
- 底部标签跟信息流统一成纯文本 #标签，并去掉「标签」二字的小标
（有 # 就是标签，再来两个字是重复）
- 详情页的标签是链接，补 padding:6px 0 —— 12.5px 裸文字按下去只有 ~18px 高，
手机上不好点；不画背景不画边框，观感不变
标签样式只有 home.css 一处 .tg，信息流与详情页共用。
验证：headless Chromium 从站上量取计算样式 + 截图（390 / 1280）
- 详情页手机：paper bg=透明 border=0 radius=0 shadow=none padding=0，::before=none，
正文 330px；桌面：bg=#fffefb border=1px radius=20px padding=48px，::before=block
- .end 子元素只剩 [A.tg, A.tg]；.tg 12.5px / padding 0 / ::before "#"；gap 14px
- 公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告
|
2026-09-24 00:09:29 +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 |
|