feat(design): 设计 tokens 与全局样式——丙路线「灰阶骨架×分轨正文」
- 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
This commit is contained in:
wait4xandGLM-5.3 committed
1 parent
eeb9bde121
commit
4cb1c85cc3
2 files changed
+270
No files matched your search
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user