3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: widen the award column and bring it in beside the copy

Browse Source 
The award card was a 340px column with a 46px gap to the copy, which left the
photograph the whole point of the card small and the two halves of the hero
visibly apart rather than one composition. The column is now 440px and the gap
24px, so the card is a third again as wide and sits closer to the headline.

Measured on the built app at 1280px: .lp-award 440px wide (was 340), and the
photo box inside it 410px (was 310) — 440 less the 1px border and 14px padding
on each side. At 4:5 the image goes 387.5px tall to 512.5px. The copy's right
edge is now 824 against the card's left edge 848, where before it was 902
against 948: the same 24px of air between them, but the copy's right edge moved
78px left and the card 100px left, so the hero reaches further across and the
extra width is photograph rather than margin.

The stacking breakpoint below 980px carried the same 340px cap, which would
have made the card narrower than the column it replaces; raised to 440px to
match. Measured at 900px: the card stacks under the copy at 440px wide.

Verified:
  award-column-probe.cjs (scratchpad) — 18/18 on http://localhost:8090, with
    the width check now 440 and the geometry line reading copy.r=824 card.l=848.
  landing-test.cjs clean, lp-arrows-test.cjs 33/33, landing-rating-test.cjs
    21/21, landing-photo-guard-test.cjs 21/21 — 0 fail against the rebuilt app.
  web tsc --noEmit clean. Dark and light themes both eyeballed on the built
    app (award-hero-dark.png, award-hero-light.png).

ponytail: the width is a literal in two places — the grid column and the 980px
cap — rather than a custom property, because the two are the same value today
and a token would need the media query to read it too; when a third width shows
up, lift both to --lp-award-w. The light-theme box-shadow is still the dark
card's rgba(0,0,0,0.35); widening the card makes it no more or less wrong, so
it is left as it was.
This commit is contained in:
3dtours
2026-09-23 18:27:05 +07:00
parent 3f5d2cd017
commit cd9dd28adc
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/landing.css
+2 -2
View File
@@ -269,7 +269,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
/* The award column beside the hero copy: shown only when today's or this
week's best-rated photo exists, so the headline keeps its full width when
nobody has voted yet. */
.lp-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 46px; align-items: center; }
.lp-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: center; }
.lp-award {
border: 1px solid var(--lp-line);
background: var(--lp-card);
@@ -567,7 +567,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
.lp-recipe-card { transform: none; }
/* the award drops under the copy rather than squeezing the headline */
.lp-hero-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.lp-award { max-width: 340px; }
.lp-award { max-width: 440px; }
}
@media (max-width: 680px) {
/* logo + theme + language + burger have to fit a 360px phone */