style: match each hero's bottom gap to its top gap

The heroes ended 38px (home), 59px (category pages), and 80px (sponsorship) below their last line, against 20px above their top bar.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-10-22 00:13:55 +08:00
co-authored by Claude
parent 5ab66e83e8
commit f8e618ccae
+4 -7
View File
@@ -195,7 +195,7 @@ kbd {
z-index: 1;
width: min(100%, calc(var(--shell-max) + (var(--shell-pad) * 2)));
margin: 0 auto;
padding: 1.25rem var(--shell-pad) 2.4rem;
padding: 1.25rem var(--shell-pad);
display: flex;
flex-direction: column;
gap: 2rem;
@@ -486,7 +486,8 @@ kbd {
z-index: 1;
width: min(100%, calc(var(--shell-max) + (var(--shell-pad) * 2)));
margin: 0 auto;
padding: 1.25rem var(--shell-pad) clamp(2.25rem, 5vw, 3.5rem);
/* The bottom is a little smaller because the jump links' text sits inside its line box */
padding: 1.25rem var(--shell-pad) 1.1rem;
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
@@ -1311,7 +1312,7 @@ th[data-sort].sort-asc::after {
}
.sponsorship-hero .category-hero-shell {
padding-bottom: clamp(3.25rem, 6vw, 5rem);
padding-bottom: 1.25rem;
gap: clamp(2rem, 5vw, 3.5rem);
}
@@ -1727,10 +1728,6 @@ th[data-sort].sort-asc::after {
}
@media (max-width: 960px) {
.hero-shell {
padding-bottom: 2rem;
}
.hero-grid,
.results-intro,
.sponsor-shell,