jason/alwisp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero card sizing and heading overflow clipping

Browse Source 
Previous card attempt used padding: 3rem 3.5rem which overrode the
container's padding-inline and shrank the text area from 652px to 568px,
making the heading clip worse and the card look too narrow to read.

Two fixes:
- max-width: 780px + padding: 3rem 2.5rem gives 730px text area,
  comfortably containing the heading at any viewport size
- heading clamp changed from (2.4rem, 6vw, 4rem) to (2.2rem, 4.5vw, 3.25rem)
  so the max rendered size stays well within the card width

https://claude.ai/code/session_015wpwmheufcxkBuXivrSHhd
This commit is contained in:
Claude
2026-03-01 02:43:48 +00:00
parent c4193eea59
commit 04bf20c14e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
www/css/style.css
View File

@@ -292,14 +292,14 @@ ul { list-style: none; }
.hero__content { .hero__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 680px; max-width: 780px;
padding: 3rem 3.5rem; padding: 3rem 2.5rem;
background: rgba(8, 14, 38, 0.72); background: rgba(8, 14, 38, 0.72);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-lg); border-radius: var(--r-lg);
margin-block: 4rem; margin-block: 3rem;
} }
.hero__eyebrow { .hero__eyebrow {
@@ -313,7 +313,7 @@ ul { list-style: none; }
.hero__heading { .hero__heading {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: clamp(2.4rem, 6vw, 4rem); font-size: clamp(2.2rem, 4.5vw, 3.25rem);
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;