雷 欣 珂 Lei Xinke
联系
§ VII.b — Artifacts · Here

此 处

Here

关于这个站本身的几句话 — 字体、色调、章节、工具,以及为什么要做。

— 为 什 么 / Why

〔开场段第一段留位 — 这里说为什么做这个站,而不是用律所主页 / 朋友圈 / LinkedIn。〕

〔开场段第二段留位 — 这里说这个站想做成什么,不想做成什么。〕

— 字 体 / Type

中文衬线
Noto Serif SC 用于标题、引文、刊物式签名 — 笔画饱满,中文文人气 业 务 不 含 糊 · 研 究 不 放 过 · 表 达 不 轻 浮
中文无衬
Noto Sans SC 用于正文、导航、密集信息 — 笔画轻,屏幕长读不累 一个律师的网站,但也是一个写作者、研究者、表达者的网站。
英文衬线
Cormorant Garamond Garamond 现代复刻;italic 优美 — 章节眉、副标、罗马数字、显示数字 Lei Xinke · Practice that Speaks · § VII — Artifacts
英文无衬
Inter 中性现代 — 仅履历陈列柜(暖白 + Inter + JetBrains Mono)的局部语言 A lawyer, a researcher, a writer — three rooms, one door.
等宽
IBM Plex Mono 页眉 § 章节号、元数据 meta、技术细节 — 给"刊物 / 期刊"语法做骨架 § I — VII · 2026.05.24 · build · 52 pages · leixinke.com

全部自托管 woff2 在 public/fonts/(脚本 scripts/fetch-fonts.mjs)— 不向 Google Fonts CDN 发请求,国内访客与隐私同时受益。 Cormorant Garamond 在 CJK 并置时偏小,size-adjust: 106% 校准上调, 与 Noto Serif SC 视觉同高;web 字体未到时以 local('Times New Roman') + size-adjust: 90% 收窄顶替,swap 时减少英文回流。

— 色 调 / Palette

深咖
主深色背景(首页 hero / 摄影目光)— 不是黑,带暖意,离平黑
冷灰
主浅色背景 — 不是纯白,稍冷藏气,与 hot warm 衬线互衬
铜金
管「动作 / hover / active / 高亮」— 整站的"美学"色,主页眉短线、按钮 underline
亮金
深棕底上需要强对比时换用(NextStop dark 的章名 / TopBar progress bar)
墨绿
"严肃"语义锚 — § 章节号 / 免责声明 / NextStop eyebrow / Insights 学术分类
朱红
"高位锚点"— 业绩页凿痕「标杆」印、履历批注、比例条首段。少而准,不滥用

2026-04 颜色 token 重构为 OKLCH:亮度感知线性(L 是人眼亮度,不是 sRGB 伪亮度)、 color-mix() 跨色调过渡平滑、与 P3 屏幕色域显示更准。 视觉与原 hex 等价(δE < 0.5,人眼无法分辨)。 语义 token --ink / --bg / --rule 在 body[data-theme=dark] 下自动重映射,新组件不用为深色主题手写镜像。

— 节 奏 / Scales

间距 / 字号 / 动效 各成档,新组件先从档里挑。"档"不是教条 — hero 大字 / 频繁视觉过渡 等位置可破档,但前提是"先看 7/9/3 档够不够"。

间距 — Spacing
--s-1 8px icon 间隙、文字与符号
--s-2 16px list 内 gap、卡内 gap
--s-3 24px 卡内 padding、移动端容器 padding
--s-4 32px 块内、组与组的间距
--s-5 56px 桌面容器 padding、节内大间距
--s-6 80px 节与节的间距
--s-7 120px 大节 / hero 顶部间距
字号 — Type
--fs-meta 业 11px mono 小字 / eyebrow
--fs-sub 业 13px sub copy / 副标
--fs-body 业 15px 主正文(prose)
--fs-lead 业 17px 段落引言 / section sub-title
--fs-h3 业 22px 小节标题 / page-lede
--fs-h2 业 28px page-title-en / 大副标
--fs-h1 业 36px 超大副标 / featured title
--fs-hero 业 64px hero 主标题
--fs-display 业 88px page-title
动效 — Motion
--t-fast 180ms 颜色 / 透明度 hover
--t-normal 320ms border / 小位移 / shadow
--t-slow 500ms 位移大动作 / padding-shift

整站只用 3 档 duration + 1 条 cubic-bezier(0.22, 1, 0.36, 1) easing。 杜绝 0.25s / 0.35s / 0.45s 这类随手值,避免不同组件的"物质感"分裂。

— 章 节 体 系 / Chapters

整站像一本期刊,有 7 章 + 1 终点。每章用 § + 罗马编号锚定,刊物气质优先于 SaaS 信息架构。键盘 ← / → 在章间环形翻;底部 NextStop 翻到下一站, VII 翻完回 I,"这也是我,那也是我"。

— 工 具 栈 / Stack

框架
Astro 5 静态站点生成(SSG),输出原生 HTML,首屏即可读;内容驱动,无前端框架的运行时税。 〔候选〕不选 Next/React:这站的内容大于状态,SSG 0 client JS 就够;客户端 hydration 在律师品牌站是负资产。
内容
Markdown + Content Collections 业绩 / 洞察 / 同席 / 摄影目光 全部 .md;字段在 src/content/config.ts 校验,自动收录,首页与列表页同源。 〔候选〕不选 Notion / Strapi / 任何 headless CMS:作者本人写,git 即可版本控制 + 协作 + 备份;CMS 是给团队不是给一个人。
样式
原生 CSS + 设计 token 颜色 / 间距 / 字号 / 动效 4 套 token 在 global.css :root 收口;主题切换走 var() 一处映射,组件不重写。 〔候选〕不选 Tailwind:utility-first 的密集 class 会冲淡刊物气质;CSS 变量已足够做设计系统级抽象。
字体
自托管 woff2 public/fonts/ 下托管 5 套字体的 woff2;unicode-range 渐进加载,size-adjust 度量校准 Cormorant 适配 CJK 大小。 不向 Google Fonts CDN 发请求 — 国内访客快、隐私不外泄、字体子集可控。脚本见 scripts/fetch-fonts.mjs。
翻页
View Transitions API 纯 CSS @view-transition + 200ms 极轻交叉淡入(Chromium 启用,Safari/Firefox 优雅退化为瞬切)。 〔候选〕不选 SPA(React Router / Next App Router):MPA 跨页转场天然脆,这站试过 6 轮升幕 / curtain 全部失败 — 200ms fade 才是不可能坏的方案。
部署
Cloudflare Pages main 分支 → 生产 leixinke.com;任意分支 push → 自动生成预览 URL;带宽 / 请求都免费无上限。 〔候选〕不选 Vercel:Pages 免费档对个人站宽到看不见上限;Vercel 反而是带宽收费的;DX 差异在律师品牌站可忽略。
PR 体检
GitHub Actions 每个 PR + 分支 push 自动跑 astro check + eslint + vitest + build;一格红 / 绿告诉你能不能合,不用进 Cloudflare 看 log。
工具链
ESLint + Prettier + Vitest lint 走 strategy b(现有 warning 不阻塞,新代码遵守);prettier 配好但不强制;vitest 守 8 条不变量(七章 / nextStop 环 / 联系)。
SEO
canonical + og:* + Person JSON-LD 每页 head 注入 canonical 绝对路径 + og:image 1200×630 + twitter:card + Person schema(worksFor LegalService),Google 富摘要 / 微信 / Twitter 分享卡全套就位。

— 印 刷 友 好 / Print

律师、学者受众里相当一部分会把"履历""业绩""洞察"打印纸版带去会议。 本站写了 @media print 200+ 行规则:白底黑字、11pt 衬体、 A4 1.8cm × 2cm 边距、列表 / 卡 / 时间线 不允许被切两半、 标题不允许出现在页底再翻页、外链在文末展开 URL 纸版仍能溯源。

现在试一下 — 在任一章节页(履历 / 业绩 / 洞察)按 ⌘ P / Ctrl P, 打印预览里会看到一份纸版,不是屏端版的截屏。

— 更 新 日 志 / Changelog

  1. 2026-05 PR #14 , #15 , #16 , #17
    工程层全面收口
    • SEO 闭环:canonical / og:* / twitter card / Person JSON-LD / robots.txt 全套就位
    • 组件抽象:Modal / PageHeader / client.ts 模块化(8 段 IIFE → 1 个 6.2 KB 共享 bundle)
    • a11y:modal / 抽屉 focus trap + inert 背景,WCAG 2.4.3 + 2.1.2 合规
    • 暗色 token swap:--ink / --bg / --rule 等 6 个语义 token,组件不再手写 dark 镜像
    • 工具链:eslint + prettier + vitest 极简骨架,PR 自动跑
  2. 2026-05 PR #10 , #11 , #12 , #13
    内容栏目入卷
    • 承接 /expertise:六函(Six Folios)— 经院四段论证体融合 bento
    • 凭据 /testimonials:一览 4-up wall + 点开 lightbox 两联
    • 洞察 /insights:四体(学术 / 实务 / 商业 / 闲笔)+ 按时 toggle + 客户端搜索
    • 14 篇文章按上传内容全部 markdown 落地
  3. 2026-05 PR #4 , #5 , #7
    排版深化
    • 文章正文衬线化:Cormorant Body + Noto Serif SC + size-adjust 度量校准
    • 链接预览 + Tufte 边注 + 术语库框架
    • CJK 标点 line-break: strict + text-spacing-trim
  4. 2026-04 PR #1 , #2
    上线与履历陈列柜
    • 横向 scroll-driven 履历陈列柜(Direction D)— 暖白 + Inter,履历专用语言
    • 承接页 band/bento 真文初版
    • OKLCH 颜色 token 重构,翻页 200ms 交叉淡入

— 参 考 / References

〔参考清单留位 — 影响过此站设计的网站、刊物、字体规范、出版物。 例:某律所网站、某摄影师 colophon、某期刊版式 …〕

— 致 谢 / Colophon

〔致谢段留位 — 帮助过此站建成的人、给过反馈的同行、文字编辑、客户。〕

字体许可
本站全部字体使用 SIL Open Font License 1.1 — Noto Serif/Sans SC、Cormorant Garamond、Inter、IBM Plex Mono 均为 OFL。
本站源码
leixinke/leixinke-site · 欢迎 fork / 借鉴 / 提 issue
本页构建
· 每次 main 合并后重 build,这个时间会刷
↑