update README.md

2026-05-19 17:25:43 +08:00
parent 31997e51c8
commit 5194d14fb0
57 changed files with 39100 additions and 0 deletions
@@ -0,0 +1,207 @@
+# 样式与配色
+
+WarmIsland 主题的视觉设计围绕「暖夜中的小岛」这一意象展开，追求温暖、宁静、有质感的阅读体验。
+
+## 设计哲学
+
+### 暖夜小岛
+
+想象一座深夜里温暖的小岛——远处是深邃的夜空，近处是篝火般的暖光。这就是 WarmIsland 的设计基调：
+
+- **温暖**：以暖色调为基础，避免冷硬的科技感
+- **宁静**：克制的动效和留白，不喧宾夺主
+- **质感**：毛玻璃、渐变光晕、细腻的阴影层次
+- **呼吸**：元素有节奏地律动，如岛上的微风
+
+### 设计原则
+
+1. **内容优先**：所有视觉设计服务于内容阅读
+2. **克制装饰**：每个装饰元素都有其存在的理由
+3. **层次分明**：通过颜色、字号、间距建立清晰的信息层级
+4. **温暖一致**：从配色到动效，保持统一的温暖气质
+
+## 色彩系统
+
+### 浅色模式
+
+| 变量 | 色值 | 用途 |
+|------|------|------|
+| `--bg` | `#faf7f2` | 页面背景，温暖的米白色 |
+| `--bg-raised` | `#f3ede5` | 卡片背景，略深的暖色 |
+| `--bg-overlay` | `rgba(250, 247, 242, 0.85)` | 遮罩层背景 |
+| `--ink` | `#2c2420` | 主文字色，深棕黑 |
+| `--ink-2` | `#7a6e64` | 次要文字，中灰棕 |
+| `--ink-3` | `#b5a99e` | 辅助文字，浅灰棕 |
+| `--rule` | `#e8e0d6` | 分隔线、边框 |
+| `--accent` | `#d4764e` | 强调色，温暖的赤陶橙 |
+| `--accent-hover` | `#c4613a` | 强调色悬停态，更深的赤陶 |
+| `--accent-bg` | `#fdf0e8` | 强调色浅底，用于标签背景 |
+| `--mist-pink` | `#f0e4de` | 薄雾粉，Hero 渐变用 |
+| `--sea-salt` | `#e8e0d6` | 海盐色，与 rule 相同 |
+| `--caramel` | `#8b6f5e` | 焦糖色，滚动条用 |
+| `--glass-bg` | `rgba(250, 247, 242, 0.72)` | 毛玻璃背景 |
+| `--glass-border` | `rgba(232, 224, 214, 0.5)` | 毛玻璃边框 |
+
+### 深色模式
+
+通过 `html.dark` 选择器切换，所有颜色变量重新定义：
+
+| 变量 | 色值 | 说明 |
+|------|------|------|
+| `--bg` | `#1a1614` | 深棕黑背景 |
+| `--bg-raised` | `#242018` | 略浅的卡片背景 |
+| `--ink` | `#ede6de` | 浅色主文字 |
+| `--ink-2` | `#9a8e84` | 次要文字 |
+| `--ink-3` | `#5e544a` | 辅助文字 |
+| `--accent` | `#e8955f` | 更亮的强调色（保证对比度） |
+| `--accent-hover` | `#f0a872` | 更亮的悬停态 |
+| `--accent-bg` | `#2a1e16` | 深色强调底 |
+
+### 阴影系统
+
+| 变量 | 浅色模式 | 深色模式 | 用途 |
+|------|----------|----------|------|
+| `--shadow-sm` | `0 1px 3px rgba(44, 36, 32, 0.06)` | `0 1px 3px rgba(0, 0, 0, 0.2)` | 轻微阴影 |
+| `--shadow-md` | `0 4px 16px rgba(44, 36, 32, 0.08)` | `0 4px 16px rgba(0, 0, 0, 0.25)` | 中等阴影 |
+| `--shadow-lg` | `0 8px 32px rgba(44, 36, 32, 0.12)` | `0 8px 32px rgba(0, 0, 0, 0.35)` | 大阴影 |
+| `--shadow-glow` | `0 0 40px rgba(212, 118, 78, 0.15)` | `0 0 40px rgba(232, 149, 95, 0.12)` | 强调色光晕 |
+
+## 深色模式
+
+### 切换机制
+
+深色模式通过 `html.dark` 类名控制：
+
+1. **跟随系统**（默认）：根据 `prefers-color-scheme` 媒体查询
+2. **手动切换**：通过导航栏的主题切换按钮
+3. **配置指定**：通过 `color_scheme` 配置项强制指定
+
+### 切换逻辑
+
+```javascript
+// 优先级：localStorage > 配置项 > 系统偏好
+var stored = localStorage.getItem("wi-theme");
+var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+var scheme = document.currentScript.getAttribute("data-scheme");
+
+if (stored === "dark") { isDark = true; }
+else if (stored === "light") { isDark = false; }
+else if (scheme === "dark") { isDark = true; }
+else if (scheme === "light") { isDark = false; }
+else if (!stored && prefersDark) { isDark = true; }
+```
+
+### 设计要点
+
+- 深色模式不是简单的反色，而是重新定义了所有颜色变量
+- 强调色在深色模式下更亮，保证足够的对比度
+- 阴影在深色模式下使用纯黑，更自然
+- 文字颜色保持温暖色调，不是纯白
+
+## 字体系统
+
+### 字体栈
+
+| 变量 | 字体栈 | 用途 |
+|------|--------|------|
+| `--font-sans` | `'Noto Serif SC', 'Source Han Serif SC', Georgia, serif` | 标题、强调文字 |
+| `--font-body` | `'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | 正文、UI 文字 |
+| `--font-mono` | `'JetBrains Mono', 'Fira Code', monospace` | 代码 |
+
+### 设计思路
+
+- **标题用衬线体**：Noto Serif SC 赋予标题优雅的文艺气质
+- **正文用无衬线体**：Noto Sans SC 保证长文阅读的舒适度
+- **代码用等宽体**：JetBrains Mono 专为代码设计
+
+::: tip
+这些字体不会自动加载，需要在 Halo 后台或 HTML 中引入对应的字体 CSS。推荐使用 Google Fonts 或国内 CDN 镜像。
+:::
+
+## 间距系统
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--space-xs` | `0.25rem` | 极小间距 |
+| `--space-sm` | `0.5rem` | 小间距 |
+| `--space-md` | `1rem` | 标准间距 |
+| `--space-lg` | `1.5rem` | 大间距 |
+| `--space-xl` | `2rem` | 超大间距 |
+| `--space-2xl` | `3rem` | 区块间距 |
+| `--space-3xl` | `4rem` | 大区块间距 |
+| `--space-4xl` | `6rem` | 页面级间距 |
+
+### 容器宽度
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--container-sm` | `640px` | 小容器 |
+| `--container-md` | `768px` | 中容器 |
+| `--container-lg` | `1024px` | 大容器 |
+| `--container-xl` | `1200px` | 最大容器 |
+| `--content-max` | `800px` | 内容最大宽度 |
+
+### 区块间距
+
+`--section-spacing: clamp(3rem, 2rem + 3vw, 6rem)` — 响应式区块间距，在小屏幕上更紧凑。
+
+## 圆角系统
+
+| SCSS 变量 | 值 | 用途 |
+|-----------|-----|------|
+| `$border-radius-sm` | `8px` | 小元素（标签、代码块） |
+| `$border-radius-md` | `12px` | 中等元素（卡片、图片） |
+| `$border-radius-lg` | `16px` | 大元素（卡片、面板） |
+| `$border-radius-xl` | `24px` | 超大元素 |
+| `$border-radius-full` | `9999px` | 胶囊按钮、头像 |
+
+### 配置项
+
+通过 `border_radius` 配置项可全局调整圆角风格：
+
+| 选项 | 效果 |
+|------|------|
+| `small` | 较小的圆角 |
+| `medium` | 中等圆角（默认） |
+| `large` | 较大的圆角 |
+
+## 动画系统
+
+### 时间曲线
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--ease-out-expo` | `cubic-bezier(0.16, 1, 0.3, 1)` | 弹性出场，用于悬停和展开 |
+| `--ease-out-quart` | `cubic-bezier(0.25, 1, 0.5, 1)` | 平滑出场，用于颜色过渡 |
+| `--ease-in-out-cubic` | `cubic-bezier(0.65, 0, 0.35, 1)` | 对称缓动，用于循环动画 |
+
+### 时长
+
+| 变量 | 值 | 用途 |
+|------|-----|------|
+| `--duration-fast` | `150ms` | 快速反馈（颜色变化） |
+| `--duration-normal` | `300ms` | 标准过渡（悬停效果） |
+| `--duration-slow` | `500ms` | 慢速过渡（大位移） |
+| `--duration-breath` | `3s` | 呼吸动画周期 |
+
+### 关键帧动画
+
+| 动画名 | 效果 | 用途 |
+|--------|------|------|
+| `breathe` | 透明度 0.4→0.7 + 缩放 1→1.08 | Hero 光球呼吸 |
+| `fadeInUp` | 透明度 0→1 + 上移 20px | 元素入场 |
+| `float` | 上下浮动 6px | 装饰元素 |
+| `shimmer` | 背景位置平移 | 加载占位 |
+| `scrollHint` | 透明度 + 下移 8px | 滚动指示器 |
+| `likeHeartbeat` | 缩放 1→1.3→0.9→1 | 点赞心跳 |
+
+### 动画开关
+
+| 配置 | 说明 | 默认值 |
+|------|------|--------|
+| `animation_enabled` | 启用动效 | `true` |
+| `animation_breath` | 呼吸动画 | `true` |
+| `animation_scroll_reveal` | 滚动渐入 | `true` |
+| `animation_cursor_glow` | 光感跟随 | `false` |
+
+关闭动效时，`html` 元素添加 `wi-no-animations` 类名。