Skip to content

fix: project page renders on a phone #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheCryptoDonkey merged 1 commit into from
Aug 7, 2026
Merged

fix: project page renders on a phone #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
# Changelog

## Unreleased

- the project page reads on a phone. Two things broke below about 372px: the
card grid asked for a 22rem minimum track, which is wider than a phone, so
the floor could not shrink and the whole page scrolled sideways with the
text cut off at the right edge; and the architecture diagram is 860 units
wide, so it scaled to roughly a third and put its labels near 4px. The grid
minimums are now `min(22rem,100%)`, and below 48rem a portrait version of
the same diagram is swapped in, capped in width so its labels stay near
their true size. The landscape diagram is untouched, so nothing about the
desktop page changes. The bridge itself already held up: its chrome
reflows and its fixed-width gopher content scrolls inside its own `pre`,
which is the only correct answer when a profile banner is SGR block art
that must not reflow

## 0.16.7 (2026-08-07)

- `post` takes `--as npub1...` and refuses to sign as anyone else. The signer
Expand Down
87 changes: 82 additions & 5 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,16 +86,22 @@
border-bottom:1px solid var(--rule); font-size:.78rem; color:var(--muted)}
.dot{width:.6rem; height:.6rem; border-radius:50%; background:var(--rule)}
.term pre{margin:0; padding:1rem; overflow-x:auto; font-size:.85rem; line-height:1.55}
/* A transcript is fixed-width by nature and still scrolls sideways inside its
own box on a phone; the smaller step just buys back a dozen columns so the
shorter lines land whole. */
@media (max-width:30rem){ .term pre{font-size:.76rem; padding:.75rem} }
.term .p{color:var(--accent)}
.term .c{color:var(--muted)}
.term .l{color:var(--link)}
pre{tab-size:4}
code:not(pre code){background:var(--panel); border:1px solid var(--rule);
border-radius:.25rem; padding:.05em .35em; font-size:.9em}

/* grids */
.grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}
/* grids. The min() guard is load-bearing: a bare minmax(22rem,1fr) sets a
floor wider than a phone, so the track overflows the viewport instead of
shrinking and the whole page scrolls sideways. */
.grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr))}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:.5rem; padding:1.15rem 1.25rem}
.card p:last-child{margin-bottom:0}
.card .tag{font-family:ui-monospace,monospace; font-size:.75rem; color:var(--accent);
Expand All @@ -115,10 +121,22 @@
.svg-box{fill:var(--panel); stroke:var(--rule); stroke-width:1.5}
.svg-label{font-family:ui-monospace,monospace; font-size:12px}
.svg-small{font-family:ui-monospace,monospace; font-size:10.5px}
/* The landscape diagram is 860 units wide, so on a phone it scales to about a
third and its labels land near 4px. Below 48rem a portrait version of the
same diagram is swapped in, capped in width so its own labels stay near
their true size rather than ballooning on a tablet. display:none keeps the
hidden one out of the accessibility tree, so only one title is announced. */
.svg-label-n{font-family:ui-monospace,monospace; font-size:15px}
.svg-small-n{font-family:ui-monospace,monospace; font-size:13px}
.diagram-narrow{display:none}
@media (max-width:48rem){
.diagram-wide{display:none}
.diagram-narrow{display:block; max-width:24rem; margin-inline:auto}
}

/* support */
.support{background:var(--panel)}
.give{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin:1.5rem 0}
.give{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); margin:1.5rem 0}
.give a{display:block; padding:.85rem 1rem; border:1px solid var(--rule); border-radius:.45rem;
text-decoration:none; background:var(--bg)}
.give a:hover{border-color:var(--link)}
Expand Down Expand Up @@ -253,7 +271,7 @@ <h2>A directory in, four protocols out.</h2>
</div>

<figure>
<svg viewBox="0 0 860 250" role="img" aria-labelledby="diagram-title">
<svg class="diagram-wide" viewBox="0 0 860 250" role="img" aria-labelledby="diagram-title">
<title id="diagram-title">Text files are signed into kind 31436 events, stored on
relays, and served by any bridge to gopher, Gemini, HTTP and terminal clients.</title>

Expand Down Expand Up @@ -304,6 +322,65 @@ <h2>A directory in, four protocols out.</h2>

<text class="svg-small svg-muted" x="8" y="228">Lose the bridge and the documents remain. Any other bridge serves the same signed events.</text>
</svg>

<!-- Same diagram, stacked top to bottom for phones. -->
<svg class="diagram-narrow" viewBox="0 0 320 660" role="img" aria-labelledby="diagram-title-narrow">
<title id="diagram-title-narrow">Text files are signed into kind 31436 events, stored on
relays, and served by any bridge to gopher, Gemini, HTTP and terminal clients.</title>

<rect class="svg-box" x="85" y="8" width="150" height="72" rx="6"/>
<text class="svg-label-n svg-fg" x="160" y="34" text-anchor="middle">my-hole/</text>
<text class="svg-small-n svg-muted" x="160" y="54" text-anchor="middle">index.map</text>
<text class="svg-small-n svg-muted" x="160" y="71" text-anchor="middle">about.txt</text>

<path class="svg-line" d="M160 80 V104"/>
<polygon class="svg-accent" points="155,104 160,115 165,104"/>
<text class="svg-small-n svg-muted" x="172" y="99">sign</text>

<rect class="svg-box" x="70" y="122" width="180" height="94" rx="6"/>
<text class="svg-label-n svg-fg" x="160" y="148" text-anchor="middle">kind 31436</text>
<text class="svg-small-n svg-muted" x="160" y="170" text-anchor="middle">d = /about.txt</text>
<text class="svg-small-n svg-muted" x="160" y="187" text-anchor="middle">type = 0</text>
<text class="svg-small-n svg-accent" x="160" y="204" text-anchor="middle">signed by your npub</text>

<path class="svg-line" d="M160 216 V240"/>
<polygon class="svg-accent" points="155,240 160,251 165,240"/>
<text class="svg-small-n svg-muted" x="172" y="235">publish</text>

<rect class="svg-box" x="12" y="258" width="92" height="32" rx="6"/>
<rect class="svg-box" x="114" y="258" width="92" height="32" rx="6"/>
<rect class="svg-box" x="216" y="258" width="92" height="32" rx="6"/>
<text class="svg-small-n svg-fg" x="58" y="279" text-anchor="middle">relay</text>
<text class="svg-small-n svg-fg" x="160" y="279" text-anchor="middle">relay</text>
<text class="svg-small-n svg-fg" x="262" y="279" text-anchor="middle">relay</text>
<text class="svg-small-n svg-muted" x="160" y="308" text-anchor="middle">your choice, plus NIP-65</text>

<path class="svg-line" d="M160 318 V342"/>
<polygon class="svg-accent" points="155,342 160,353 165,342"/>
<text class="svg-small-n svg-muted" x="172" y="337">fetch</text>

<rect class="svg-box" x="100" y="360" width="120" height="58" rx="6"/>
<text class="svg-label-n svg-fg" x="160" y="386" text-anchor="middle">bridge</text>
<text class="svg-small-n svg-muted" x="160" y="405" text-anchor="middle">any bridge</text>

<path class="svg-line" d="M160 418 V432 H40 V573"/>
<path class="svg-line" d="M40 459 H72"/>
<path class="svg-line" d="M40 497 H72"/>
<path class="svg-line" d="M40 535 H72"/>
<path class="svg-line" d="M40 573 H72"/>
<rect class="svg-box" x="78" y="444" width="180" height="30" rx="6"/>
<rect class="svg-box" x="78" y="482" width="180" height="30" rx="6"/>
<rect class="svg-box" x="78" y="520" width="180" height="30" rx="6"/>
<rect class="svg-box" x="78" y="558" width="180" height="30" rx="6"/>
<text class="svg-small-n svg-fg" x="168" y="464" text-anchor="middle">gopher</text>
<text class="svg-small-n svg-fg" x="168" y="502" text-anchor="middle">gemini</text>
<text class="svg-small-n svg-fg" x="168" y="540" text-anchor="middle">http / lynx</text>
<text class="svg-small-n svg-fg" x="168" y="578" text-anchor="middle">terminal</text>

<text class="svg-small-n svg-muted" x="8" y="618">Lose the bridge and the documents</text>
<text class="svg-small-n svg-muted" x="8" y="635">remain. Any other bridge serves</text>
<text class="svg-small-n svg-muted" x="8" y="652">the same signed events.</text>
</svg>
<figcaption>One router, four frontends. Reading needs no identity anywhere; writing
always goes through a NIP-46 signer or a NIP-07 extension you control.</figcaption>
</figure>
Expand Down