From fbe7629420bb68e948c385d55646a2ddfec4aa6a Mon Sep 17 00:00:00 2001 From: rays Date: Fri, 16 Oct 2026 20:07:18 +0000 Subject: [PATCH] App-icon tiles for Signals and DeadAir, drawn as the logo is (#268) web/signals.svg and web/deadair-{on,off}.svg, each with a -dark twin, follow logo.svg's rules: square and opaque, the logo's gradient ground, flat layers in its scale blues, the needle's orange, nothing thin enough to vanish at 32px. Signals is the page's own glyph, waves going out from a point, the point in orange. DeadAir on is the waveform closed up with the needle at the cut; off has the silence still in its middle, an orange flat line, and its bars muted, so the state is in the shape as the old glyphs had it. The Signals folder row and its page header show the Signals tile in place of the glyph on an accent tint; the player's DeadAir switch shows the on or off tile. tile() puts both variants on the page, and the mode rule that picked the logo's now picks any .onlight/.ondark. The three glyphs nothing uses any more are gone. Co-Authored-By: Claude Opus 5.5 --- web/app.css | 8 ++++---- web/build.mjs | 1 + web/deadair-off-dark.svg | 17 +++++++++++++++++ web/deadair-off.svg | 18 ++++++++++++++++++ web/deadair-on-dark.svg | 17 +++++++++++++++++ web/deadair-on.svg | 20 ++++++++++++++++++++ web/signals-dark.svg | 15 +++++++++++++++ web/signals.svg | 17 +++++++++++++++++ web/src/player.ts | 4 ++-- web/src/signals.ts | 5 ++--- web/src/util.ts | 8 ++------ 11 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 web/deadair-off-dark.svg create mode 100644 web/deadair-off.svg create mode 100644 web/deadair-on-dark.svg create mode 100644 web/deadair-on.svg create mode 100644 web/signals-dark.svg create mode 100644 web/signals.svg diff --git a/web/app.css b/web/app.css index 48ffb7f..9cffc23 100644 --- a/web/app.css +++ b/web/app.css @@ -501,9 +501,9 @@ a{color:var(--accent)} } #applogo{display:flex;flex:none} #applogo img{width:28px;height:28px;border-radius:7px} -/* The logo in the mode's own variant. Dark unless the page says light, as the palette is: with +/* The logo, and the app-icon tiles, in the mode's own variant. Dark unless the page says light, as the palette is: with Auto, data-mode arrives with the script, and until then the page is drawn dark. */ -:root[data-mode="light"] .logo.ondark,:root:not([data-mode="light"]) .logo.onlight{display:none} +:root[data-mode="light"] .ondark,:root:not([data-mode="light"]) .onlight{display:none} /* Classic is the 2004 app, so it wears the 2004 app's icon. */ .logo.classic,:root[data-theme="classic"] .logo:not(.classic){display:none} :root[data-theme="classic"] .logo.classic{display:block} @@ -590,8 +590,6 @@ input:focus,select:focus{outline:0;border-color:var(--accent)} .feed.lastpin{margin-bottom:9px} .feed.lastpin::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;border-bottom:1px solid var(--line)} .feed.child .art{width:28px;height:28px;font-size:11px} -/* A Signal's tile is its icon, as a place's is: there is no artwork of its own. */ -.art.sig .i{width:45%;height:45%} /* A Signal's own icon (#261): Font Awesome's file as a mask, so it is drawn in the text's colour and follows the theme as the page's own icons do. */ .ficon{ @@ -780,6 +778,8 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i, } /* Initials, tinted by a hash of the name so two "TS" in a row can be told apart. Mixed into the page ground, not --raise: that is also the selected row, and a selected tile vanished into it. */ +.art>.tile{width:100%;height:100%;display:block} +#pdead .tile{width:22px;height:22px;border-radius:5px} .art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)} /* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */ .art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch} diff --git a/web/build.mjs b/web/build.mjs index 3571fa7..e56b235 100644 --- a/web/build.mjs +++ b/web/build.mjs @@ -123,6 +123,7 @@ if (process.argv[1] === fileURLToPath(import.meta.url)) { // nothing here shows any more but the classic theme. for (const [from, to] of [ ['logo.svg', 'logo.svg'], ['logo-dark.svg', 'logo-dark.svg'], + ...['signals', 'deadair-on', 'deadair-off'].flatMap(n => [`${n}.svg`, `${n}-dark.svg`]).map(f => [f, f]), ['favicon.png', 'favicon.png'], ['favicon.png', 'favicon.ico'], ['favicon-dark.png', 'favicon-dark.png'], ['apple-touch-icon.png', 'apple-touch-icon.png'], ['apple-touch-icon.png', 'apple-touch-icon-precomposed.png'], ['ipodderx-icon.png', 'icon.png'], ['boot.js', 'boot.js'], ['InterVariable.woff2', 'inter.woff2'], ['Inter-LICENSE.txt', 'Inter-LICENSE.txt'], diff --git a/web/deadair-off-dark.svg b/web/deadair-off-dark.svg new file mode 100644 index 0000000..4a049f2 --- /dev/null +++ b/web/deadair-off-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/web/deadair-off.svg b/web/deadair-off.svg new file mode 100644 index 0000000..6351602 --- /dev/null +++ b/web/deadair-off.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + diff --git a/web/deadair-on-dark.svg b/web/deadair-on-dark.svg new file mode 100644 index 0000000..d4c1c4b --- /dev/null +++ b/web/deadair-on-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/web/deadair-on.svg b/web/deadair-on.svg new file mode 100644 index 0000000..2b8d11c --- /dev/null +++ b/web/deadair-on.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + diff --git a/web/signals-dark.svg b/web/signals-dark.svg new file mode 100644 index 0000000..2b0e2c2 --- /dev/null +++ b/web/signals-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/signals.svg b/web/signals.svg new file mode 100644 index 0000000..d4ca16d --- /dev/null +++ b/web/signals.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/web/src/player.ts b/web/src/player.ts index e5cde0c..490a93a 100644 --- a/web/src/player.ts +++ b/web/src/player.ts @@ -164,13 +164,13 @@ $('#seek').oninput=(e: Event)=>{const d=audio.duration;if(d)au $('#rate').onchange=(e: Event)=>{audio.playbackRate=+(e.target as HTMLSelectElement).value;localStorage.setItem('ipx.rate',(e.target as HTMLSelectElement).value)}; $('#vol').oninput=(e: Event)=>{audio.volume=Number((e.target as HTMLInputElement).value)/100;localStorage.setItem('ipx.vol',(e.target as HTMLInputElement).value)}; /// DeadAir's switch beside the speed: on or off for the show that is playing. The state is in the -/// icon's shape and aria-pressed, never a colour. +/// icon's shape (the silence still in it, or closed up) and aria-pressed, never a colour. function paintDead(){ const b=$('#pdead'), f=S.feeds.find(x=>x.id===player.feed); b.hidden=!f||document.body.classList.contains('has-video'); if(!f||b.hidden) return; b.setAttribute('aria-pressed',String(!!f.deadair)); - b.innerHTML=f.deadair?ICON.deadairOn:ICON.deadair; + b.innerHTML=tile(f.deadair?'deadair-on':'deadair-off'); b.title=f.deadair?'DeadAir is cutting the dead air from this show':'DeadAir: cut the dead air from this show'; } $('#pdead').onclick=async()=>{ diff --git a/web/src/signals.ts b/web/src/signals.ts index bd12f5b..600c947 100644 --- a/web/src/signals.ts +++ b/web/src/signals.ts @@ -21,8 +21,7 @@ function signalOf(view: string|null){ /// The Signals folder: first in the feed list, under All Subscriptions, open or closed as an OPML's /// is (#255, #256). As rows under the places, a long list of them pushed the feeds down. const SIGNALS=':signals'; -// Tinted as a feed's initials are: a plain tile vanished into a selected row (see .art.ini). -const sigArt=()=>`
${ICON.signal}
`; +const sigArt=()=>`
${tile('signals')}
`; function feedRow(id: string, cls: string, html: string, open: ()=>void){ const el=document.createElement('div'); el.className='feed '+cls+(S.feed===id?' sel':''); @@ -75,7 +74,7 @@ function renderSignals(){ box.classList.add('plain'); box.innerHTML=`
-
${ICON.signal}
+
${tile('signals')}

Signals

Each one picks what matters out of the noise of your ${plural(S.feeds.length,'feed')} ยท ${unread} unread
diff --git a/web/src/util.ts b/web/src/util.ts index d44fcde..5137bf6 100644 --- a/web/src/util.ts +++ b/web/src/util.ts @@ -12,9 +12,9 @@ const esc = (s: string|null|undefined) => (s??'').replace(/[&<>"']/g,c=>ESCAPED[ // ones used, so there is no font to download and nothing is fetched from anyone else. Each takes // the button's own colour. To add one, copy the path from svgs/