 dsh
|
5532c35064
|
浅色改为暖纸底 + 纸纹底 + 移动端分类胶囊条
浅色配色（global.css，暗色未动）
- 纯白底在屏幕上偏刺眼、大面积纯色没有视觉落点，整套浅色 token
压到 L*≈96 并给暖黄彩度（oklch hue 84），墨色换成暖褐而非纯黑
- background #f8f3e9 / surface-subtle #f4eee3 / card #fcf8f0（比页面底亮，
靠明度差拉层次）/ foreground #221d18 / border #dfd9ce
- 对比度仍留足：正文 15:1、content-secondary 7.5:1、muted-foreground 5.3:1、
主色链接 4.9:1（AA 要求 4.5:1）
- secondary / sidebar / popover 等原来偏中性的 token 一并转暖，避免冷暖打架
纸纹底
- --paper-noise 用内联 SVG feTurbulence 分形噪声，无需图片文件；
feColorMatrix saturate=0 去饱和得到带随机 alpha 的灰颗粒，
因此不需要 mix-blend-mode 就能亮暗通用
- body::before 铺成 position:fixed 整屏颗粒，z-index:1（压在正文上、
页眉 z-50 / 菜单 z-60 之下），pointer-events:none
- 颗粒浓度：亮色 0.2 / 暗色 0.22。实测亮度标准差 0.05→0.7、0.2→1.9、
0.3→2.9（0=完全平整），选 2 左右这个「看得出是纸但不觉得脏」的档位
- 顺带让 backdrop-filter 有细节可模糊，此前纯色底上磨砂等于不存在
移动端分类胶囊条（article-list.tsx + sidebar.tsx）
- 移动端侧栏被排在文章列表下面（实测首篇 y=999、侧栏 y=3212），
分类筛选基本摸不到；现在列表顶部多一条吸附胶囊条
- 复用同一份 categories / activeCategory / handleCategoryChange，不写第二套；
末尾胶囊在「分类 / 标签」间切换；两端渐隐提示可横向滑；滚动条藏掉
- 把当前项自动滚到中间，只操作这条横向容器，不动页面纵向位置
- sidebar.tsx 的分类/标签块加 hidden lg:block，避免同页出现两份
其他
- 新增 --header-h: 69px（页眉实测高度），移动端菜单面板和吸附胶囊条
都改用它定位，不再各处硬编码 69/76
- README 补「浅色配色」「纸纹底」「移动端分类胶囊条」三节
验证（headless Chrome 131）
- 390px：胶囊条可见、侧栏两块 display:none；点「思考」→ ?category=思考、
列表 10→4 条、当前项高亮；切到标签模式列出 35 个标签；无横向溢出
- 1280px：胶囊条隐藏、侧栏分类恢复显示（display:block）
- 亮/暗两套截图正常，书架、文章页均无异常
|
2026-09-15 09:37:14 +08:00 |
|
|
dsh
|
9d9f87a013
|
移动端美化：悬浮磨砂导航菜单 + 保守档字号
菜单（site-header.astro）
- 全屏遮罩居中大链接 -> 仿 Firefly float-panel 的悬浮磨砂卡片：
fixed top-[76px] 左右各留 12px，rounded-2xl，浅阴影，max-h 兜底防横屏溢出
- 菜单项 30px -> 18px，行高 44px，圆角 hover 底色；外链右侧加 ↗
- 当前页在构建期用 Astro.url.pathname 判定，高亮为主色文字 + 淡主色底
+ 正文标题那道红色短竖线（滑入/当前项显示）
- 入场动画改为「面板落下 + 逐项上浮」，节奏从 420ms 收到 300ms
- 遮罩从纯色全屏改为 background/45% + 极轻模糊，点它关闭
- JS 未改：data-open / ESC / body 滚动锁 / astro:before-swap 复位 / aria 全部沿用
- 补 :focus-visible 自定义焦点环（替掉浏览器默认那圈）、prefers-reduced-motion、
prefers-reduced-transparency、@supports 回退
磨砂
- global.css 新增 --glass-bg / --glass-border / --glass-blur / --glass-saturate，
由 --card 派生所以亮暗自动跟随
- 移动端页眉仍保持关闭常驻磨砂（原来就是有意为之），只有点开的菜单面板用
字号（只动 <768px，保守档）
- 正文/引用/列表 16.5px/1.85 -> 15.5px/1.78，行高密度约省 10%
- 文章 h1 30 -> 27px；正文 h2 30 -> 25；h3 24 -> 21；h4 20 -> 18
- 列表区标题 24 -> 21px
- 桌面端用 md: 前缀原样恢复
验证（headless Chrome 131，390x844 + 1280/800/700）
- 390px：正文 15.5/27.59、h1 27、菜单项 18；面板 445px 高、底边 511 < 844
- 1280/800px：正文 16.5/30.525、h1 48px，与改动前一致
- 亮/暗两套截图正常，无横向溢出
|
2026-09-15 09:03:24 +08:00 |
|
|
dsh
|
6f4cc13a20
|
初始提交：时之刃的小站
基于 VermilionVoid（朱墨留白）主题的个人博客。
- 站点配置集中在 src/data/site.ts 与 src/data/profile.ts
- 30 篇文章、8 条偶得、相册
- 评论使用自托管 twikoo
- 部署走 deploy.sh（rsync 到树莓派 + 云服务器）
|
2026-09-14 20:44:12 +08:00 |
|