微 信 WeChat
个人微信
扫码加我个人微信
商法漫游指南
扫码关注公众号
§ Here
此 处
Here
关于这个站本身的几句话。
— 为 什 么 / Why
这里把一个人的几种工作放在一起：简历交代经历，凭据留下他人的评价，同席记录到过的场合，洞察收存写下的文章，等待留给摄影。一览先把它们摆在眼前，再由各章展开。
页面从照片进入，向下读到文字，最后走向下一站。照片给每一章一个开场，排版给内容留下秩序。此处写下这套呈现实际使用的字体、色调、尺度与工具。
— 字 体 / Type
- 中文衬线
- Noto Serif SC 用于此处的段落、章节名称与字体样张；长文正文也由它承接中文。宋体的笔画层次留在阅读里。 业务不含糊 · 研究不放过 · 表达不轻浮
- 中文无衬
- Noto Sans SC 用于此处的条目说明、类别标签与密集信息。衬线承担叙述，无衬线承担检索。 简历、凭据、同席、洞察、等待。
- 英文衬线
- Cormorant Garamond 用于此处的字体名称、英文栏目名与罗马数字。长文另设 Cormorant Body 字体面，调整英文与中文并排时的度量。 Here · Type · Palette · § I — V
- 英文无衬
- IBM Plex Sans 用于简历英文版等指定排版区域，是现有字体系统中的英文无衬线。 Resume · Experience · Selected Work
- 等宽
- IBM Plex Mono 用于此处的分节眉题、变量名与构建信息；中文字符由字体栈中的 Noto Serif SC 接续。 --fs-body: 15px · --s-7: 120px
- 外壳字体
- s / 系统字体 摄影外壳加载本地 s.woff2，CSS 字体名为 s；共享导航的中文姓名使用 Songti SC / Noto Serif SC，英文署名及封面英文副标题使用 Georgia。s 是代码别名，文件未提供可核实的正式家族名。 Lei Xinke · Here
五套正文与信息字体由本站托管，按字符范围加载；摄影外壳另有本地字体与系统字体回退。
长文英文使用 Cormorant Body，size-adjust: 106%；
回退字体面使用 size-adjust: 90%。这两项校准用于指定字体面，并不覆盖所有英文标题。
— 色 调 / Palette
- 纸面
- 当前此处与章节阅读区域的背景。纸纹以 0.035 的透明度、multiply 混合方式叠加，留在底色里。
- 正文
- 当前此处的主文字与共享导航在纸面上的颜色。
- 说明
- 当前此处的条目说明与次级文字。
- 弱字
- 当前此处的辅助说明与次一级信息。
- 铅灰
- 当前此处的名称、色值与链接强调；阅读区域用它覆盖基础系统的铜金与墨绿映射。
- 等待
- 共享导航在浅色背景上的等待入口；深色背景上使用 #bd9b59。
- 深咖
- 基础设计系统保留的深色背景参考值；当前摄影封面的明暗由图像决定。
- 朱红
- 基础系统中保留的批注与标记颜色，供具体页面使用。
基础颜色变量使用 OKLCH 与 color-mix()，上面的色值供查阅与复制。
当前此处的阅读样式另作映射：纸面、正文、说明与铅灰强调共同形成灰阶。
条目分隔线使用 #26262326，弱线使用 #26262315。摄影区域的色调随图像变化。
— 节 奏 / Scales
基础系统保留七档间距、九档字号与三档过渡。它们是排版的起点；当前页面还有各自的尺寸，摄影外壳也有独立的动效节奏。下列尺标展示基础变量。
间距 — 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
基础缓出曲线为 cubic-bezier(0.22, 1, 0.36, 1)。
当前此处的正文与条目说明为 16px，行高 1.85；分节眉题与类别标签为 14px。
桌面阅读区域最大宽度为 1120px，分节采用 180px 眉题列与 52px 列间距，节间留白 100px；
760px 以下改为单列，节间留白 64px。封面中文标题使用随视口变化的字号，桌面为
clamp(56px, 6vw, 105px)，移动端为 64px；英文副标题使用 Georgia。
— 章 节 体 系 / Chapters
首页把六个入口放在同一组照片中。一览标作 § 00，之后是 I—V 五个正章。 导航与页尾的下一站连接各章；联系与此处不占罗马编号。当前此处从联系之后接入，页尾回到一览。
— 工 具 栈 / Stack
- 框架
- Astro 5 + TypeScript Astro 构建内容页面与静态产物，TypeScript 用于配置、数据与页面逻辑。当前站点也运行客户端脚本：导航、搜索、画布与摄影转场各自承担交互。
- 内容
- Markdown + Content Collections + 数据文件 文章与记录通过 Markdown 和内容集合组织；简历、章节配置及此处的字体、色板、尺标等使用独立数据文件。固定文稿与连续条目分别维护。
- 样式
- 原生 CSS + 设计变量 + 页面样式 基础字号、间距、字体与主题映射集中在 global.css；融合外壳、共享导航与阅读区域另有样式。当前呈现由基础变量与这些局部覆盖共同决定。
- 字体
- 本地 WOFF2 + 系统回退 Noto、Cormorant 与 IBM Plex 字体由本站托管，字体面使用 font-display: swap 与字符范围加载。摄影外壳另加载本地 s.woff2；Georgia、Songti SC 等由系统字体栈提供。
- 图像与转场
- WebGL + 客户端章节路由 桌面摄影外壳使用 WebGL 纹理渲染，配合章节路由、封面入场与下一站过渡。移动端有独立渲染脚本。基础样式仍保留 200ms 的 CSS View Transitions，它不代表融合外壳的全部动效。
- 阅读与交互
- 原生 JavaScript + DOM + iframe 主要章节内容以内联 DOM 接入外壳；当前联系与此处以 iframe 接入，通过消息传递报告高度并把滚动交给外层。导航菜单使用 dialog；凭据、搜索与页内装置保留各自交互。
- 发布
- Sites · 静态构建产物 当前网站发布在 a.leixinke.chatgpt.site。Astro 构建之后，导出脚本组合摄影外壳、章节内容、资源与路由，生成 Sites 所使用的 dist 目录。
- 检查
- astro check · ESLint · Vitest · Prettier 项目已有类型检查、代码检查、测试与格式化工具。verify 脚本串联检查、构建、lint 与测试；仓库也保留 GitHub Actions 检查工作流。
- 页面信息
- sitemap · canonical · Open Graph · JSON-LD Astro 内容页布局生成规范地址、分享元信息与结构化数据；发布脚本为融合入口调整地址。元信息是否完整，还取决于具体页面的配置和分享图资源。
— 印 刷 友 好 / Print
内容页的基础样式保留打印规则：A4 纸张，1.8cm × 2cm 页边距，11pt 衬线文字，白底黑字。 打印时移除导航、装饰与动效，并处理标题、条目和外链的纸面呈现。
当前融合页面还有摄影画布与嵌入内容。内容文档的打印规则仍在，外层页面并不等同于一份已完整校验的纸版。 使用 ⌘ P / Ctrl P 时，以实际打印预览为准。
— 更 新 日 志 / Changelog
- 当前版本 · 摄影外壳与章节阅读
- 首页提供一览、简历、凭据、同席、洞察、等待六个入口；一览标作 § 00，五个正章使用 I—V。
- 共享导航把联系与此处列作辅助入口；此处的下一站回到一览。
- 摄影封面与下一站沿用同一套渲染外壳，阅读区域接入各章实际内容。
- 此处的阅读区域采用冷灰纸面、灰色文字与左侧分节眉题；基础字体和尺标继续保留。
— 参 考 / References
当前摄影外壳的参考资源来自项目中保存的 Camille Mormal 页面资源，经本地脚本接入本站章节与照片。正文部分沿用本站的字体、数据与排版。这里仅记录代码中可以核实的来源；其他个人阅读与设计影响，待作者补记。
— 致 谢 / Colophon
本站使用开源字体与开发工具。字体作者与项目维护者的工作留在每一页里；具体协作者与反馈者，待作者补记。