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

Home page: a section on Signals (#254)

Browse Source 
Drawn in CSS like DeadAir's: the noise fades and the three items about
the words listened for stay lit. No screenshot, since one would need a
TypeSafe key on the scratch server.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-16 20:37:34 +00:00
parent 47ad68c7da
commit 3b41abd860
2 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
site/site.css
View File

@@ -85,6 +85,20 @@ 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)}
.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}