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

Home page: no phone row, the player bar unsquashed, Since 2004 full width (#216)

Browse Source 
The player crop had class "bar", which is also the header's class, so the
image took the header's padding and flex layout and was drawn squashed.
It is "player" now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 19:59:57 +00:00
parent 0045396efd
commit 50ffc5c81b
3 changed files with 2 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
site/index.html
View File

@@ -82,19 +82,10 @@
<h3>Pick up where you left off</h3>
<p>The player keeps your place in every episode, on every device. Turn on DeadAir for a show and it plays without the long silences, leaving the pause you choose.</p>
</div>
<figure class="frame"><img class="cut bar" src="/shots/player.webp" width="1200" height="80" loading="lazy"
<figure class="frame"><img class="cut player" src="/shots/player.webp" width="1200" height="80" loading="lazy"
alt="The player along the bottom of the page: the episode playing, back and forward, how far in it is, its speed and the volume."></figure>
</div>
<div class="feature phone">
<div class="say">
<h3>On your phone</h3>
<p>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode as on your computer.</p>
</div>
<img src="/shots/phone.webp" width="300" height="649" loading="lazy"
alt="iPX on a phone: Ologies with Alie Ward and its latest episodes.">
</div>
<div class="feature">
<div class="say">
<h3>A shared directory</h3>

BIN
site/shots/phone.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

5
site/site.css
View File

@@ -73,13 +73,11 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4
.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}
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}
@@ -88,10 +86,9 @@ footer p{margin:0}
.bar nav{gap:1rem}
.hero{padding-block:1.5rem 2rem}
.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}
.frame img.cut.player{aspect-ratio:2.4/1}
.also{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.dial{margin-inline:-1rem}
.scale{border-radius:0}