Home page: a screenshot for Signals in place of the drawing (#254)

The drawn list's made-up titles read badly. The screenshot is a Signal
called Space on a scratch iPX on eight public feeds, with a stand-in
for Jev matching the Signal's words in titles, in Glass as the other
shots are.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/index.html

@@ -105,28 +105,13 @@
       </figure>
     </div>
 
-    <!-- Signals: every item from every feed is noise until the words someone listens for pick
-         a few out. CSS only, as DeadAir's. -->
     <div class="feature">
       <div class="say">
         <h3>Pick the signal out of the noise</h3>
         <p>Make a Signal with the words to listen for, and a sentence saying what you mean if the words are not enough. iPX reads everything your podcasts and blogs bring in and keeps what is about it in a list of its own, so one subject is in one place however many feeds it turns up in. Signals need a key of your own from <a href="https://typesafe.ai">typesafe.ai</a>.</p>
       </div>
-      <figure class="frame signals" role="img" aria-label="A list of items from many feeds, most fading into the noise, while the three about the words listened for stay lit.">
+      <figure class="frame"><img class="cut" src="/shots/signals.webp" width="874" height="398" loading="lazy"
-        <div class="tune" aria-hidden="true">
+        alt="A Signal called Space, picked out of the noise of eight feeds: episodes and posts about galaxies, Artemis II, Mars and a rocket launch from Hackaday, Universe Today, NASA's Houston We Have a Podcast and Ars Technica."></figure>
-          <p class="for">Listening for <b>rockets</b>, <b>launch</b>, <b>orbit</b></p>
-          <ul>
-            <li class="n"><i></i></li>
-            <li class="s">What it takes to stay in orbit</li>
-            <li class="n"><i></i></li>
-            <li class="n"><i></i></li>
-            <li class="s">A week at the launch site</li>
-            <li class="n"><i></i></li>
-            <li class="n"><i></i></li>
-            <li class="s">Why the second stage came down early</li>
-          </ul>
-        </div>
-      </figure>
     </div>
 
     <div class="feature">

site/site.css

@@ -85,21 +85,6 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
   48%,86%{flex-basis:.8%;background-color:rgba(255,85,0,.35)}
   100%{flex-basis:4%;background-color:transparent}}
 @media (prefers-reduced-motion:reduce){.hush{animation:none;flex-basis:.8%;background-color:rgba(255,85,0,.35)}}
-/* Signals: the noise, every other item, fades; the items about the words stay lit, marked in the
-   needle's orange. */
-.frame.signals{justify-self:stretch;width:100%}
-.tune{padding:.4rem .5rem;border-radius:.55rem;background:rgba(143,194,234,.08);color:#fff}
-.tune .for{margin:0 0 .5rem;color:var(--tick);font-size:.9rem}
-.tune .for b{color:#fff;font-weight:650}
-.tune ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
-.tune li{display:flex;align-items:center;min-height:1.6rem;padding-left:.7rem;border-left:3px solid transparent;font-size:.95rem;font-weight:600;line-height:1.3}
-.tune .n i{display:block;height:.55rem;border-radius:.3rem;background:var(--tick);width:58%}
-.tune .n:nth-child(3) i{width:46%}.tune .n:nth-child(4) i{width:70%}.tune .n:nth-child(7) i{width:40%}  /* the page's CSP takes no inline style */
-.tune .n{animation:noise 7s ease-in-out infinite}
-.tune .s{animation:signal 7s ease-in-out infinite}
-@keyframes noise{0%,14%{opacity:.7}36%,86%{opacity:.15}100%{opacity:.7}}
-@keyframes signal{0%,14%{border-left-color:transparent}36%,86%{border-left-color:var(--needle)}100%{border-left-color:transparent}}
-@media (prefers-reduced-motion:reduce){.tune .n{animation:none;opacity:.15}.tune .s{animation:none;border-left-color:var(--needle)}}
 .also{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
 .also dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
 .also dd{margin:.45rem 0 0;max-width:34rem}