Time Loop of Huangshi

Style guide

On this page

A notebook for the details: typography, images, equations, and interactive diagrams.

Words & rhythm#

Good typography leaves room to think. This page uses the same components as every post: a clear emphasis, a softer aside, and a link to the archive.

We write to remember what we noticed along the way.

A footnote keeps additional context close, without interrupting the sentence.¹

A short observation
An idea worth returning to

Notices & details#

A little more context

This content is still available with JavaScript disabled.

Observation

Start with what you can see. Use the arrow keys to switch tabs.

Reflection

Then consider what the observation might mean.

Code#

Copy the source without line numbers, or wrap long lines.

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 code indented with four spaces also supports copy and line wrapping:

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

Equations#

Inline notation: \(a_{n+1} = a_n + 1\). Legacy notation: $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} \]

Tables#

Component	Keyboard	Small screens	Without JavaScript
Table	Tab / ← →	Scroll locally	Full data
Code	Tab / Enter	Scroll or wrap	Highlighted source
Diagram	Tab / Enter	Responsive container	Description and source

Images#

Two concentric circles and a small yellow dot A study in repetition. Select to enlarge; Escape to close.

Loop detail — The existing figure shortcode is supported.

A week in numbers#

Reading and writingReading rises from 30 minutes on Monday to 75 on Saturday. Toggle a legend or drag the zoom slider.

Enable JavaScript for the interactive chart. Source is available below.

View source

{
  "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
      ]
    }
  ]
}

The same data, from a fileDaily reading and writing time, loaded with the chart shortcode.

Enable JavaScript for the interactive chart. Source is available below.

View source

{"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"}}

Time and pagesFour observations: more reading time generally corresponds to more pages.

Enable JavaScript for the interactive chart. Source is available below.

View source

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

Flows & conversations#

From idea to noteAn idea becomes a draft, then a published note, and eventually a new idea.

Enable JavaScript for the interactive chart. Source is available below.

View source

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

A quiet exchangeThe reader opens a note and receives a thought to take away.

Enable JavaScript for the interactive chart. Source is available below.

View source

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

Raw HTML#

Native HTML still works

Existing content remains compatible.

Loop study & typography#

The navigation sits in the central space beneath the torus. Its four plain text links use the 12px glyphs of Ark Pixel Font, rendered at 18px. Amber text and an underline mark the current page. The language, sun, moon, monitor and search controls use square pixel icons. Arrow keys also change the appearance selection.

Noto Sans SC for Chinese, Geist for Latin text, and JetBrains Mono for code and annotations. Variable weights keep headings clear and prose comfortable. All three fonts are served by this site.

Start with a question; leave a trail for the next exploration.

FIG. 01 / THE LOOP

Every return is a new starting point.

The Loop mark#

The avatar, masthead and favicon share one tilted torus. At small sizes, fewer grid lines and stronger contours keep the amber orbit and open center legible.

The Loop mark

A small reference, with a link back to the text. ↩︎