From f700b2af8e874c586e6996b8311c3983203c6637 Mon Sep 17 00:00:00 2001 From: Gabriel Schneider Date: Thu, 1 Oct 2026 13:05:10 -0300 Subject: Builtins are chips that link to a glossary generated from the registry, and the virtual filesystem is drawn as a tree #word draws a builtin as a chip on the tag's ground over a rule (Look and Exec in acme's look green and exec red), a in HTML, and links it to its entry in a new Builtins chapter wherever that chapter is in the same output (the book, the site). The chapter is drawn from docs/typ/builtins-tty.json and builtins-gui.json, which `zig build builtins-json -Dplatform=tty|gui` writes from the registry and the Help rows (src/builtins_json.zig, tools/gen_builtins_json.zig; summaryOf in ninep/ctl.zig is now pub); style.typ merges them, marking the window-only words. The doc steps refresh their build's file first, and each build's unit-test fails when its file is stale. Everyday words first (`everyday` in style.typ), then groups by leader prefix as Help has them, then settings, the words with no path, debugging and internals, and last an A-Z index of every word. `zig build book` joins the doc steps. #fstree draws a directory tree with its connectors, a description column and links to the sections that document each file; reference.typ draws the served tree with it, each pane, pty and column file on its own line, and a test in config.zig checks it against ninep/tree.zig's files both ways. The cheatsheet has a two-level version. On the site the tree reads as `tree` text in w3m and wraps descriptions under the names on a phone. The site's tutor draws its B1, B2, B3 and 1-2 chords as mouse glyphs; the landing credits Plan 9 and acme, as does the book's title page; install.typ no longer lists the mirrors (the footer does). Co-Authored-By: Claude Opus 5.5 --- docs/site/site.css | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) (limited to 'docs/site/site.css') diff --git a/docs/site/site.css b/docs/site/site.css index bab762d0..ae59e79a 100644 --- a/docs/site/site.css +++ b/docs/site/site.css @@ -81,8 +81,13 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color /* --- the semantic elements (docs/typ/style.typ) ------------------------------ */ .key { display:inline-block; padding:0 .3em; border-radius:4px; background:color-mix(in srgb, var(--leaf) 20%, transparent); color:var(--ink); font-size:.82em; white-space:nowrap; line-height:1.4; } .key .plus, .key .then { color:var(--leaf); opacity:.8; padding:0 .12em; } -.word { background:var(--tag); padding:0 .25em; color:var(--dim); } -.word code { font-size:.82em; color:var(--ink); } +/* a builtin or tag word: a chip to click, on the tag's ground over a rule + (Look and Exec in acme's look green and exec red) */ +:root { --look:#7fd07f; --exec:#ff8a7a; } +@media (prefers-color-scheme: light) { :root { --look:#006600; --exec:#aa0000; } } +.content code.word { font-size:.82em; color:var(--ink); background:var(--tag); padding:.05em .3em; border-radius:2px; border-bottom:2px solid var(--leaf); white-space:nowrap; } +.content code.word.look { border-bottom-color:var(--look); } +.content code.word.exec { border-bottom-color:var(--exec); } .addr code { color:var(--plum); } .file code { color:var(--leaf); } .btn, .chord { display:inline-flex; align-items:center; gap:2px; vertical-align:-.38em; margin-block:-.3em; } @@ -157,3 +162,31 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color .shot figcaption { padding:3px 8px; font:16px var(--pixel); color:var(--dim); border-top:2px solid var(--leaf); } .shot.light figcaption::after { content:" ยท light"; color:var(--amber); } .shot .pending { aspect-ratio:960/700; display:flex; align-items:center; justify-content:center; font:15px var(--pixel); color:var(--dim); } + +/* a builtin's chip that links to its glossary entry */ +.content a:has(> code.word) { text-decoration:none; } +.content a:hover > code.word { text-decoration:underline; text-underline-offset:3px; } +.credit { font-size:18px; color:var(--dim); margin:0 0 .3em; } +/* the glossary: each entry's name is a small heading over its line */ +main[data-page="builtins"] .content h4 { font:600 18px var(--mono); color:var(--leaf); margin:1.1em 0 .1em; } +main[data-page="builtins"] .content h4 + p { margin-top:0; } +.content pre.tutor .btn, .content pre.tutor .chord { vertical-align:-.3em; } +.all-words { line-height:2.1; } + +/* the virtual filesystem as a tree: names and connectors, descriptions + in a quiet column; on a phone a description wraps under its name */ +.content pre.fstree { font-size:15px; line-height:1.35; overflow-x:visible; } +.fstree .row { display:grid; grid-template-columns:var(--name) 1fr; align-items:baseline; } +.fstree .nl { display:none; } +.fstree .branch { color:var(--rule); } +.fstree .dir, .fstree .dir a { color:var(--leaf); font-weight:700; } +.fstree a { color:var(--amber); text-decoration:none; } +.fstree a:hover { text-decoration:underline; } +.fstree .desc { color:var(--dim); font-family:var(--hand); font-size:17px; white-space:normal; line-height:1.3; } +@media (max-width:600px) { + .content pre.fstree { font-size:13px; } + .fstree .row { display:block; } + .fstree .name { display:block; } + /* under the name: its prefix is --cols cells of the 13px mono font */ + .fstree .desc { display:block; padding-left:calc(var(--cols) * 7.8px); font-size:15px; margin-bottom:.15em; } +} -- cgit v1.3