theme(shiroko): 按二次元官网构图重做——整页场景 + 悬浮磨砂 UI
参考蔚蓝档案 JP 首页（bluearchive.jp）的做法：整个视口是一张场景插画，UI 浮在场景之上， 而不是"白底 + 留白里贴几个人物"。之前几版反复调摆位都显得怪，根源就是缺了这层场景—— 人物没有环境，怎么摆都是贴纸。 - 新增教室场景两张（1920×1080 / 720×1003，共 28KB）：生成后裁掉右下角水印、 混白 38%、模糊 1.4px，保证白卡片仍有对比度； - 卡片与顶栏改半透明白 + backdrop-filter 磨砂（深色关闭，背后没场景时半透明只会变浑）； - 人物站在场景左侧地面（340px，离底边 36px）+ 椭圆接触阴影； - 浅色不再叠平铺纹样（压在实景上会变噪点），pattern.svg 删除，深色保留 pattern-dark； - 顺带修 ruleBody 不剥 CSS 注释的缺陷：令牌前写注释会让 tokenValue 取到粘连键， 色块预览静默失效（新增 TestRuleBodyIgnoresComments 守住）； - StaticVersion → 20261019q
This commit is contained in:
tamakyi
+41
-26
@@ -20,33 +20,27 @@ available = default,sakura,shiroko
|
||||
| `--tb-text` | `#222d3b` | `#e3eaf4` |
|
||||
| `--tb-primary` | `#4a7fc1` | `#6fa3e0` |
|
||||
|
||||
## 插画布置
|
||||
## 视觉构图
|
||||
|
||||
| 位置 | 内容 | 尺寸 |
|
||||
参考对象：**蔚蓝档案 JP 官网首页**（`https://bluearchive.jp/`）。它的做法不是"白底 + 留白里贴几个人物"，
|
||||
而是 **整个视口是一张场景插画，UI 浮在场景之上**。本主题照这个结构重排：
|
||||
|
||||
| 层 | 内容 | 实现 |
|
||||
| --- | --- | --- |
|
||||
| 卡片左下外侧 | `sit`（盘腿坐），右侧约 40px 钻进卡片底下 | `auto 340px`，≤1179px 时 `280px` |
|
||||
| 人物脚下 | 椭圆接触阴影（CSS `radial-gradient`，不是图片） | `128px 15px` |
|
||||
| 整页平铺 | 雪花 ×2 + 光环 + 两点（340px 一铺，opacity 0.085） | `pattern.svg` |
|
||||
| ≤900px | 不出人物 —— 卡片占满宽度，两侧没有视觉空间 | `@media` |
|
||||
| 底层 | 教室场景插画（压白 38%、轻度虚化） | `--tb-page-image`，16:9 桌面 / 9:16 移动两张 |
|
||||
| 中层 | 卡片与顶栏：半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
|
||||
| 上层 | 人物站在场景左侧地面（337px 高）+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
|
||||
| 深色 | 不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |
|
||||
|
||||
摆位为什么是这个人样：
|
||||
摆位经验（都是踩过的）：
|
||||
|
||||
- **不要四角各摆一个**。人物之间、人物与内容之间都没有关系，读起来就是贴纸墙纸；
|
||||
- **右下角不能放人**。页脚文案右对齐（社区规则 / 备案号 / 存活时长），人物会和它挤在一起；
|
||||
- **要半隐在卡片后面**。被卡片挡掉一部分才有空间关系，否则就是浮在留白中间；
|
||||
卡片定宽 750px 居中，左沿 = `50% - 375px`，人物宽约 177px，左移 515px 即遮住 40px；
|
||||
- **离底边留 26px**。脚踩在窗口最后一行像素上会被读成"被裁掉"，抬高之后必须配接触阴影，
|
||||
否则变成悬空。
|
||||
- **纹样元素要均布**。全挤在 tile 上半部时，铺开后在整页形成明显的横向条纹带。
|
||||
|
||||
插画走 **装饰层**（`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`），不是整页背景图：
|
||||
|
||||
- 固定像素尺寸 + 四角定位，**任何视口比例都不会被裁切**（`cover` 做不到，竖屏桌面会把贴边的插画切掉）；
|
||||
- 固定 6 个槽位，必须写满 6 个值，缺的填 `none` —— 多背景各列表的层数必须恒定
|
||||
（1 图案 + 6 装饰 + 1 背景 = 8），值一多一少，分层就整体错位（会出现整页重复小人）；
|
||||
- 深色模式关掉装饰层，只留底色与浅色图案。人物是银白／浅灰为主，压到深色底上会发灰发脏。
|
||||
- 图案是图片，不走 `StaticVersion` 缓存键（`Cache-Control: max-age=86400`）：
|
||||
换 `pattern*.svg` 时要自己给 css 里的 url 补一个 `?v=`，否则老访客最多 24 小时看到旧纹样。
|
||||
- **不要四角各摆一个人**。人物之间、人物与内容之间都没有关系，读起来就是贴纸墙纸；
|
||||
人物必须"站在场景里"——有地面、有阴影、有环境，才不像贴纸。
|
||||
- **右下角不能放人**。页脚文案右对齐（社区规则 / 备案号 / 存活时长），会和人物挤在一起。
|
||||
- **离底边留 36px**。脚踩在窗口最后一行像素上会被读成"被裁切"，抬高之后必须配接触阴影，否则变成悬空。
|
||||
- **纹样不要压在实景上**。平铺纹样叠在教室插画上会变成噪点，只在深色（无场景）时使用。
|
||||
- **背景图会被 `cover` 裁切**，所以场景里不能有必须完整露出的元素：教室的黑板和窗户都在中部，裁掉两头不影响。
|
||||
- **人物比例要跟场景对得上**。340px 是相对"站在前景"的尺度；缩到 240px 以下会显得像贴纸浮在半空。
|
||||
|
||||
## 素材清单
|
||||
|
||||
@@ -59,8 +53,9 @@ available = default,sakura,shiroko
|
||||
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
||||
| `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB |
|
||||
| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB |
|
||||
| `pattern.svg` | 浅色平铺（几何纹样） | 240×240 | 0.9KB |
|
||||
| `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB |
|
||||
| `scene-desktop.webp` | 教室场景（16:9，压白 38% + 虚化 1.4px） | 1920×1080 | 22KB |
|
||||
| `scene-mobile.webp` | 教室场景（9:16 中裁） | 720×1003 | 6KB |
|
||||
| `pattern-dark.svg` | 深色模式平铺纹样（雪花 + 光环） | 240×240 | 0.7KB |
|
||||
|
||||
## 来源与授权
|
||||
|
||||
@@ -68,7 +63,8 @@ available = default,sakura,shiroko
|
||||
| --- | --- |
|
||||
| `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘，仅作生成参考图，不再上页面 |
|
||||
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**（image-to-image）生成，再抠白底 |
|
||||
| `pattern.svg` / `pattern-dark.svg` | 手写 SVG，纯几何，无外部素材 |
|
||||
| `scene-desktop.webp` / `scene-mobile.webp` | WorkBuddy ImageGen 生成（提示词见下），未使用任何外部素材 |
|
||||
| `pattern-dark.svg` | 手写 SVG，纯几何，无外部素材 |
|
||||
|
||||
### 生成与抠图参数
|
||||
|
||||
@@ -134,3 +130,22 @@ level=info msg="主题注册表已加载" enabled="default,sakura"
|
||||
level=warning msg="[theme] available 未登记以下主题，它们不会出现在设置页"
|
||||
available="default,sakura,shiroko" themes=shiroko
|
||||
```
|
||||
|
||||
## 场景图的生成
|
||||
|
||||
整页背景是一张生成的教室插画，提示词：
|
||||
|
||||
```
|
||||
Empty Japanese high school classroom in the afternoon, flat pastel anime background art,
|
||||
very light and airy, pale blue-grey and warm cream palette, rows of desks softly out of focus,
|
||||
big windows with soft daylight, thin clean shapes, low contrast, minimal detail,
|
||||
large calm empty area in the center, no characters, no text, no watermark,
|
||||
wide scene suitable as a website background
|
||||
```
|
||||
|
||||
生成后处理（PIL，脚本未入库，参数记在这里）：
|
||||
|
||||
1. 裁掉图片底部 160px —— 生成器会在右下角打 `AI生成 WORKBUDDY` 水印，不裁会出现在页面上；
|
||||
2. 按 16:9 取顶部 864px，整体混白 38%（`v*0.62 + 255*0.38`）—— 保证白卡片放上去仍有足够对比度；
|
||||
3. 高斯模糊 1.4px，让桌椅不抢正文；
|
||||
4. 导出 WebP q80（1920×1080，22KB）；移动端从同一张按 9:16 中裁 620px 宽，导出 720×1003。
|
||||
|
||||
Reference in New Issue
Block a user