样式指南 · 黄石的时空回环

把阅读中的细节放在一起：文字、图片、公式，以及可以探索的数据。

文字与节奏#

好的排版，给思考留出空间。正文使用随站点提供的 Noto Sans SC，让长篇中文也能轻松阅读。这里有清晰的强调、轻声的旁白，还有通往归档的链接。

写下来，是为了记住那些沿途曾经留意的事。

脚注让补充信息留在附近，又不打断句子。¹

一个短小的观察
一个值得重访的想法

提示与折叠#

展开更多背景

即使关闭 JavaScript，这段内容也可以展开阅读。

观察

从能够看到的现象开始。可以使用方向键切换标签页。

思考

再想一想，现象背后可能意味着什么。

代码#

复制时不包含行号，也可以切换长行的换行显示。

python
7
8
9
def greet(name):
    message = f"Hello, {name} — a deliberately long line to demonstrate horizontal scrolling without widening the article on a small screen."
    return message

Plain text remains readable, too.

旧文的四空格缩进代码也支持复制和换行：

legacy_example = "Indented Markdown keeps its original text."
print(legacy_example)

公式#

行内公式: $a_{n+1} = a_n + 1$. 旧文兼容写法: $E = mc^2$.

$$ \sum_{i=1}^n i = \frac{n(n+1)}{2} $$\[ \begin{aligned} f(x) &= \int_0^x t^2\,dt \\ &= \frac{x^3}{3} \end{aligned} \]

表格#

组件	键盘操作	小屏幕	关闭 JavaScript
表格	Tab / ← →	局部横向滚动	保留完整数据
代码	Tab / Enter	滚动或换行	保留高亮源码
图表	Tab / Enter	自适应容器	保留说明和源配置

图片#

两个同心圆与一枚黄色圆点重复的练习。点击放大，按 Escape 关闭。

一周的数据#

阅读与写作阅读从周一的 30 分钟上升到周六的 75 分钟。点击图例筛选，拖动滑块缩放。

启用 JavaScript 后显示交互图表，源配置见下方。

查看源配置

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "top": 0,
    "left": 64,
    "data": [
      "Reading",
      "Writing"
    ]
  },
  "grid": {
    "left": 64,
    "right": 20,
    "top": 52,
    "bottom": 112
  },
  "xAxis": {
    "type": "category",
    "data": [
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat",
      "Sun"
    ]
  },
  "yAxis": {
    "type": "value",
    "name": "Minutes",
    "nameLocation": "middle",
    "nameGap": 44,
    "nameRotate": 90
  },
  "dataZoom": [
    {
      "type": "slider",
      "start": 0,
      "end": 100,
      "height": 18,
      "bottom": 8
    }
  ],
  "series": [
    {
      "name": "Reading",
      "type": "bar",
      "data": [
        30,
        45,
        35,
        60,
        40,
        75,
        65
      ]
    },
    {
      "name": "Writing",
      "type": "bar",
      "data": [
        15,
        20,
        30,
        25,
        35,
        50,
        40
      ]
    }
  ]
}

从 JSON 文件加载同一组数据每日阅读与写作时长，通过 chart shortcode 引用。

启用 JavaScript 后显示交互图表，源配置见下方。

查看源配置

{"dataZoom":[{"bottom":8,"end":100,"height":18,"start":0,"type":"slider"}],"grid":{"bottom":112,"left":64,"right":20,"top":52},"legend":{"data":["Reading","Writing"],"left":64,"top":0},"series":[{"data":[30,45,35,60,40,75,65],"name":"Reading","type":"bar"},{"data":[15,20,30,25,35,50,40],"name":"Writing","type":"bar"}],"tooltip":{"trigger":"axis"},"xAxis":{"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"type":"category"},"yAxis":{"name":"Minutes","nameGap":44,"nameLocation":"middle","nameRotate":90,"type":"value"}}

时间与页数四次观察中，阅读时间越长，读完的页数通常越多。

启用 JavaScript 后显示交互图表，源配置见下方。

查看源配置

{"tooltip":{},"xAxis":{"name":"min"},"yAxis":{"name":"pages"},"series":[{"type":"scatter","data":[[15,8],[30,18],[45,22],[60,35]]}]}

流程与时序#

从想法到记录想法形成草稿，草稿成为记录，再带来新的想法。

启用 JavaScript 后显示交互图表，源配置见下方。

查看源配置

flowchart LR
    A[Idea] --> B[Draft]
    B --> C[Note]
    C --> A

一次简单的交流读者打开一篇记录，带走一个想法。

启用 JavaScript 后显示交互图表，源配置见下方。

查看源配置

sequenceDiagram
    Reader->>Notebook: Open a note
    Notebook-->>Reader: A thought to take away

原始 HTML#

原生 HTML 仍然可用

现有内容可以继续沿用原始 HTML。

回环图形与字体#

顶部导航排在环面下方的中央留白中，使用 Ark Pixel Font 的 12px 字形，以 18px 展示。四个入口是纯文字页面链接，当前页面以暖黄色和下划线标记。右上角的语言、太阳、月亮、屏幕和搜索图标采用方格像素形状；配色也可用键盘方向键选择。

正文使用随站点提供的 Noto Sans SC，英文使用 Geist；代码与标注使用 JetBrains Mono。可变字重让标题保持清晰，正文保持舒展。

从一个问题出发，让下一次探索有迹可循。

FIG. 01 / THE LOOP

每一次回环，都是新的起点。

回环标识#

头像、页头和浏览器图标来自同一个倾斜环面。小尺寸减少辅助网格，加粗轮廓与暖黄色轨道，保留清楚的中心留白。

Loop / 回环标识

一条简短的参考信息，可以跳回正文。 ↩︎