corner arcs rise; phones keep the curve
commit 94a8b54dd546590355c2c17e09de33075328ec2d · parent 46c66c731c
· browse this tree
Ximianth, 2026-10-27 00:04:09 UTC
The corner arc's symmetric layout read as flat: a pair of buttons straddles the apex at equal height, and even three only staggered by ~10px. The apex now sits half a spacing past the rightmost button, so every corner arc is a line rising toward the corner -- visibly an arc at any button count. The 560px breakpoint had flattened arcs entirely (transform: none). Flattening the signature motif was the wrong reading of 'gracefully'; instead the precomputed drops now scale with the buttons (* .72) and the curve survives. Four dawn buttons at 64px fit a 390px viewport without wrapping, so the wrap that motivated flattening never happens.
diff --git a/chrome.go b/chrome.go index df025a5..4617f35 100644 --- a/chrome.go +++ b/chrome.go @@ -36,14 +36,17 @@ type arcButton struct { DY int // the button's drop below the arc apex, in px; computed, static per page } -// arcLayout drops each button onto a circle arc: the row is centered, and each button -// sinks below the apex by the circle's sagitta at its x position. Computed server-side -// so positions are static per page type (buttons must not move around). +// arcLayout drops each button onto a circle arc: each sinks below the arc's apex by the +// circle's sagitta at its x position. Computed server-side so positions are static per +// page type (buttons must not move around). apexAt is the apex's x position in button +// indices (i.e. 1.0 means "centered on the second button"): the dawn arc puts the apex at +// the row's center for a symmetric sunrise, and the corner arc puts it just past the +// rightmost button, so every button sits on a visibly rising line -- even a pair of them +// (a symmetric pair straddles the apex at equal height and reads as flat; we learned). // Drawing variants cycle a/b/c so neighbors never wear the same circle. -func arcLayout(radius, spacing float64, btns []arcButton) []arcButton { - n := len(btns) +func arcLayout(radius, spacing, apexAt float64, btns []arcButton) []arcButton { for i := range btns { - x := (float64(i) - float64(n-1)/2) * spacing + x := (apexAt - float64(i)) * spacing btns[i].DY = int(radius - math.Sqrt(radius*radius-x*x) + 0.5) btns[i].Variant = string(rune('a' + i%3)) } @@ -54,12 +57,16 @@ func arcLayout(radius, spacing float64, btns []arcButton) []arcButton { // equal the button diameter plus the flex gap in the stylesheet (nav.arc rules). // dawnArc is the repo home's full arc: the sun of moves rising over the exhibit. -// 88px buttons + 2.4rem gap. -func dawnArc(btns []arcButton) []arcButton { return arcLayout(300, 126, btns) } +// 88px buttons + 2.4rem gap; apex at the row's center. +func dawnArc(btns []arcButton) []arcButton { + return arcLayout(300, 126, float64(len(btns)-1)/2, btns) +} -// cornerArc is the compact contextual arc every other page gets. -// 58px buttons + 1.1rem gap. -func cornerArc(btns []arcButton) []arcButton { return arcLayout(300, 76, btns) } +// cornerArc is the compact contextual arc every other page gets: a rising line toward +// the corner, apex half a spacing past the rightmost button. 58px buttons + 1.1rem gap. +func cornerArc(btns []arcButton) []arcButton { + return arcLayout(380, 76, float64(len(btns)-1)+0.5, btns) +} var soclePageTmpl = template.Must(template.New("socle").Parse(`<!doctype html> <html lang="en"> @@ -393,10 +400,13 @@ article h1, article code { overflow-wrap: anywhere; } and the exhibit mat thins. Buttons stay still within this layout; the breakpoint is the only place they are allowed to differ. */ @media (max-width: 560px) { - nav.arc { gap: .9rem; flex-wrap: wrap; padding: 1.2rem 0 .6rem; } - nav.arc a { transform: none; width: 74px; height: 74px; font-size: .72rem; } - nav.arc.corner { padding: .8rem 0 .4rem; } - nav.arc.corner a { width: 54px; height: 54px; } + /* The sun still rises on phones: buttons shrink and the precomputed drops scale + down with them (same ratio as the size change), but the curve stays. + Width check: 4 dawn buttons at 64px + 3 gaps ~= 296px, fits 390 without wrap. */ + nav.arc { gap: .8rem; padding: 1.2rem 0 calc(.6rem + var(--arc-drop, 0px) * .72); } + nav.arc a { transform: translateY(calc(var(--dy, 0px) * .72)); width: 64px; height: 64px; font-size: .72rem; } + nav.arc.corner { padding: .8rem 0 calc(.4rem + var(--arc-drop, 0px) * .72); } + nav.arc.corner a { width: 48px; height: 48px; } article > * { margin-left: 0; } article pre { margin-left: 0; } .exhibit { padding: .9rem 1rem; } diff --git a/testdata/pages.md b/testdata/pages.md index 497cb1e..755f0c5 100644 --- a/testdata/pages.md +++ b/testdata/pages.md @@ -144,8 +144,8 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / main </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:2px"> -<a class="va" href="/fixturama/log/main" title="commit log of main" style="--dy:2px">log</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:18px"> +<a class="va" href="/fixturama/log/main" title="commit log of main" style="--dy:18px">log</a> <a class="vb" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>fixturama</h1> @@ -192,10 +192,10 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / <a href="/fixturama/tree/main/">main</a> / docs </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:10px"> -<a class="va" href="/fixturama/tree/main/" title="parent directory" style="--dy:10px">up</a> -<a class="vb" href="/fixturama/log/main" title="commit log of main" style="--dy:0px">log</a> -<a class="vc" href="/fixturama/" title="repo home" style="--dy:10px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:51px"> +<a class="va" href="/fixturama/tree/main/" title="parent directory" style="--dy:51px">up</a> +<a class="vb" href="/fixturama/log/main" title="commit log of main" style="--dy:18px">log</a> +<a class="vc" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>docs</h1> <table class="tree"> @@ -246,11 +246,11 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / <a href="/fixturama/tree/main/">main</a> / README.md </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:23px"> -<a class="va" href="/fixturama/raw/main/README.md" title="the raw bytes" style="--dy:23px">raw</a> -<a class="vb" href="/fixturama/tree/main/" title="containing directory" style="--dy:2px">up</a> -<a class="vc" href="/fixturama/log/main" title="commit log of main" style="--dy:2px">log</a> -<a class="va" href="/fixturama/" title="repo home" style="--dy:23px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:109px"> +<a class="va" href="/fixturama/raw/main/README.md" title="the raw bytes" style="--dy:109px">raw</a> +<a class="vb" href="/fixturama/tree/main/" title="containing directory" style="--dy:51px">up</a> +<a class="vc" href="/fixturama/log/main" title="commit log of main" style="--dy:18px">log</a> +<a class="va" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>README.md</h1> <div class="exhibit"><h1 id="fixturama">Fixturama<a href="#fixturama" class="anchor">🔗</a></h1> @@ -291,11 +291,11 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / <a href="/fixturama/tree/main/">main</a> / <a href="/fixturama/tree/main/docs/">docs</a> / with space.txt </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:23px"> -<a class="va" href="/fixturama/raw/main/docs/with%20space.txt" title="the raw bytes" style="--dy:23px">raw</a> -<a class="vb" href="/fixturama/tree/main/docs/" title="containing directory" style="--dy:2px">up</a> -<a class="vc" href="/fixturama/log/main" title="commit log of main" style="--dy:2px">log</a> -<a class="va" href="/fixturama/" title="repo home" style="--dy:23px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:109px"> +<a class="va" href="/fixturama/raw/main/docs/with%20space.txt" title="the raw bytes" style="--dy:109px">raw</a> +<a class="vb" href="/fixturama/tree/main/docs/" title="containing directory" style="--dy:51px">up</a> +<a class="vc" href="/fixturama/log/main" title="commit log of main" style="--dy:18px">log</a> +<a class="va" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>with space.txt</h1> <div class="exhibit"><pre class="file">even this filename works @@ -336,11 +336,11 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / <a href="/fixturama/tree/ced91a8519b59966124301e6383532f24223528b/">ced91a8519b59966124301e6383532f24223528b</a> / README.md </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:23px"> -<a class="va" href="/fixturama/raw/ced91a8519b59966124301e6383532f24223528b/README.md" title="the raw bytes" style="--dy:23px">raw</a> -<a class="vb" href="/fixturama/tree/ced91a8519b59966124301e6383532f24223528b/" title="containing directory" style="--dy:2px">up</a> -<a class="vc" href="/fixturama/log/ced91a8519b59966124301e6383532f24223528b" title="commit log of ced91a8519" style="--dy:2px">log</a> -<a class="va" href="/fixturama/" title="repo home" style="--dy:23px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:109px"> +<a class="va" href="/fixturama/raw/ced91a8519b59966124301e6383532f24223528b/README.md" title="the raw bytes" style="--dy:109px">raw</a> +<a class="vb" href="/fixturama/tree/ced91a8519b59966124301e6383532f24223528b/" title="containing directory" style="--dy:51px">up</a> +<a class="vc" href="/fixturama/log/ced91a8519b59966124301e6383532f24223528b" title="commit log of ced91a8519" style="--dy:18px">log</a> +<a class="va" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>README.md</h1> <div class="exhibit"><h1 id="fixturama">Fixturama<a href="#fixturama" class="anchor">🔗</a></h1> @@ -385,8 +385,8 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / log / main </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:2px"> -<a class="va" href="/fixturama/tree/main/" title="browse the tree at main" style="--dy:2px">files</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:18px"> +<a class="va" href="/fixturama/tree/main/" title="browse the tree at main" style="--dy:18px">files</a> <a class="vb" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>log: main</h1> @@ -442,10 +442,10 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / commit / ced91a8519 </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:10px"> -<a class="va" href="/fixturama/tree/ced91a8519b59966124301e6383532f24223528b/" title="browse the tree at this commit" style="--dy:10px">files</a> -<a class="vb" href="/fixturama/log/ced91a8519b59966124301e6383532f24223528b" title="the log from this commit" style="--dy:0px">log</a> -<a class="vc" href="/fixturama/" title="repo home" style="--dy:10px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:51px"> +<a class="va" href="/fixturama/tree/ced91a8519b59966124301e6383532f24223528b/" title="browse the tree at this commit" style="--dy:51px">files</a> +<a class="vb" href="/fixturama/log/ced91a8519b59966124301e6383532f24223528b" title="the log from this commit" style="--dy:18px">log</a> +<a class="vc" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>add docs and src</h1> <p>commit <code>ced91a8519b59966124301e6383532f24223528b</code> · parent <a href="/fixturama/commit/64ac67a35d36079e167cb8f929fd57f859c8b5d1"><code>64ac67a35d</code></a> @@ -554,10 +554,10 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">socle</a><span class="theme">@test</span> / <a href="/fixturama/">fixturama</a> / commit / 64ac67a35d </nav> -<nav class="arc corner" aria-label="page moves" style="--arc-drop:10px"> -<a class="va" href="/fixturama/tree/64ac67a35d36079e167cb8f929fd57f859c8b5d1/" title="browse the tree at this commit" style="--dy:10px">files</a> -<a class="vb" href="/fixturama/log/64ac67a35d36079e167cb8f929fd57f859c8b5d1" title="the log from this commit" style="--dy:0px">log</a> -<a class="vc" href="/fixturama/" title="repo home" style="--dy:10px">home</a> +<nav class="arc corner" aria-label="page moves" style="--arc-drop:51px"> +<a class="va" href="/fixturama/tree/64ac67a35d36079e167cb8f929fd57f859c8b5d1/" title="browse the tree at this commit" style="--dy:51px">files</a> +<a class="vb" href="/fixturama/log/64ac67a35d36079e167cb8f929fd57f859c8b5d1" title="the log from this commit" style="--dy:18px">log</a> +<a class="vc" href="/fixturama/" title="repo home" style="--dy:2px">home</a> </nav> <main><article><h1>inaugurate with a readme</h1> <p>commit <code>64ac67a35d36079e167cb8f929fd57f859c8b5d1</code>