The landing shows the four recordings, pardes is ISC-licensed, and the install lines fit a phone

clips.toml names the recordings (text-is-the-interface,
terminals-are-panes, scripting-over-9p, diff-review), each ready, its
caption checked against what the clip shows. The first ready clip
plays at the top, full width and on its own (autoplay, muted, looping),
and the grid below shows the others, three across. Videos and posters keep the recordings' 960x700 shape. The footer
links the source at git.0x4200.cafe/pardes and names the ISC license,
from `project` in style.typ. LICENSE holds the ISC text, and the README
names it and says the libraries keep their own (MuPDF, on by default, is
AGPL). The install lines put their comments on lines of their own, and
on a phone a shell line wraps rather than scroll its end away.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 5 insertions, 3 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index bbb1140f..2435841b 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -107,14 +107,14 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .toc ol { padding:8px 14px 10px 2.4em; columns:2 14em; font-size:18px; }
 .masthead { font:clamp(56px, 12vw, 104px)/1 var(--pixel) !important; text-shadow:5px 5px 0 var(--amber) !important; margin:.1em 0 .1em !important; }
 .pitch { font-style:italic; font-size:22px; color:var(--dim); margin-top:0; }
-.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:22px; margin:1.4em 0; }
+.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:18px; margin:1.4em 0; }
 .clip { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--shadow); }
-.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:16/10; background:var(--deep); }
+.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:960/700; background:var(--deep); }
 .clip figcaption { padding:8px 12px; font-size:18px; color:var(--dim); border-top:2px solid var(--leaf); }
 .lead { font-size:23px; line-height:1.5; hyphens:manual; margin:.2em 0 .5em; }
 .pitch { font-style:italic; font-size:19px; hyphens:manual; color:var(--dim); margin:0 0 .3em; }
 .runs { font-size:18px; color:var(--dim); margin:0 0 1.2em; }
-.hero { display:block; width:100%; height:auto; margin:0 0 1.4em; border:2px solid var(--leaf); box-shadow:6px 6px 0 var(--shadow); }
+.clip.hero { margin:0 0 1.4em; box-shadow:6px 6px 0 var(--shadow); }
 .start { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 .8em; }
 .start .go { display:inline-block; padding:8px 16px; font:20px var(--pixel); text-decoration:none; color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); box-shadow:4px 4px 0 var(--amber); }
 .start .go:first-child { font-size:24px; color:var(--panel); background:var(--leaf); }
@@ -140,3 +140,5 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
   .content { font-size:18px; }
   .content pre { font-size:13px; }
 }
+/* a shell line wraps on a phone rather than hide its end */
+@media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } }