From bbbaf75a6f231475a7b50be7eaadd141d9264215 Mon Sep 17 00:00:00 2001 From: Gabriel Schneider Date: Thu, 1 Oct 2026 13:43:11 -0300 Subject: The landing shows each thing once, lists what is in pardes, and the guide opens on an annotated pane The window shelf drops terminals-are-panes (`landing = false` in clips.toml; the casts show it) and keeps the PDF, image, make, diff and 9P clips. Captions say what happens: the live-text cast renames a variable, runs make and lands on the error; the 9P clip is a shell under 9ns where the session is a directory. Casts stack one per row at the page's width, each showing a frame of itself until it plays. Under the lead, a row of linked chips names what is in pardes: terminals, PDFs, images, language servers, diff review, scripting, themes. Install says how long the first build takes (62 s from a clean cache on 16 cores, measured with the dependencies already fetched), and `project` in style.typ has a `download` slot (url, sha256, arch) install.typ shows once a binary exists. #annotated draws a screenshot with numbered pins and their labels as text beside it; the guide opens with one of the orchard theme's shot: the workspace tag, a column's tag, a pane's tag, the box, the body and the scrollbar, before its glossary. Co-Authored-By: Claude Opus 5.5 --- docs/site/site.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'docs/site/site.css') diff --git a/docs/site/site.css b/docs/site/site.css index 7d6d0660..6e4a2e93 100644 --- a/docs/site/site.css +++ b/docs/site/site.css @@ -150,8 +150,8 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color @media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } } /* terminal recordings: the first across the page, the rest two by two */ -.casts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; } -.casts .first { grid-column:1 / -1; } +/* one per row at the page's full width: a terminal at half width is unreadable */ +.casts { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; margin:1em 0 1.4em; } .cast .player { background:#121314; } .cast figcaption strong { color:var(--leaf); } .content h2.shelf { font-size:26px; margin:1.2em 0 .4em; } @@ -191,3 +191,19 @@ main[data-page="builtins"] .content h4 + p { margin-top:0; } /* 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; } } + +/* what's in it: a row of linked chips under the lead */ +.inside { display:flex; flex-wrap:wrap; gap:8px 10px; margin:.2em 0 1.1em; padding:0; list-style:none; } +.inside a { display:inline-block; padding:2px 10px; font:17px var(--pixel); color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); text-decoration:none; } +.inside a:hover { color:var(--amber); border-color:var(--amber); } + +/* a screenshot with numbered pins, their labels listed beside it */ +.annotated { margin:1.2em 0 1.6em; display:grid; grid-template-columns:minmax(0, 3fr) minmax(12em, 2fr); gap:14px 22px; align-items:center; } +.annotated .frame { position:relative; border:2px solid var(--leaf); box-shadow:5px 5px 0 var(--shadow); } +.annotated img { display:block; width:100%; height:auto; } +.annotated .pin { position:absolute; transform:translate(-50%, -50%); width:1.5em; height:1.5em; border-radius:50%; + display:flex; align-items:center; justify-content:center; font:700 14px var(--mono); background:var(--amber); color:#1b120a; box-shadow:0 0 0 2px var(--panel); } +.annotated .pins { margin:0; padding-left:1.8em; font-size:18px; } +.annotated .pins li { margin:.25em 0; } +.annotated .pins li::marker { font:700 15px var(--mono); color:var(--amber); } +@media (max-width:600px) { .annotated { grid-template-columns:minmax(0, 1fr); } } -- cgit v1.3