From 4cb1c85cc3c9ea023ff52110ca49d97b5a5542c9 Mon Sep 17 00:00:00 2001 From: wait4xx Date: Sat, 24 Oct 2026 23:07:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(design):=20=E8=AE=BE=E8=AE=A1=20tokens=20?= =?UTF-8?q?=E4=B8=8E=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E2=80=94=E2=80=94?= =?UTF-8?q?=E4=B8=99=E8=B7=AF=E7=BA=BF=E3=80=8C=E7=81=B0=E9=98=B6=E9=AA=A8?= =?UTF-8?q?=E6=9E=B6=C3=97=E5=88=86=E8=BD=A8=E6=AD=A3=E6=96=87=E3=80=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - tokens.css：四档灰阶/单强调蓝/蓝黑暗色/纸墨面板/情绪色五档/ 字体三轨栈/排版三角(书评20-1.75-720 技术19-1.7)/唯一缓动曲线 - global.css：轻量reset/双轨正文(.prose-reading/.prose-tech)/ 引文A墨线+D金句62px水印/终端风代码块/::selection半透明/ 560px降档18px/动效总闸prefers-reduced-motion 验证: pnpm astro build exit 0；参数与调研报告 §3 一一对应 Spec: 2026-10-24_add-blog-skeleton Co-authored-by: GLM-5.3 --- src/styles/global.css | 162 ++++++++++++++++++++++++++++++++++++++++++ src/styles/tokens.css | 108 ++++++++++++++++++++++++++++ 2 files changed, 270 insertions(+) create mode 100644 src/styles/global.css create mode 100644 src/styles/tokens.css diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..84b7474 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,162 @@ +/* ============================================================ + 全局样式 —— 建立在 tokens.css 之上 + 约束：零运行时框架；动效全部包 prefers-reduced-motion + ============================================================ */ +@import "./tokens.css"; + +/* ---------- 轻量 reset ---------- */ +*, *::before, *::after { box-sizing: border-box; } +* { margin: 0; } +html { -webkit-text-size-adjust: 100%; } +body { + font-family: var(--font-sans); + font-size: 16px; + line-height: 1.6; + color: var(--ink-2); + background: var(--bg); +} +img, svg, video { display: block; max-width: 100%; height: auto; } +input, button, textarea, select { font: inherit; color: inherit; } + +/* 键盘焦点可见但克制 */ +:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } + +/* 跳过导航（无障碍动线） */ +.skip-link { + position: absolute; left: -9999px; top: var(--space-2); + padding: var(--space-2) var(--space-3); background: var(--bg); z-index: 100; +} +.skip-link:focus { left: var(--space-2); } + +/* ---------- 链接（全站唯一强调色纪律） ---------- */ +a { color: inherit; text-decoration: none; } +.link, .prose a { + color: var(--accent); + text-decoration: underline; + text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); + text-underline-offset: 0.2em; + transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); +} +.link:hover, .prose a:hover { text-decoration-color: var(--accent); } + +/* ---------- 版心 ---------- */ +.container { max-width: var(--measure); margin-inline: auto; padding-inline: var(--space-3); } +.container-wide { max-width: calc(var(--measure) + 200px); margin-inline: auto; padding-inline: var(--space-3); } + +/* ============================================================ + 正文分轨（丙路线核心：书评纸墨 × 技术灰阶） + ============================================================ */ + +/* ---- 书评轨：纸面板 + 衬线 + 20/1.75 ---- */ +.prose-reading { + font-family: var(--font-serif); + font-size: var(--prose-size-reading); + line-height: var(--leading-reading); + color: var(--paper-ink); + background: var(--paper); + max-width: var(--measure); + padding: var(--space-5) var(--space-4); + border-block: 1px solid var(--paper-line); + overflow-wrap: break-word; +} +.prose-reading p + p { margin-top: 0.9em; } /* 段间距制，无首行缩进 */ +.prose-reading h2, .prose-reading h3 { line-height: var(--leading-heading); text-wrap: balance; } +.prose-reading h2 { font-size: var(--text-h2); margin-top: 1.8em; } +.prose-reading h3 { font-size: var(--text-h3); margin-top: 1.5em; } + +/* ---- 技术轨：无衬线 + 19/1.7 ---- */ +.prose-tech { + font-family: var(--font-sans); + font-size: var(--prose-size-tech); + line-height: var(--leading-tech); + color: var(--ink-2); + max-width: var(--measure); +} +.prose-tech p + p { margin-top: 0.9em; } +.prose-tech h2 { font-size: var(--text-h2); margin-top: 1.8em; line-height: var(--leading-heading); text-wrap: balance; } +.prose-tech h3 { font-size: var(--text-h3); margin-top: 1.5em; line-height: var(--leading-heading); } + +/* ---------- 引文组件（报告 §3：A 墨线长书摘 / D 金句） ---------- */ +/* 模式 A：学术极简（长书摘） */ +blockquote.quote-block { + border-left: 1px solid var(--paper-line); + border-left-width: 2px; + padding-left: 1.35em; + margin-block: 1.2em; + color: color-mix(in oklab, var(--paper-ink) 72%, transparent); + font-size: 1em; + font-style: normal; /* 反例修正：higan 整段加粗弃用 */ + font-weight: 400; +} +.quote-cite { + display: block; + margin-top: 0.6em; + font-size: 0.875rem; + font-family: var(--font-sans); + color: var(--ink-3); +} +/* 模式 D：金句（62px 巨型引号水印） */ +.pull-quote { + position: relative; + margin-block: 1.6em; + padding-left: 2.2em; + font-size: 0.96em; +} +.pull-quote::before { + content: "\201C"; + position: absolute; left: 0; top: -0.12em; + font-family: Georgia, serif; + font-size: 62px; + line-height: 1; + opacity: 0.18; + color: var(--mood); +} + +/* ---------- 代码（终端风，亮暗同底） ---------- */ +code, kbd, samp { font-family: var(--font-mono); } +:not(pre) > code { + font-size: 0.875em; + background: var(--bg-soft); + padding: 0.15em 0.4em; + border-radius: 4px; + border: 1px solid var(--line); +} +pre { + background: var(--code-bg); + color: var(--code-ink); + font-size: 16px; + line-height: 1.6; + padding: var(--space-3) var(--space-4); + border-radius: 8px; + overflow-x: auto; /* 禁 break-all：正文横向滚动绝不发生 */ + tab-size: 2; +} +pre code { background: none; border: none; padding: 0; font-size: inherit; } +/* 终端窗点缀（圆点由组件层加，此处只管字色纪律） */ +.term-dots { display: flex; gap: 6px; margin-bottom: var(--space-2); } +.term-dots span { width: 10px; height: 10px; border-radius: 50%; background: #30363d; } + +/* ---------- 列表/分隔 ---------- */ +hr { border: none; border-top: 1px solid var(--line); margin-block: var(--space-4); } + +/* ---------- 选区（半透明强调，避免刺眼实心） ---------- */ +::selection { background: var(--accent-soft); } + +/* ---------- 触屏与安全区（§4e：交互组件显式 .tap 类达 44px 目标） ---------- */ +.tap { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } +.safe-area { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } + +/* ---------- 移动端排版降档（≤560px：书评 20→18） ---------- */ +@media (max-width: 560px) { + :root { --prose-size-reading: 18px; --prose-size-tech: 18px; --text-h1: 24px; } + .prose-reading { padding: var(--space-4) var(--space-3); } +} + +/* ---------- 动效总闸（唯一曲线已入 tokens） ---------- */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/styles/tokens.css b/src/styles/tokens.css new file mode 100644 index 0000000..c881564 --- /dev/null +++ b/src/styles/tokens.css @@ -0,0 +1,108 @@ +/* ============================================================ + 设计 tokens —— 丙路线「灰阶骨架 × 分轨正文」 + 参数依据：docs/博客重设计调研报告.md §2/§3（v1.8 定稿） + 命名约定：--<类别>-<语义>，暗色经 [data-theme="dark"] 整套覆盖 + ============================================================ */ + +:root { + color-scheme: light dark; + + /* ---- 底色与文字（骨架四档灰阶） ---- */ + --bg: #ffffff; + --bg-soft: #f7f7f8; /* 次级面板：代码块外框、卡片衬底 */ + --ink-1: #111113; /* 标题 */ + --ink-2: #33343a; /* 正文 */ + --ink-3: #6b6e78; /* 次要：日期、元信息 */ + --ink-4: #a0a3ad; /* 装饰：分隔线、icon 底 */ + --line: #e6e7eb; /* 分隔线 */ + + /* ---- 强调色（全站唯一，链接/hover/选中） ---- */ + --accent: #3454d1; + --accent-soft: rgba(52, 84, 209, 0.12); /* ::selection / 轻底 */ + + /* ---- 分轨：书评纸面板（正文阅读区） ---- */ + --paper: #f8f6f1; /* 米白纸底 */ + --paper-ink: #2c2a26; /* 纸上墨字（比骨架 ink 暖） */ + --paper-line: #d9d4c8; + + /* ---- 书评情绪色（frontmatter mood 覆盖，此处为缺省五档） ---- */ + --mood: var(--ink-3); + --mood-1: #b45309; /* 琥珀 */ + --mood-2: #0f766e; /* 松绿 */ + --mood-3: #7c3aed; /* 紫晶 */ + --mood-4: #9f1239; /* 绛红 */ + --mood-5: #166534; /* 苔绿 */ + + /* ---- 字体三轨 ---- */ + /* 书评正文：霞鹜文楷屏显版（T3 以预分片自托管替换栈首） */ + --font-serif: "LXGW WenKai Screen", "Songti SC", STSong, "Noto Serif CJK SC", + "Source Han Serif SC", SimSun, serif; + /* UI / 技术文：思源黑 */ + --font-sans: "Noto Sans SC", system-ui, -apple-system, "PingFang SC", + "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + /* 代码 */ + --font-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace; + + /* ---- 排版三角（报告 §3：书评 20/1.75/720；技术 19/1.7） ---- */ + --prose-size-reading: 20px; + --prose-size-tech: 19px; + --leading-reading: 1.75; + --leading-tech: 1.7; + --measure: 720px; /* 版心 ≈36 汉字 */ + --leading-heading: 1.3; + + /* ---- 标题字阶 ---- */ + --text-h1: 27px; + --text-h2: 22px; + --text-h3: 19px; + + /* ---- 代码块（终端风，亮暗同底） ---- */ + --code-bg: #0d1117; + --code-ink: #e6edf3; + + /* ---- 动效纪律：全站唯一曲线与时长 ---- */ + --ease: cubic-bezier(0.19, 1, 0.22, 1); + --dur: 350ms; + + /* ---- 间距阶 ---- */ + --space-1: 4px; + --space-2: 8px; + --space-3: 16px; + --space-4: 24px; + --space-5: 40px; + --space-6: 64px; + + /* ---- 布局断点（§4e：1120/820/760/560，供媒体查询引用的文档锚） ---- + --bp-1: 1120px 宽屏：TOC 侧栏常驻 + --bp-2: 820px 笔电：TOC 收起 + --bp-3: 760px 平板竖屏 + --bp-4: 560px 手机（正文降到 18px，见 global.css） */ +} + +/* ---------- 暗色：蓝黑骨架（#191d23 系），纸面板转暗室书页 ---------- */ +[data-theme="dark"] { + color-scheme: dark; + + --bg: #191d23; + --bg-soft: #1f242b; + --ink-1: #f5f5f7; + --ink-2: #c9ccd4; + --ink-3: #8b8f98; + --ink-4: #5c6066; + --line: #2c313a; + + --accent: #8ea2ff; + --accent-soft: rgba(142, 162, 255, 0.18); + + --paper: #201d18; /* 暗室里的书页 */ + --paper-ink: #d8d2c4; + --paper-line: #38342c; + + --code-bg: #0d1117; + --code-ink: #e6edf3; +} + +/* 用户显式选择 light 时钉住亮色（防系统翻转闪烁的配合面） */ +[data-theme="light"] { + color-scheme: light; +}