From b56c97259d7a8a923a8446edcaf40835d7fb719e Mon Sep 17 00:00:00 2001 From: rays Date: Fri, 16 Oct 2026 21:00:24 +0000 Subject: [PATCH] Home page: the features zigzag, each picture centred in its column (#216) Co-Authored-By: Claude Opus 5.5 --- site/site.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/site/site.css b/site/site.css index bf7eddb..58d5916 100644 --- a/site/site.css +++ b/site/site.css @@ -69,7 +69,10 @@ h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4 .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} +/* Every other row the picture comes first, so the page zigzags rather than running down one side. */ +.feature:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,22rem)} +.feature:nth-of-type(even) .say{order:2} +.frame{margin:0;justify-self:center;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. */ @@ -175,7 +178,8 @@ footer p{margin:0} 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} + .feature,.feature:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.75rem} + .feature:nth-of-type(even) .say{order:0} /* 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}