rays
83e7ee817b
The player was the one feature with its picture under its text; it is a
row like the rest now, its bar cut short of the volume so it stays
legible in the narrower column. The feed list is cut to the first two
shows, so its row is no taller than its text, and the directory to its
first two rows, which the old crop cut through. On a phone the directory
shows its left column.
The copy loses its insiders' words: feeds are podcasts, the swarm and
seeding ratio are sharing back for as long as you choose, OPML is said
once and explained, Rust is gone. Headings say what you get ("New
episodes, ready to play", "Cut the dead air", "See what others listen
to"), and the hero opens with iPX by name and says it runs on your own
server, which the tagline used to.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
113 lines
7.2 KiB
CSS
113 lines
7.2 KiB
CSS
/* 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. 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 */
|
|
--muted:#46607a;
|
|
--sky:#dff0fb; /* its screen */
|
|
--page:#f1f8fd;
|
|
--scale:#2f6aa0; /* the tuning scale, and links */
|
|
--tick:#8fc2ea; /* the scale on the dark dial */
|
|
--needle:#ff5500;
|
|
--rule:#c6d9ea;
|
|
}
|
|
*{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 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-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:900;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.065em}
|
|
.intro{margin:1.75rem 0 0;max-width:38rem;color:var(--muted);font-size:1.125rem}
|
|
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}
|
|
.btn{display:inline-block;padding:.8rem 1.35rem;border:2px solid var(--navy);border-radius:999px;color:var(--navy);text-decoration:none;font-weight:700}
|
|
.btn:hover{background:var(--sky)}
|
|
.btn.primary{background:var(--navy);color:#fff}
|
|
.btn.primary:hover{background:#1a3a5c}
|
|
|
|
/* The dial: a frequency row, minor and major ticks, stations on two staggered rows as a printed
|
|
dial has them, and the needle, which points down at the scale and lights the station it stops
|
|
on rather than crossing its name. --at is where it stops: the tuned station's middle. */
|
|
.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-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:
|
|
repeating-linear-gradient(90deg,var(--tick) 0 2px,transparent 2px 20%) 0 0/100% 100%,
|
|
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-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;
|
|
box-shadow:0 0 0 1px rgba(12,34,56,.6);animation:tune 2.4s cubic-bezier(.3,.7,.3,1) .4s both}
|
|
.stations .tuned{text-decoration:underline 2px transparent;text-underline-offset:.3em;animation:lit .5s ease-out 2.6s both}
|
|
@keyframes tune{0%{left:3%}68%{left:calc(var(--at) + 7%)}86%{left:calc(var(--at) - 1.4%)}100%{left:var(--at)}}
|
|
@keyframes lit{from{color:#cfe3f4}to{color:#fff;font-weight:800;text-decoration-color:var(--needle)}}
|
|
@media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}
|
|
|
|
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}
|
|
/* Each feature on one row: what it does on the left, beside the part of the app that shows it,
|
|
framed in the dial's navy at no more than its own size. */
|
|
.feature{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:2.5rem}
|
|
.feature h3{margin:0 0 .5rem;color:var(--navy);font-weight:750;font-size:1.35rem;line-height:1.25}
|
|
.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;width:100%}
|
|
.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}
|
|
|
|
|
|
footer{margin-top:5rem;padding-block:1.75rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
|
|
footer p{margin:0}
|
|
|
|
@media (max-width:640px){
|
|
main,.bar,footer{padding-inline:1rem}
|
|
.bar nav{gap:1rem}
|
|
.hero{padding-block:1.5rem 2rem}
|
|
.feature{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.75rem}
|
|
/* A wide crop at this width is too small to read: its left part, larger. */
|
|
.frame img.cut{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:0 0}
|
|
.frame img.cut.player{aspect-ratio:2.4/1}
|
|
.frame img.cut.half{aspect-ratio:2.6/1} /* the directory's left column */
|
|
.also{grid-template-columns:minmax(0,1fr);gap:1.75rem}
|
|
.dial{margin-inline:-1rem}
|
|
.scale{border-radius:0}
|
|
/* Six stations, the tuned one third, rather than twelve too narrow to read. */
|
|
.track{--at:41.7%}
|
|
.stations{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:2%}
|
|
.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}
|
|
}
|