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

14
site/site.css
View File

@@ -71,6 +71,20 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
.feature p{margin:0;max-width:34rem}
.frame{margin:0;justify-self:start;max-width:100%;padding:clamp(.6rem,1.6vw,1.1rem);background:var(--navy);border-radius:1.1rem}
.frame img{display:block;max-width:100%;height:auto;border-radius:.55rem}
/* DeadAir: the track is the episode's full length; talk keeps its width, each silence lights
in the needle's orange and shrinks to a pause, and the end comes in from the right. */
.frame.deadair{justify-self:stretch}
.wave{display:flex;align-items:center;height:4.5rem;border-radius:.55rem;background:rgba(143,194,234,.08)}
.talk{height:100%;background:url(/wave.svg) 0 50%/auto 100% repeat-x}
.talk:first-child{border-radius:.55rem 0 0 .55rem}
.t1{flex:0 0 14%}.t2{flex:0 0 19%}.t3{flex:0 0 9%}.t4{flex:0 0 16%}.t5{flex:0 0 12%}.t6{flex:0 0 10%}
.hush{flex:0 0 4%;align-self:stretch;background:linear-gradient(var(--tick),var(--tick)) 50%/100% 2px no-repeat;border-radius:.3rem;animation:hush 7s ease-in-out infinite}
@keyframes hush{
0%,14%{flex-basis:4%;background-color:transparent}
24%,30%{flex-basis:4%;background-color:rgba(255,85,0,.35)}
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)}}
.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}