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>

site/_headers

@@ -1,5 +1,6 @@
+# Cloudflare Web Analytics, which Pages adds to the page, is the one script it runs (#216).
 /*
-  Content-Security-Policy: default-src 'none'; img-src 'self'; style-src 'self'; font-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'
+  Content-Security-Policy: default-src 'none'; img-src 'self'; style-src 'self'; font-src 'self'; script-src https://static.cloudflareinsights.com; connect-src 'self' https://cloudflareinsights.com; base-uri 'none'; form-action 'none'; frame-ancestors 'none'
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
 /fonts/*

site/index.html

@@ -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>
+    <h2 id="shots">In the browser</h2>
-    <figure class="screens">
+    <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>
-      <img class="desk" src="/shots/desktop.webp" width="2000" height="1250" loading="lazy"
+    <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>
+      <div><dt>Sign in your way</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>
+        <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>

site/site.css

@@ -62,12 +62,16 @@ h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem)
 @media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}
 figcaption{margin:.7rem 0 0;color:var(--muted);font-size:.9rem}
 
-/* The app as it looks: the desktop window, and the phone over its corner. */
+/* The app as it looks. The window in a navy panel, the dial's material, rising out of its bottom
+   edge; the phone in a row of its own beside what it shows, not over the window's corner. */
 .shots{padding-block:4.5rem 0}
-.screens{position:relative;margin:0 0 3rem;padding-right:clamp(0px,12%,9rem)}
+.shotlede{max-width:40rem;margin:-.5rem 0 1.75rem}
-.screens img{display:block;height:auto}
+.window{margin:0;padding:clamp(1rem,3.2vw,2.5rem) clamp(1rem,3.2vw,2.5rem) 0;background:var(--navy);border-radius:1.25rem;overflow:hidden}
-.desk{width:100%;border-radius:.9rem;border:1px solid var(--rule);box-shadow:0 1.5rem 3rem -1.5rem rgba(12,34,56,.45)}
+.window img{display:block;width:100%;height:auto;border-radius:.6rem .6rem 0 0;box-shadow:0 0 0 1px rgba(143,194,234,.22)}
-.phone{position:absolute;right:0;bottom:-3rem;width:24%;max-width:15rem;border-radius:1.6rem;border:.4rem solid var(--navy);box-shadow:0 1.5rem 3rem -1rem rgba(12,34,56,.5)}
+.pocket{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,7vw,5.5rem);align-items:center;padding-block:4rem 0}
+.pocket img{display:block;width:100%;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
+.pocket h2{margin-bottom:.75rem}
+.pocket p{margin:0;max-width:28rem;font-size:1.125rem}
 
 h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
 .does,.then{padding-block:4rem 0}
@@ -85,8 +89,11 @@ footer p{margin:0}
   .bar nav{gap:1rem}
   .hero{padding-block:1.5rem 2rem}
   .does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem}
-  .screens{padding-right:0;margin-bottom:0}
+  .window{margin-inline:-1rem;border-radius:0}
-  .phone{position:static;width:62%;margin:1.5rem auto 0}
+  /* The whole window at this width is too small to read: its left part, larger. */
+  .window img{height:20rem;object-fit:cover;object-position:0 0}
+  .pocket{grid-template-columns:minmax(0,1fr);gap:1.5rem}
+  .pocket img{order:2;width:58%;max-width:14rem}
   .dial{margin-inline:-1rem}
   .scale{border-radius:0}
   figcaption{padding-inline:1rem}