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

Home page: each feature beside the part of the app that shows it (#216)

Browse Source 
The whole-window screenshot is cut into the parts that show each feature: the feed list, the
episode table with its Files pane, the player, the phone, and the directory's most subscribed,
each in the dial's navy frame at no more than its own size. On a phone the wide ones show their
left part, larger. Features with nothing to show sit in a short list below.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 18:06:49 +00:00
parent 8d5a86d02a
commit 0045396efd
7 changed files with 68 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
site/site.css
View File

@@ -62,22 +62,21 @@ h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem)
@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}
/* The app as it looks. The window framed in a navy panel, the dial's material, even on every
side; the phone in a row of its own beside what it shows, not over the window's corner. */
.shots{padding-block:4.5rem 0}
.shotlede{max-width:40rem;margin:-.5rem 0 1.75rem}
.window{margin:0;padding:clamp(1rem,3.2vw,2.5rem);background:var(--navy);border-radius:1.25rem}
.window img{display:block;width:100%;height:auto;border-radius:.6rem;box-shadow:0 0 0 1px rgba(143,194,234,.22)}
.pocket{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,7vw,5.5rem);align-items:center;padding-block:4rem 0}
.pocket img{display:block;width:100%;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
.pocket h2{margin-bottom:.75rem}
.pocket p{margin:0;max-width:28rem;font-size:1.125rem}
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}
/* Each feature beside the part of the app that shows it, framed in the dial's navy at no more
than its own size; the player, a long thin bar, takes the full width under its text. */
.feature{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:2.5rem}
.feature.wide{grid-template-columns:minmax(0,1fr)}
.feature.wide .say{max-width:40rem}
.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}
.feature.phone>img{justify-self:start;display:block;width:100%;max-width:14rem;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
.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}
.then p{max-width:40rem}
@@ -88,12 +87,12 @@ footer p{margin:0}
main,.bar,footer{padding-inline:1rem}
.bar nav{gap:1rem}
.hero{padding-block:1.5rem 2rem}
.does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.window{margin-inline:-1rem;border-radius:0}
/* The whole window at this width is too small to read: its left part, larger. */
.window img{height:20rem;object-fit:cover;object-position:0 0}
.pocket{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.pocket img{order:2;width:58%;max-width:14rem}
.feature{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.75rem}
.feature.phone>img{width:62%}
/* 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.bar{aspect-ratio:2.4/1}
.also{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.dial{margin-inline:-1rem}
.scale{border-radius:0}
figcaption{padding-inline:1rem}