Home page: screenshots in the dial's navy panel, the phone in a row of its own; analytics (#216)

The desktop window was a 1440px window shown at 690px, unreadable, with the phone over the
corner that says the most. It is now a 1200px window shown near its size, in a navy panel like
the dial; the phone sits beside its own text, which leaves the feature list for Sign in your way.
On a phone the window shows its left part, larger. The CSP lets Cloudflare Web Analytics run.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-12 17:59:23 +00:00
parent 700037c368
commit 4cb2426b49
4 changed files with 33 additions and 15 deletions

View File

@@ -54,16 +54,26 @@
<figcaption>Some of what people listen to and read on iPX servers today.</figcaption>
</figure>
<!-- The window sits in a navy panel, the dial's material, rising out of its bottom edge as if
set into the radio; shown near its own size so its text can be read. -->
<section class="shots" aria-labelledby="shots">
<h2 id="shots">In the browser, and on your phone</h2>
<figure class="screens">
<img class="desk" src="/shots/desktop.webp" width="2000" height="1250" loading="lazy"
<h2 id="shots">In the browser</h2>
<p class="shotlede">Everyone signs in to a list of their own: feeds down the side, episodes in a table with each one's notes below, and the player along the bottom, as iPodderX laid them out.</p>
<figure class="window">
<img src="/shots/desktop.webp" width="2400" height="1500" loading="lazy"
alt="iPX in a desktop browser: the feed list down the side, 99% Invisible's episodes in a table, the newest one's notes below it, and the player along the bottom.">
<img class="phone" src="/shots/phone.webp" width="600" height="1298" loading="lazy"
alt="iPX on a phone: Ologies with Alie Ward and its latest episodes.">
</figure>
</section>
<section class="pocket" aria-labelledby="phone">
<img src="/shots/phone.webp" width="600" height="1298" loading="lazy"
alt="iPX on a phone: Ologies with Alie Ward and its latest episodes.">
<div>
<h2 id="phone">On your phone</h2>
<p>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode as on your computer.</p>
</div>
</section>
<section class="does" aria-labelledby="does">
<h2 id="does">What it does</h2>
<dl>
@@ -79,8 +89,8 @@
<dd>Turn it on for a show and iPX plays it without its long silences, leaving the pause you choose. The original file stays as it is.</dd></div>
<div><dt>A shared directory</dt>
<dd>iPX servers can share the public shows their people follow. Browse it to find something new, and subscribe in one click from your own server.</dd></div>
<div><dt>On your phone</dt>
<dd>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode.</dd></div>
<div><dt>Sign in your way</dt>
<dd>Each person signs in with a password, or Cloudflare Access or Authentik signs them in for you. An admin adds people and decides who else is one.</dd></div>
<div><dt>Blogs too</dt>
<dd>Any RSS or Atom feed works, so the blogs you read sit beside the shows you listen to, each with its own read and unread.</dd></div>
</dl>