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

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}