From 9a7830c62d25d83754bd58d0e705501f71656c69 Mon Sep 17 00:00:00 2001 From: Gabriel Schneider Date: Thu, 1 Oct 2026 12:28:20 -0300 Subject: 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 --- docs/site/media/clips.toml | 23 ++++++++++++----------- docs/site/site.css | 8 +++++--- docs/site/site.typ | 27 +++++++++++++++------------ docs/typ/install.typ | 4 ++-- docs/typ/style.typ | 4 ++-- 5 files changed, 36 insertions(+), 30 deletions(-) (limited to 'docs') diff --git a/docs/site/media/clips.toml b/docs/site/media/clips.toml index f927450f..6c834569 100644 --- a/docs/site/media/clips.toml +++ b/docs/site/media/clips.toml @@ -1,24 +1,25 @@ # The landing page's recordings, in the order shown. For each clip the # site ships media/.webm and media/.mp4, with media/.png -# as the poster. While `ready` is false the clip shows placeholder.svg and -# no video, so the site builds before the recordings exist. +# as the poster; the first ready clip's poster is also the landing's +# hero image. While `ready` is false the clip shows placeholder.svg and +# no video, so the site builds before a recording exists. [[clip]] -name = "look-and-execute" -caption = "Right-click opens what you point at; middle-click runs it." -ready = false +name = "text-is-the-interface" +caption = "Middle-click runs a word; right-click an error opens its line." +ready = true [[clip]] -name = "terminals" -caption = "Terminal panes: type to the program, or move around its output." -ready = false +name = "terminals-are-panes" +caption = "A terminal is a pane: Ctrl-b, then move over its output." +ready = true [[clip]] -name = "scripting" +name = "scripting-over-9p" caption = "A script drives the session by reading and writing files." -ready = false +ready = true [[clip]] name = "diff-review" caption = "Right-click a diff line to open that line of the file." -ready = false +ready = true 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; } } diff --git a/docs/site/site.typ b/docs/site/site.typ index 03d9a15d..068b5b9c 100644 --- a/docs/site/site.typ +++ b/docs/site/site.typ @@ -70,7 +70,7 @@ #el("footer", (class: "colophon"))[ pardes · #if project.source != none [#el("a", (href: project.source))[source] · ] - #if project.license != none [#project.license · ] + #if project.license != none [#project.license license · ] built from `docs/typ` with Typst · #el("a", (href: "fonts/LICENSE-DepartureMono.txt"))[fonts] (OFL) ] @@ -94,7 +94,13 @@ #doc-links.update(true) -#let ready = clips.filter(c => c.ready) +// The first ready clip plays at the top; the grid shows the rest. +#let hero = clips.find(c => c.ready) +#let video(c, extra) = el("video", (poster: "media/" + c.name + ".png", muted: "", loop: "", playsinline: "", + controls: "") + extra)[ + #el("source", (src: "media/" + c.name + ".webm", type: "video/webm"))[] + #el("source", (src: "media/" + c.name + ".mp4", type: "video/mp4"))[] +] #let start = ( (id: "guide", label: [Start: the guide], note: [about 15 min]), (id: "tutor", label: [Hands on: the tutor], note: none), @@ -108,8 +114,11 @@ #el("p", (class: "pitch"))[#tagline.] #el("p", (class: "runs"))[It runs in a terminal or in its own window (SDL), on Linux; macOS and browser builds are in the tree.] - #if ready.len() > 0 { - el("img", (class: "hero", src: "media/" + ready.first().name + ".png", alt: ready.first().caption))[] + #if hero != none { + el("figure", (class: "clip hero"))[ + #video(hero, (autoplay: "")) + #el("figcaption")[#hero.caption] + ] } #el("div", (class: "start"))[ #for s in start { @@ -122,15 +131,9 @@ } ] #el("div", (class: "clips"))[ - #for c in clips { + #for c in clips.filter(c => c != hero) { el("figure", (class: "clip"))[ - #if c.ready { - el("video", (poster: "media/" + c.name + ".png", muted: "", loop: "", playsinline: "", - controls: "", preload: "none"))[ - #el("source", (src: "media/" + c.name + ".webm", type: "video/webm"))[] - #el("source", (src: "media/" + c.name + ".mp4", type: "video/mp4"))[] - ] - } else { + #if c.ready { video(c, (preload: "none")) } else { el("img", (src: "media/placeholder.svg", alt: "", width: "640", height: "400"))[] } #el("figcaption")[#c.caption] diff --git a/docs/typ/install.typ b/docs/typ/install.typ index 9114f44c..37e07d1a 100644 --- a/docs/typ/install.typ +++ b/docs/typ/install.typ @@ -3,6 +3,6 @@ #import "style.typ": cmd With Zig 0.16 (the build fetches everything else): -#cmd("zig build -Dplatform=tty --prefix ~/.local # pardes, in a terminal") -#cmd("zig build -Dplatform=gui --prefix ~/.local # pardes-gui, its own window") +#cmd("# pardes, in a terminal\nzig build -Dplatform=tty --prefix ~/.local") +#cmd("# pardes-gui, its own window\nzig build -Dplatform=gui --prefix ~/.local") Then run `pardes` or `pardes FILE`. diff --git a/docs/typ/style.typ b/docs/typ/style.typ index 903a8273..ed713537 100644 --- a/docs/typ/style.typ +++ b/docs/typ/style.typ @@ -202,7 +202,7 @@ #let file(p) = context if html-out() { span("file", raw(p)) } else { m(p, fill: palette.str) } /// A shell line. -#let cmd(c) = context if html-out() { raw(c, block: true, lang: "sh") } else { +#let cmd(c) = context if html-out() { html.elem("div", attrs: (class: "cmd"), raw(c, block: true, lang: "sh")) } else { let tight = density.get() == "tight" block( width: 100%, spacing: if tight { 0.4em } else { 0.9em }, @@ -256,7 +256,7 @@ /// Where pardes lives and under what licence, for the site's footer (and /// any output that wants them). none until decided. -#let project = (source: none, license: none) +#let project = (source: "https://git.0x4200.cafe/pardes", license: "ISC") /// A glossary: like #pairs, under its own heading. On paper the heading /// and the table; in HTML a
that starts closed, its summary the -- cgit v1.3