Skip to content

feat: desktop max-width constraints for cards and headers - #39

Merged
petercr merged 1 commit into
mainfrom
feat/desktop-card-max-widths
Mar 26, 2026
Merged

feat: desktop max-width constraints for cards and headers#39
petercr merged 1 commit into
mainfrom
feat/desktop-card-max-widths

Conversation

@petercr

@petercr petercr commented Mar 26, 2026

Copy link
Copy Markdown
Owner

Summary

  • Home hero card capped at 46rem, centered with margin auto
  • Home heading cards capped at 33rem, content cards at 44rem (matching Penpot Intro frame specs)
  • Increased card row gap (2.5rem4rem) and pair gap (1.5rem2.5rem) for more vertical breathing room
  • Contact page headerPill and formCard switched from fixed px widths to responsive max-widths:
    • headerPill: 90% mobile → 37% desktop → 30% 4K
    • formCard: 90% mobile → 50% desktop → 40% 4K

Test plan

  • View / on desktop — hero card, heading cards, and content cards should be constrained and centered
  • View /contact on desktop — form card wider than header pill
  • View /contact on a 4K display — both cards narrower than desktop
  • Verify mobile layout is unaffected on both routes

- Home hero card capped at 46rem, centered
- Home heading cards capped at 33rem, content cards at 44rem
- Increased card/pair gap for more vertical breathing room
- Contact headerPill and formCard switched from fixed px to responsive
  max-widths (37%/30% and 50%/40% at desktop/4K breakpoints)

Entire-Checkpoint: 55e1ea4ddf7d
@vercel

vercel Bot commented Mar 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ccw Ready Ready Preview, Comment Mar 26, 2026 2:59pm

@petercr
petercr merged commit 05a1209 into main Mar 26, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant