A page laid out from a document

Runs in any browser

Nothing to install: the page below is drawn in your browser by the viewer extension's own code.

A 1:1 replica of a GitHub file page — top bar, repository nav, file tree, breadcrumb, commit row, Preview / Code / Blame — showing a short note on pour-over coffee as the file being viewed. Every string on it comes from a GEML document, every colour and length from a GEML stylesheet (geml-style/v1), and the renderer knows about neither.

The result

Open it on its own page

How it is made

page.geml is the whole page in 13 lines: one embed for the template, one for the document being read. template.geml holds the page's content and nothing else — the bars, nav and file tree as lists of links. article.geml is an ordinary document that knows nothing about the page around it. _index/index.geml names the stylesheet, and github.style.geml holds only layout: frames, slots, built-in words, three states, not one word of GitHub's text. Pointing the page at another document is one src=.

Both checks pass in the demo's folder, with no errors; style check also notes the 99 slots this stylesheet declares that the template leaves empty, which render as nothing:

geml check page.geml
geml style check _index/github.style.geml page.geml --components=tree,segments,code-graph

page.geml

=== meta
title = "Pour-over coffee, one cup"
===

%% 这一页 = 一个模板 + 一份文档。模板在 template.geml 里，换看哪份文档只改下面那行 `src=`。
%% 模板里的块也可以直接写在这份文件里（拆开之前它就是那样）—— 两种写法都合法，没有第三套
%% 机制：`embed` 把一份文档拉进语料，样式表的 `slots=` 本来就够得到语料里任何一份文档的块。

=== embed {#template src="template.geml"}
===

=== embed {#doc src="article.geml"}
===

article.geml

=== meta
title = "Pour-over coffee, one cup"
===

# Pour-over coffee, one cup {#top}

A cone, a paper filter and a kettle are enough. The method below makes one
300 ml cup and takes about four minutes once the water is hot.

## What you need {#need}

- a dripper (any cone) and a paper filter that fits it
- 18 g of coffee, ground medium-fine — like coarse sand
- 300 g of water just off the boil, about 94 °C
- a scale and a timer; a gooseneck kettle helps but is not required

## The ratio {#ratio}

Weigh rather than measure: the same ratio gives the same cup.

=== table {#ratios format=csv header=1}
cup, coffee (g), water (g)
small, 12, 200
one mug, 18, 300
two mugs, 30, 500
===

## Brewing {#brew}

1. Rinse the filter with hot water and pour the rinse away. It warms the dripper
   and takes the paper taste out.
2. Add the coffee, shake it level, and zero the scale.
3. **Bloom.** Pour 40 g of water, just enough to wet every grain, and wait 30
   seconds while the bed rises and settles.
4. Pour slowly in small circles up to 180 g, keeping clear of the paper's edge.
5. At 1:15, pour the rest up to 300 g.
6. Let it drain. It should finish between 3:00 and 3:30.

=== note {#timing}
Faster than 3:00 tastes thin and sour: grind finer next time. Slower than 4:00
tastes bitter: grind coarser.
===

## Taste and adjust {#adjust}

Change one thing at a time and write down what you changed. Grind size moves
the result the most, then water temperature, then the ratio. Fresh beans —
roasted within the last month — matter more than any of the three.

template.geml

=== meta
title = "GitHub blob page — the template"
profile = "geml-form/v1"
source = "1:1 复刻实验（第二版）：模板里的条目是列表与行内链接，样式表只用内含词"
===

%% ——— 页面模板。每个块有 id，可以单独 `geml get`；条目是 GEML 行内：图片、链接、代码。
%% 提示语是链接/图片的 {title=}；计数是行内代码；未读点是一张 8px 的 SVG。

=== text {#splash}
A 1:1 replica of a GitHub page, to see how geml-style renders
===

=== text {#brand}
- ![Open menu](icons/three-bars.svg)
- [![](icons/mark-github.svg)](https://github.com/){title="GitHub"}
- [geml-spec](https://github.com/geml-spec)
- /
- [geml-spec.github.io](https://github.com/geml-spec/geml-spec.github.io)
===

=== text {#brand-caret}
![Switch repository](icons/triangle-down.svg)
===

=== text {#repo-menu}
- [geml-spec/geml-spec.github.io](https://github.com/geml-spec/geml-spec.github.io)
- [geml-spec/geml](https://github.com/geml-spec/geml)
- [Browse all repositories](https://github.com/repos)
===

=== text {#search-icon}
![Open quick search dialog, type / to search](icons/search.svg)
===

=== form-field {#site-search type=text placeholder="Type / to search"}
===

=== text {#search-key}
`/`
===

=== text {#top-ai}
- [![](icons/copilot.svg)](https://github.com/copilot){title="Chat with Copilot"}
===

=== text {#ai-caret}
![Open Copilot…](icons/triangle-down.svg)
===

=== text {#ai-menu}
- [Ask Copilot](https://github.com/copilot)
- [Copilot Chat](https://github.com/copilot)
- Copilot Workspace
===

=== text {#new}
[![](icons/plus.svg)](https://github.com/new){title="Create new..."}
===

=== text {#new-caret}
![Create new…](icons/triangle-down.svg)
===

=== text {#new-menu}
- [New repository](https://github.com/new)
- [Import repository](https://github.com/new/import)
- [New gist](https://gist.github.com)
- [New organization](https://github.com/account/organizations/new)
===

=== text {#top-nav}
- [![](icons/issue-opened.svg)](https://github.com/issues){title="All issues"}
- [![](icons/git-pull-request.svg)](https://github.com/pulls){title="All pull requests"}
- [![](icons/repo.svg)](https://github.com/repos){title="All repositories"}
- [![](icons/inbox.svg) ![unread](icons/dot.svg)](https://github.com/notifications){title="Notifications"}
- [![](icons/avatar.svg)](https://github.com/xiongjy2104){title="Open user navigation menu"}
===

=== text {#repo-nav}
- [![](icons/code.svg) Code](https://github.com/geml-spec/geml-spec.github.io)
- [![](icons/issue-opened.svg) Issues](https://github.com/geml-spec/geml-spec.github.io/issues)
- [![](icons/git-pull-request.svg) Pull requests](https://github.com/geml-spec/geml-spec.github.io/pulls)
- [![](icons/agent.svg) Agents](https://github.com/geml-spec/geml-spec.github.io/agents?author=xiongjy2104)
- [![](icons/comment-discussion.svg) Discussions](https://github.com/geml-spec/geml-spec.github.io/discussions)
- [![](icons/play.svg) Actions](https://github.com/geml-spec/geml-spec.github.io/actions)
- [![](icons/table.svg) Projects](https://github.com/geml-spec/geml-spec.github.io/projects)
- [![](icons/book.svg) Wiki](https://github.com/geml-spec/geml-spec.github.io/wiki)
- [![](icons/shield.svg) Security](https://github.com/geml-spec/geml-spec.github.io/security)
- [![](icons/graph.svg) Insights](https://github.com/geml-spec/geml-spec.github.io/pulse)
- [![](icons/gear.svg) Settings](https://github.com/geml-spec/geml-spec.github.io/settings)
===

=== text {#repo-more}
More ![](icons/triangle-down.svg)
===

=== text {#more-menu}
- [Packages](https://github.com/orgs/geml-spec/packages)
- [Releases](https://github.com/geml-spec/geml-spec.github.io/releases)
- [Deployments](https://github.com/geml-spec/geml-spec.github.io/deployments)
- [Attestations](https://github.com/geml-spec/geml-spec.github.io/attestations)
===

=== text {#side-toggle}
![Collapse file tree](icons/sidebar-expand.svg)
===

=== text {#side-head}
- [![](icons/file-directory-fill.svg) Files](https://github.com/geml-spec/geml-spec.github.io/tree/main)
===

=== text {#side-back}
[![](icons/chevron-left.svg)](https://github.com/geml-spec/geml-spec.github.io){title="Back to the repository"}
===

=== text {#branch-icon}
![main branch](icons/git-branch.svg)
===

=== form-options {#branches format=csv}
value,label
main,main
===

=== form-field {#branch type=select options=#branches value=main}
===

=== text {#side-tools}
- [![](icons/plus.svg)](https://github.com/geml-spec/geml-spec.github.io/new/main/public/examples/style-demo){title="Add file"}
- ![Search this repository](icons/search.svg)
===

=== text {#find-icon}
![Go to file](icons/search.svg)
===

=== form-field {#file-find type=text placeholder="Go to file"}
===

=== text {#find-key}
`T`
===

=== text {#file-tree}
- [![](icons/file-directory-fill.svg) .github](https://github.com/geml-spec/geml-spec.github.io/tree/main/.github)
- [![](icons/file-directory-fill.svg) .vitepress](https://github.com/geml-spec/geml-spec.github.io/tree/main/.vitepress)
- [![](icons/file-directory-fill.svg) benchmarks](https://github.com/geml-spec/geml-spec.github.io/tree/main/benchmarks)
- [![](icons/file-directory-fill.svg) blog](https://github.com/geml-spec/geml-spec.github.io/tree/main/blog)
- [![](icons/file-directory-fill.svg) compare](https://github.com/geml-spec/geml-spec.github.io/tree/main/compare)
- [![](icons/file-directory-open-fill.svg) public](https://github.com/geml-spec/geml-spec.github.io/tree/main/public)
  - [![](icons/file-directory-open-fill.svg) examples](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples)
    - [![](icons/file-directory-fill.svg) geml-media-demo](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/geml-media-demo)
    - [![](icons/file-directory-fill.svg) geml-media-explainer](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/geml-media-explainer)
    - [![](icons/file-directory-open-fill.svg) style-demo](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/style-demo)
      - [![](icons/file-directory-fill.svg) _index](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/style-demo/_index)
      - [![](icons/file-directory-fill.svg) icons](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/style-demo/icons)
      - [![](icons/file.svg) article.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/public/examples/style-demo/article.geml)
      - [![](icons/file.svg) page.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/public/examples/style-demo/page.geml)
      - [![](icons/file.svg) template.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/public/examples/style-demo/template.geml)
    - [![](icons/file-directory-fill.svg) translate-demo](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/translate-demo)
    - [![](icons/file.svg) README.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/public/examples/README.md)
    - [![](icons/file.svg) showcase.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/public/examples/showcase.geml)
  - [![](icons/file-directory-fill.svg) illustrated](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/illustrated)
  - [![](icons/file-directory-fill.svg) logo](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/logo)
  - [![](icons/file-directory-fill.svg) playground](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/playground)
- [![](icons/file.svg) .gitignore](https://github.com/geml-spec/geml-spec.github.io/blob/main/.gitignore)
- [![](icons/file.svg) README.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/README.md)
- [![](icons/file.svg) cheat-sheet.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/cheat-sheet.md)
- [![](icons/file.svg) demos.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/demos.md)
- [![](icons/file.svg) get-started.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/get-started.md)
- [![](icons/file.svg) index.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/index.md)
- [![](icons/file.svg) manifesto-cn.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/manifesto-cn.geml)
- [![](icons/file.svg) manifesto-cn.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/manifesto-cn.md)
- [![](icons/file.svg) manifesto.geml](https://github.com/geml-spec/geml-spec.github.io/blob/main/manifesto.geml)
- [![](icons/file.svg) manifesto.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/manifesto.md)
- [![](icons/file.svg) package-lock.json](https://github.com/geml-spec/geml-spec.github.io/blob/main/package-lock.json)
- [![](icons/file.svg) package.json](https://github.com/geml-spec/geml-spec.github.io/blob/main/package.json)
- [![](icons/file.svg) privacy.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/privacy.md)
- [![](icons/file.svg) terms.md](https://github.com/geml-spec/geml-spec.github.io/blob/main/terms.md)
===

=== text {#breadcrumb}
[geml-spec.github.io](https://github.com/geml-spec/geml-spec.github.io/tree/main) / [public](https://github.com/geml-spec/geml-spec.github.io/tree/main/public) / [examples](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples) / [style-demo](https://github.com/geml-spec/geml-spec.github.io/tree/main/public/examples/style-demo) / **article.geml** ![Copy path](icons/copy.svg)
===

=== text {#commit-left}
[![](icons/avatar.svg)](https://github.com/geml-spec/geml-spec.github.io/commits?author=xiongjy2104){title="commits by xiongjy2104"} [xiongjy2104](https://github.com/xiongjy2104) [The style demo reads its own article](https://github.com/geml-spec/geml-spec.github.io/commits/main/public/examples/style-demo/article.geml) ![Open commit details](icons/ellipsis.svg)
===

=== text {#commit-right}
[Latest commit](https://github.com/geml-spec/geml-spec.github.io/commits/main/public/examples/style-demo/article.geml){title="Latest commit"} [![](icons/history.svg) History](https://github.com/geml-spec/geml-spec.github.io/commits/main/public/examples/style-demo/article.geml){title="History"}
===

=== form-options {#views format=csv}
value,label
Preview,Preview
Code,Code
Blame,Blame
===

=== form-field {#view type=select options=#views value=Preview}
===

=== text {#file-meta}
48 lines (36 loc) · 1.5 KB
===

=== text {#file-actions}
- [![](icons/space.svg)](https://github.com/geml-spec/geml-spec.github.io/spaces){title="Add to space"}
- [![](icons/copilot.svg)](https://github.com/copilot){title="Ask Copilot about this file"}
- [Raw](https://github.com/geml-spec/geml-spec.github.io/raw/refs/heads/main/public/examples/style-demo/article.geml)
- ![Copy raw file](icons/copy.svg)
- [![](icons/download.svg)](https://github.com/geml-spec/geml-spec.github.io/raw/refs/heads/main/public/examples/style-demo/article.geml){title="Download raw file"}
- [![](icons/pencil.svg)](https://github.com/geml-spec/geml-spec.github.io/edit/main/public/examples/style-demo/article.geml){title="Edit this file"}
- ![More edit options](icons/triangle-down.svg)
- ![Outline](icons/list-unordered.svg)
===

_index/index.geml

=== meta
profile = "geml-style/v1"
default-style = "github.style.geml"
===

_index/github.style.geml

=== meta
profile = "geml-style/v1"
title = "GitHub blob page"
source = "亮色与两个页面常量都在下面的记号里 —— 属性里写 {{line}}，装载期换成值；改一次主题只动这一个块。样式表只用内含词，0 个私有键"
canvas = "#ffffff"
canvas-soft = "#f6f8fa"
canvas-inset = "#eff2f5"
fg = "#1f2328"
muted = "#59636e"
accent = "#0969da"
line = "#d1d9e0"
line-soft = "#eaeef2"
side = "260px"
col = 1012
===

%% ---------------------------------------------------------------- 骨架
=== style-screen {#page axis=column background="{{canvas}}" color="{{fg}}" font-family="-apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif" font-size=14px slots="#splash, #topbar, #repo-nav-row, #body"}
===
%% 开场提示：盖住整个视口、内容居中，1.2 秒淡掉。`anchor=viewport` 让它不占版面位置，
%% 所以它排在第一个槽位也不会把页面顶下去；淡完 visibility:hidden，既看不见也挡不住点击。
=== style-frame {#splash anchor=viewport fade-out=1.2 slots="text#splash"}
===
=== style-rule {#splash-card match="text#splash" background="{{fg}}" color="{{canvas}}" font-size=28px line-height=40px padding="24px 40px" border-radius=12px max-width=880px text-align=center}
===
=== style-frame {#topbar axis=row gap=16px padding="8px 16px" background="{{canvas-soft}}" border-bottom="1px solid {{line}}" slots="#brand-group, #search, #ai, #new-group, text#top-nav"}
===
%% 每个下拉都是同一副骨架：一个 frame 把「触发的块」和「浮层 frame」装在一起，浮层贴着这个
%% frame 浮出来（容器都是 position:relative）。触发者是文档里的那一个块 —— 点它，翻它的状态。
%% 浮层贴的是**最近的容器**，所以触发的箭头和它的浮层要单独装一格 —— 否则菜单会从整条
%% 品牌区的左边缘掉下来，而不是从箭头底下。
=== style-frame {#brand-group axis=row gap=8px slots="text#brand, #brand-caret-group"}
===
=== style-frame {#brand-caret-group axis=row slots="text#brand-caret, #repo-menu-panel"}
===
=== style-frame {#repo-menu-panel axis=column visible=no slots="text#repo-menu"}
===
=== style-frame {#new-group axis=row border-left="1px solid {{line}}" padding="0 0 0 16px" slots="text#new, #new-caret-group"}
===
=== style-frame {#new-caret-group axis=row slots="text#new-caret, #new-menu-panel"}
===
=== style-frame {#new-menu-panel axis=column visible=no slots="text#new-menu"}
===
=== style-frame {#repo-nav-row axis=row gap=8px padding="4px 16px" border-bottom="1px solid {{line}}" slots="text#repo-nav, #repo-more-group"}
===
=== style-frame {#repo-more-group axis=row slots="text#repo-more, #more-menu-panel"}
===
=== style-frame {#more-menu-panel axis=column visible=no slots="text#more-menu"}
===
=== style-frame {#search axis=row gap=6px grow=yes max-width=320px margin="0 0 0 auto" padding="4px 8px" border="1px solid {{line}}" border-radius=6px background="{{canvas}}" slots="text#search-icon, form-field#site-search, text#search-key"}
===
=== style-frame {#ai axis=row slots="text#top-ai, #ai-caret-group"}
===
=== style-frame {#ai-caret-group axis=row slots="text#ai-caret, #ai-menu-panel"}
===
=== style-frame {#ai-menu-panel axis=column visible=no slots="text#ai-menu"}
===
=== style-frame {#body axis=row gap=16px padding=16px slots="#side, #main"}
===
=== style-frame {#side axis=column gap=8px width="{{side}}" hide-below="{{col}}" slots="#side-bar, #side-body"}
===
=== style-frame {#side-bar axis=row gap=8px slots="text#side-toggle, text#side-head"}
===
=== style-frame {#side-body axis=column gap=8px slots="#branch-row, #find, text#file-tree"}
===
=== style-frame {#branch-row axis=row gap=4px slots="text#side-back, #branch, text#side-tools"}
===
=== style-frame {#branch axis=row gap=4px grow=yes padding="3px 8px" border="1px solid {{line}}" border-radius=6px font-size=12px slots="text#branch-icon, form-field#branch"}
===
=== style-frame {#find axis=row gap=6px padding="4px 8px" border="1px solid {{line}}" border-radius=6px font-size=12px slots="text#find-icon, form-field#file-find, text#find-key"}
===
=== style-frame {#main axis=column gap=8px grow=yes slots="text#breadcrumb, #commitrow, #card"}
===
=== style-frame {#commitrow axis=row gap=16px padding="8px 16px" background="{{canvas-soft}}" border="1px solid {{line}}" border-radius=6px slots="text#commit-left, text#commit-right"}
===
=== style-frame {#card axis=column grow=yes border="1px solid {{line}}" border-radius=6px slots="#cardbar, #doc-body"}
===
=== style-frame {#cardbar axis=row gap=16px padding="8px 16px" background="{{canvas-soft}}" border-bottom="1px solid {{line}}" slots="form-field#view, text#file-meta, text#file-actions"}
===
=== style-frame {#doc-body axis=column grow=yes padding="0 32px 32px" slots="embed#doc"}
===

%% ---------------------------------------------------------------- 状态
%% 折叠按钮、下拉箭头都是文档里的一个块（一张图），块当触发者；Tab 是 select 字段，值就是状态。
=== style-state {#sidebar type=scalar match="text#side-toggle" on=toggle init-value=open}
===
=== style-state {#aimenu type=scalar match="text#ai-caret" on=toggle init-value=closed}
===
=== style-state {#repomenu type=scalar match="text#brand-caret" on=toggle init-value=closed}
===
=== style-state {#newmenu type=scalar match="text#new-caret" on=toggle init-value=closed}
===
=== style-state {#moremenu type=scalar match="text#repo-more" on=toggle init-value=closed}
===
=== style-state {#tab type=scalar match="form-field#view" on=select}
===

%% 这一页的链接长什么样：GitHub 蓝、不带下划线。宿主不再替所有页面剥链接样式，所以这句话
%% 由样式表说 —— 而且要说一次就够：`*` 是任意节点，`* link` 是语料里的每一个链接，
%% 连 embed 进来那篇文章里的也算。外壳各块自己的颜色规则是它的真超集，各自覆盖。
=== style-rule {#links match="* link" color="{{accent}}" underline=no}
===

%% ---------------------------------------------------------------- 顶栏
=== style-rule {#brand match="text#brand" axis=row gap=8px}
===
=== style-rule {#brand-link match="text#brand link" color="{{fg}}" padding="4px 6px" border-radius=6px}
===
=== style-rule {#brand-hover match="text#brand link" when="@hover" background="{{line-soft}}"}
===
=== style-rule {#brand-icon match="text#brand image" width=16px}
===
=== style-rule {#search-icon match="text#search-icon image" width=14px}
===
=== style-rule {#search-key match="text#search-key code-span" border="1px solid {{line}}" border-radius=4px padding="0 5px" color="{{muted}}" font-size=12px background="transparent"}
===
=== style-rule {#top-ai match="text#top-ai" axis=row}
===
%% 按钮和它右边的箭头是一组，要严丝合缝地对齐 —— 所以两边的边框都挂在**图标**上：
%% 同样是 16px 的替换元素、同样的内边距，盒子必然一样高。挂在块上会跟着整行拉伸，
%% 挂在链接上会被字体行高撑高，两者都比对面高出一截。
=== style-rule {#btn-left match="text#top-ai image, text#new image" padding="6px 8px" border="1px solid {{line}}" border-radius="6px 0 0 6px" background="{{canvas}}"}
===
=== style-rule {#btn-right match="text#ai-caret image, text#new-caret image" padding="6px 8px" border="1px solid {{line}}" border-left="0" border-radius="0 6px 6px 0" background="{{canvas}}"}
===
%% 四个菜单长一个样：条目的排布、条目的样子、悬停各一条规则，逗号列出四个分支就够了，
%% 不必抄四遍 —— 分支是 §3 的语法糖，等价于写四条同体规则，特异性各算各的。
=== style-rule {#menu-items match="text#ai-menu, text#repo-menu, text#new-menu, text#more-menu" axis=column gap=2px}
===
=== style-rule {#menu-link match="text#ai-menu link, text#repo-menu link, text#new-menu link, text#more-menu link" color="{{fg}}" padding="6px 8px" border-radius=6px}
===
=== style-rule {#menu-hover match="text#ai-menu link, text#repo-menu link, text#new-menu link, text#more-menu link" when="@hover" background="{{line-soft}}"}
===
%% 浮层的外框各跟各的状态，所以这四条并不成一条。
=== style-rule {#ai-menu-open match="#ai-menu-panel" when="$aimenu=open" visible=yes anchor=parent padding=4px background="{{canvas}}" border="1px solid {{line}}" border-radius=6px width=220px}
===
=== style-rule {#repo-menu-open match="#repo-menu-panel" when="$repomenu=open" visible=yes anchor=parent padding=4px background="{{canvas}}" border="1px solid {{line}}" border-radius=6px width=240px}
===
=== style-rule {#new-menu-open match="#new-menu-panel" when="$newmenu=open" visible=yes anchor=parent padding=4px background="{{canvas}}" border="1px solid {{line}}" border-radius=6px width=240px}
===
=== style-rule {#more-menu-open match="#more-menu-panel" when="$moremenu=open" visible=yes anchor=parent padding=4px background="{{canvas}}" border="1px solid {{line}}" border-radius=6px width=200px}
===
%% 品牌那个 ▾ 和 More 是独立的小按钮：块自己带内边距和圆角，悬停变底色。
=== style-rule {#brand-caret match="text#brand-caret" padding="4px 6px" border-radius=6px}
===
=== style-rule {#brand-caret-hover match="text#brand-caret" when="@hover" background="{{line-soft}}"}
===
=== style-rule {#brand-caret-icon match="text#brand-caret image" width=16px}
===
=== style-rule {#repo-more match="text#repo-more" padding="6px 8px" border-radius=6px color="{{muted}}"}
===
=== style-rule {#repo-more-hover match="text#repo-more" when="@hover" background="{{line-soft}}" color="{{fg}}"}
===
=== style-rule {#repo-more-icon match="text#repo-more image" width=16px}
===
=== style-rule {#top-nav match="text#top-nav" axis=row gap=8px}
===
=== style-rule {#top-nav-link match="text#top-nav link" color="{{muted}}" padding="4px 6px" border="1px solid {{line}}" border-radius=6px}
===
=== style-rule {#top-nav-hover match="text#top-nav link" when="@hover" background="{{line-soft}}"}
===
=== style-rule {#top-nav-icon match="text#top-nav image" width=16px}
===

%% ---------------------------------------------------------------- 仓库导航
=== style-rule {#repo-nav match="text#repo-nav" axis=row gap=8px}
===
=== style-rule {#repo-nav-link match="text#repo-nav link" color="{{muted}}" padding="6px 8px" border-radius=6px}
===
=== style-rule {#repo-nav-hover match="text#repo-nav link" when="@hover" background="{{line-soft}}" color="{{fg}}"}
===
=== style-rule {#repo-nav-icon match="text#repo-nav image" width=16px}
===
=== style-rule {#repo-nav-badge match="text#repo-nav code-span" background="{{canvas-inset}}" color="{{muted}}" border-radius=999px padding="0 6px" font-size=12px}
===

%% ---------------------------------------------------------------- 侧栏
=== style-rule {#side-toggle match="text#side-toggle" padding="4px 6px" border="1px solid {{line}}" border-radius=6px}
===
=== style-rule {#side-head match="text#side-head" axis=row gap=6px}
===
=== style-rule {#side-head-link match="text#side-head link" color="{{fg}}"}
===
=== style-rule {#side-back-link match="text#side-back link" color="{{muted}}" padding="4px 6px" border-radius=6px}
===
=== style-rule {#side-back-icon match="text#side-back image" width=14px}
===
=== style-rule {#branch-icon match="text#branch-icon image" width=14px}
===
=== style-rule {#side-tools-icon match="text#side-tools image" width=14px}
===
=== style-rule {#side-tools match="text#side-tools" axis=row gap=4px color="{{muted}}"}
===
=== style-rule {#find-icon match="text#find-icon image" width=14px}
===
=== style-rule {#find-key match="text#find-key code-span" border="1px solid {{line}}" border-radius=4px padding="0 5px" color="{{muted}}" font-size=12px background="transparent"}
===
=== style-rule {#tree match="text#file-tree" component=tree indent=16px sticky=top scroll=own padding=8px line-height=28px}
===
=== style-rule {#tree-link match="text#file-tree link" color="{{fg}}"}
===
=== style-rule {#tree-hover match="text#file-tree link" when="@hover" color="{{accent}}"}
===
=== style-rule {#tree-icon match="text#file-tree image" width=16px}
===
%% 收起：内容那一片不显示，侧栏缩到只剩按钮，Files 那行也一起收
=== style-rule {#side-closed match="#side-body" when="$sidebar=closed" visible=no}
===
=== style-rule {#side-narrow match="#side" when="$sidebar=closed" width=auto}
===
=== style-rule {#side-head-off match="text#side-head" when="$sidebar=closed" visible=no}
===

%% ---------------------------------------------------------------- 正文列
=== style-rule {#crumb match="text#breadcrumb" font-size=16px}
===
=== style-rule {#crumb-link match="text#breadcrumb link" color="{{accent}}"}
===
=== style-rule {#crumb-hover match="text#breadcrumb link" when="@hover" background="{{line-soft}}"}
===
=== style-rule {#commit-left match="text#commit-left" font-size=14px}
===
=== style-rule {#commit-left-link match="text#commit-left link" color="{{fg}}"}
===
=== style-rule {#commit-left-icon match="text#commit-left image" width=20px}
===
=== style-rule {#commit-left-hover match="text#commit-left link" when="@hover" color="{{accent}}"}
===
=== style-rule {#commit-right match="text#commit-right" font-size=12px color="{{muted}}" margin="0 0 0 auto"}
===
=== style-rule {#commit-right-link match="text#commit-right link" color="{{muted}}"}
===
=== style-rule {#commit-right-hover match="text#commit-right link" when="@hover" color="{{accent}}"}
===
=== style-rule {#view match="form-field#view" component=segments border="1px solid {{line}}" border-radius=6px background="{{canvas-soft}}" padding=2px font-size=14px}
===
=== style-rule {#meta match="text#file-meta" font-size=12px color="{{muted}}"}
===
=== style-rule {#file-actions match="text#file-actions" axis=row gap=4px color="{{muted}}" margin="0 0 0 auto"}
===
=== style-rule {#file-actions-link match="text#file-actions link" color="{{muted}}" padding="4px 6px" border-radius=6px}
===
=== style-rule {#file-actions-hover match="text#file-actions link" when="@hover" background="{{line-soft}}" color="{{fg}}"}
===
=== style-rule {#file-actions-icon match="text#file-actions image" width=16px}
===
=== style-rule {#doc match="embed#doc" view=rendered font-size=16px line-height=24px color="{{fg}}"}
===
%% 阅读宽度是**预览**的事；源码要填满内容区。第一版那个 preview-max-width 私有参数想说的就是这句话，
%% 现在用一条带条件的规则说出来，词汇里一个字都不用加。
=== style-rule {#doc-preview match="embed#doc" when="$tab=Preview" max-width="{{col}}px"}
===
=== style-rule {#doc-code match="embed#doc" when="$tab=Code" view=source editable=yes}
===
=== style-rule {#doc-blame match="embed#doc" when="$tab=Blame" view=source}
===

The folder, with its 41 icons: public/examples/style-demo/.