rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Home page: a DeadAir section, with its silences shrinking (#216)

Browse Source 
A waveform in the dial's navy frame: the talk keeps its width, each
silence lights in the needle's orange and shrinks to a short pause, and
the episode ends sooner. CSS only, as the page's CSP allows no script of
its own; with reduced motion it shows the shortened episode, still. The
player section no longer mentions DeadAir, which has its own now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 20:09:25 +00:00
parent 2dd6e50065
commit 0875bb9e39
4 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
site/index.html
View File

@@ -78,12 +78,31 @@
<div class="feature wide">
<div class="say">
<h3>Pick up where you left off</h3>
<p>The player keeps your place in every episode, on every device. Turn on DeadAir for a show and it plays without the long silences, leaving the pause you choose.</p>
<p>The player keeps your place in every episode, on every device.</p>
</div>
<figure class="frame"><img class="cut player" src="/shots/player.webp" width="1200" height="80" loading="lazy"
alt="The player along the bottom of the page: the episode playing, back and forward, how far in it is, its speed and the volume."></figure>
</div>
<!-- DeadAir: talk keeps its length, the quiet between it shrinks to a short pause, and the
episode ends sooner. CSS only; the page runs no script of its own. -->
<div class="feature wide">
<div class="say">
<h3>DeadAir</h3>
<p>Turn it on for a show and long silences shrink to a short pause, so episodes finish sooner while every voice keeps its own pace. You choose how much of a pause to leave.</p>
</div>
<figure class="frame deadair" role="img" aria-label="A waveform whose silent gaps shrink to short pauses, so the episode ends sooner.">
<div class="wave" aria-hidden="true">
<span class="talk t1"></span><span class="hush"></span>
<span class="talk t2"></span><span class="hush"></span>
<span class="talk t3"></span><span class="hush"></span>
<span class="talk t4"></span><span class="hush"></span>
<span class="talk t5"></span><span class="hush"></span>
<span class="talk t6"></span>
</div>
</figure>
</div>
<div class="feature">
<div class="say">
<h3>A shared directory</h3>