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

Home page: the reader's typeface, screenshots, no source or run sections (#216)

Browse Source 
Inter, the same file ipx-web serves, in place of Archivo. Screenshots of a scratch iPX subscribed
to public podcasts (99% Invisible playing; Ologies on a phone), never production's. The Run it
section and the links to the source are out for now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 17:54:59 +00:00
parent 2ee2382c9b
commit 579fe27b15
6 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
site/site.css
View File

@@ -1,7 +1,7 @@
/* ipxreader.app. The palette is the iPodderX logo's: the radio's navy body, the sky of its
screen, the blue of its tuning scale, and the orange needle, which is the needle alone. One
typeface, Archivo, its width doing the work: expanded for the name, condensed on the dial. */
@font-face{font-family:Archivo;src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
screen, the blue of its tuning scale, and the orange needle, which is the needle alone. The
typeface is the reader's own, Inter, the same file (web/InterVariable.woff2). */
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
--navy:#0c2238; /* the radio */
--ink:#16304a; /* body text, a step off the navy */
@@ -15,20 +15,20 @@
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Archivo,system-ui,sans-serif;font-stretch:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif}
a{color:var(--scale);text-underline-offset:.18em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--scale);outline-offset:3px;border-radius:6px}
main,.bar,footer{max-width:72rem;margin:0 auto;padding-inline:1.5rem}
.bar{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}
.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-stretch:112%;font-size:1.25rem}
.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.25rem}
.home img{border-radius:9px;display:block}
.bar nav{display:flex;gap:1.5rem}
.bar nav a{color:var(--navy);text-decoration:none;font-weight:600}
.bar nav a:hover{text-decoration:underline}
.hero{padding-block:3rem 2.5rem;max-width:46rem}
h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.045em}
h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.065em}
.lede{margin:1.75rem 0 0;color:var(--navy);font-weight:650;font-size:clamp(1.45rem,3.4vw,2rem);line-height:1.2;letter-spacing:-.01em}
.intro{margin:1rem 0 0;max-width:38rem;color:var(--muted);font-size:1.125rem}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}
@@ -43,7 +43,7 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp(
.dial{margin:1rem 0 0}
.scale{background:var(--navy);border-radius:1.25rem;overflow:hidden}
.track{position:relative;--at:45.8%}
.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-stretch:70%;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.freq li{width:0;display:flex;justify-content:center} /* each number centred on its tick */
.freq::after{content:"";position:absolute;left:4%;right:4%;top:2.6rem;height:1.6rem;
background:
@@ -51,7 +51,7 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp(
repeating-linear-gradient(90deg,rgba(143,194,234,.55) 0 1px,transparent 1px 2%) 0 100%/100% 45%;
background-repeat:no-repeat}
.stations{list-style:none;margin:2.6rem 0 0;padding:0 1% 1.6rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;
color:#cfe3f4;font-stretch:65%;font-weight:550;font-size:.92rem;line-height:1.15;text-align:center}
color:#cfe3f4;font-weight:550;font-size:.84rem;line-height:1.2;letter-spacing:-.01em;text-align:center}
.stations li{padding-inline:.15rem}
.stations li:nth-child(even){margin-top:1.7rem}
.needle{position:absolute;top:2.35rem;height:2.7rem;left:var(--at);width:3px;margin-left:-1.5px;background:var(--needle);border-radius:2px;
@@ -62,18 +62,19 @@ h1{margin:0;color:var(--navy);font-weight:850;font-stretch:125%;font-size:clamp(
@media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}
figcaption{margin:.7rem 0 0;color:var(--muted);font-size:.9rem}
h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-stretch:112%;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.does,.run,.then{padding-block:4rem 0}
/* The app as it looks: the desktop window, and the phone over its corner. */
.shots{padding-block:4.5rem 0}
.screens{position:relative;margin:0 0 3rem;padding-right:clamp(0px,12%,9rem)}
.screens img{display:block;height:auto}
.desk{width:100%;border-radius:.9rem;border:1px solid var(--rule);box-shadow:0 1.5rem 3rem -1.5rem rgba(12,34,56,.45)}
.phone{position:absolute;right:0;bottom:-3rem;width:24%;max-width:15rem;border-radius:1.6rem;border:.4rem solid var(--navy);box-shadow:0 1.5rem 3rem -1rem rgba(12,34,56,.5)}
h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.does,.then{padding-block:4rem 0}
.does dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
.does dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
.does dd{margin:.45rem 0 0;max-width:34rem}
.run>p{max-width:40rem}
.run ol{list-style:none;counter-reset:step;margin:2rem 0;padding:0;display:grid;gap:1.75rem;max-width:44rem}
.run li{counter-increment:step;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem}
.run li::before{content:counter(step);grid-row:span 2;color:var(--scale);font-weight:800;font-stretch:125%;font-size:2.4rem;line-height:1}
.run li p{margin:0 0 .6rem}
pre{margin:0;padding:1rem 1.15rem;background:var(--navy);color:var(--sky);border-radius:.75rem;overflow-x:auto;font:500 .92rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.then p{max-width:40rem}
footer{margin-top:5rem;padding-block:1.75rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
@@ -84,8 +85,8 @@ footer p{margin:0}
.bar nav{gap:1rem}
.hero{padding-block:1.5rem 2rem}
.does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.run li{grid-template-columns:2.25rem minmax(0,1fr)}
.run li::before{font-size:1.9rem}
.screens{padding-right:0;margin-bottom:0}
.phone{position:static;width:62%;margin:1.5rem auto 0}
.dial{margin-inline:-1rem}
.scale{border-radius:0}
figcaption{padding-inline:1rem}
@@ -95,5 +96,4 @@ footer p{margin:0}
.stations li:nth-child(-n+3),.stations li:nth-child(n+10){display:none}
.stations li:nth-child(even){margin-top:0}
.stations li:nth-child(odd){margin-top:1.7rem}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
}