v0.13 baseline · git 初始化 + 仓库瘦身
把所有本地 demo / 测试 / 上传图 / 调试脚本搬入 local-tests/，写 .gitignore 忽略整个测试目录与 node_modules/。本次起 skill 仓库 只跟踪：SKILL.md / HANDOFF.md / PRODUCT.md / assets/（3 模板）/ references/（15 规则文档）/ agents/openai.yaml / validate-social-deck.mjs / package.json + lock。 历次版本（v0.1-v0.12）的全部实质改动已包含在当前文件状态中—— HANDOFF.md 的版本历史段保留作为时间轴文字记录，但代码层面以 此 commit 为唯一基线，后续逐次 commit 对应 HANDOFF.md 新增段落。 HANDOFF/PRODUCT/category-cookbook/components/style-system 中的 demo 路径引用已加 local-tests/ 前缀。SKILL.md Step 5 line 190 的 'social-card-<slug>/' 是下游用户工作区的命名约定，未改动。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
郭浩andClaude Opus 4.7 committed
commit
82d221bb90
26 files changed
+6329
No files matched your search
@@ -0,0 +1,208 @@
|
||||
# Theme Presets
|
||||
|
||||
Use one theme for one image package. Do not mix palettes across pages unless the user explicitly asks for a deliberate multi-chapter system.
|
||||
|
||||
## Editorial Magazine x E-ink Palettes
|
||||
|
||||
These are adapted from the Guizang PPT electronic-magazine mode for static Rednote and WeChat images.
|
||||
|
||||
### Ink Classic
|
||||
|
||||
Use for business commentary, AI essays, product thinking, and neutral editorial posts.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #f3f0e8;
|
||||
--paper-2: #ebe6da;
|
||||
--ink: #0a0a0b;
|
||||
--muted: #68625a;
|
||||
--line: rgba(10,10,11,.22);
|
||||
--accent: #111111;
|
||||
--accent-soft: #d8d2c6;
|
||||
}
|
||||
```
|
||||
|
||||
### Indigo Porcelain
|
||||
|
||||
Use for technology, research, data, AI infrastructure, and calm analytical writing.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #f2f4f5;
|
||||
--paper-2: #e5ebef;
|
||||
--ink: #0a1f3d;
|
||||
--muted: #5f6d78;
|
||||
--line: rgba(10,31,61,.20);
|
||||
--accent: #315d93;
|
||||
--accent-soft: #d7e1ec;
|
||||
}
|
||||
```
|
||||
|
||||
### Forest Ink
|
||||
|
||||
Use for hiking, outdoor, nature, sustainability, personal field notes, and grounded lifestyle posts.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #f5f1e8;
|
||||
--paper-2: #e8dfcf;
|
||||
--ink: #16251b;
|
||||
--muted: #5d665d;
|
||||
--line: rgba(22,37,27,.22);
|
||||
--accent: #2e6b4f;
|
||||
--accent-soft: #d4dfd2;
|
||||
}
|
||||
```
|
||||
|
||||
### Kraft Paper
|
||||
|
||||
Use for memory, craft, personal essays, old objects, creator notes, and warm low-tech topics.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #eedfc7;
|
||||
--paper-2: #dfc9a8;
|
||||
--ink: #2a1e13;
|
||||
--muted: #755f49;
|
||||
--line: rgba(42,30,19,.24);
|
||||
--accent: #9b5a2e;
|
||||
--accent-soft: #d5b58f;
|
||||
}
|
||||
```
|
||||
|
||||
### Dune
|
||||
|
||||
Use for design, object studies, portfolio-like covers, gallery tone, and restrained aesthetic posts.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #f0e6d2;
|
||||
--paper-2: #ded0b7;
|
||||
--ink: #1f1a14;
|
||||
--muted: #6f6557;
|
||||
--line: rgba(31,26,20,.22);
|
||||
--accent: #8f7650;
|
||||
--accent-soft: #d4c2a4;
|
||||
}
|
||||
```
|
||||
|
||||
### Midnight Ink
|
||||
|
||||
The **only** official dark Editorial palette. Use for game key art, night photography, cinematic covers, dark-themed cultural pieces — content whose source imagery is already dark and would be diminished by paper backgrounds. Do not improvise other dark palettes; if Midnight Ink does not fit, pick a different mode (Editorial dark is not a universal switch).
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #0e0d0c;
|
||||
--paper-2: #1a1714;
|
||||
--ink: #ece2cf;
|
||||
--muted: #9a8c75;
|
||||
--line: rgba(236,226,207,.22);
|
||||
--accent: #d4a04a;
|
||||
--accent-soft: #3a2a14;
|
||||
}
|
||||
```
|
||||
|
||||
Midnight Ink **must** also override two background layers — light-paper math does not carry over:
|
||||
|
||||
```css
|
||||
[data-theme="midnight-ink"] .grain {
|
||||
opacity: .26;
|
||||
mix-blend-mode: screen;
|
||||
background-image: radial-gradient(rgba(255,244,214,.10) 1px, transparent 1px);
|
||||
}
|
||||
[data-theme="midnight-ink"] .paper-wash {
|
||||
background:
|
||||
radial-gradient(80% 50% at 28% 16%, rgba(212,160,74,.12), transparent 64%),
|
||||
radial-gradient(70% 60% at 80% 86%, rgba(60,40,20,.20), transparent 72%),
|
||||
linear-gradient(180deg, rgba(236,226,207,.02), rgba(0,0,0,.32));
|
||||
}
|
||||
[data-theme="midnight-ink"] .frame-img {
|
||||
background: #18120f;
|
||||
box-shadow: 0 0 0 1px rgba(236,226,207,.10);
|
||||
}
|
||||
```
|
||||
|
||||
The seed `template-editorial-card.html` ships these overrides — just switch `data-theme` and they apply automatically.
|
||||
|
||||
Magazine palette rules:
|
||||
|
||||
- Use `--paper` as the main background and `--ink` as primary type.
|
||||
- Use `--accent` sparingly: section marker, page number, pull quote rule, or one highlighted phrase.
|
||||
- `--paper-2` can support photo wells, issue strips, or checklist bands.
|
||||
- Light palettes (the first five): do not turn into beige-on-beige. Maintain real contrast.
|
||||
- Midnight Ink: do not stack opaque cards or fills on the page. Dark Editorial relies on photo bleeds + warm gilt accent for hierarchy, not background blocks.
|
||||
|
||||
## Swiss International Palettes
|
||||
|
||||
These are adapted from the Guizang PPT Swiss mode.
|
||||
|
||||
### IKB Blue
|
||||
|
||||
Default for AI, technology, product updates, design, and engineering topics.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #fafaf8;
|
||||
--ink: #0a0a0a;
|
||||
--grey-1: #f0f0ee;
|
||||
--grey-2: #d4d4d2;
|
||||
--grey-3: #737373;
|
||||
--accent: #002FA7;
|
||||
--accent-on: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
### Lemon Yellow
|
||||
|
||||
Use for young, consumer, active, retail, sporty, or playful information.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #fafaf8;
|
||||
--ink: #0a0a0a;
|
||||
--grey-1: #f0f0ee;
|
||||
--grey-2: #d4d4d2;
|
||||
--grey-3: #737373;
|
||||
--accent: #FFD500;
|
||||
--accent-on: #0a0a0a;
|
||||
}
|
||||
```
|
||||
|
||||
### Lemon Green
|
||||
|
||||
Use for ecology, future, emerging tech, health, and highlighter-like contemporary topics.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #fafaf8;
|
||||
--ink: #0a0a0a;
|
||||
--grey-1: #f0f0ee;
|
||||
--grey-2: #d4d4d2;
|
||||
--grey-3: #737373;
|
||||
--accent: #C5E803;
|
||||
--accent-on: #0a0a0a;
|
||||
}
|
||||
```
|
||||
|
||||
### Safety Orange
|
||||
|
||||
Use for industrial, warning, urgency, risk, decision points, and sharp corrections.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--paper: #fafaf8;
|
||||
--ink: #0a0a0a;
|
||||
--grey-1: #f0f0ee;
|
||||
--grey-2: #d4d4d2;
|
||||
--grey-3: #737373;
|
||||
--accent: #FF6B35;
|
||||
--accent-on: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
Swiss palette rules:
|
||||
|
||||
- Use exactly one `--accent`.
|
||||
- Do not use gradients, shadows, glass, or mixed accent colors.
|
||||
- If the accent is yellow or green, text on accent must use `--accent-on: #0a0a0a`.
|
||||
- Prefer pure blocks, hairline rules, and grid rhythm.
|
||||
Reference in new issue
Block a user