smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

center scroll text in landingpage

Browse Source
This commit is contained in:
smacks
2026-03-22 23:08:25 +01:00
parent 1a4c20532e
commit 115f12141d
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+12 -4
View File
@@ -48,6 +48,13 @@
/* ── Base reset ──────────────────────────────────────────────────── */ /* ── Base reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Prevent accidental horizontal overflow on mobile */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding-top: 5rem; scroll-padding-top: 5rem;
@@ -327,8 +334,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
.landing__scroll-nudge { .landing__scroll-nudge {
position: absolute; position: absolute;
bottom: 2.5rem; bottom: 2.5rem;
left: 50%; inset-inline: 0;
transform: translateX(-50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -864,14 +870,15 @@ img, picture { display: block; max-width: 100%; height: auto; }
margin: 20px auto 40px; margin: 20px auto 40px;
} }
.hero-card, .hero-copy { order: unset; } .hero-card, .hero-copy { order: unset; }
.hero-copy { padding: 0 2px; } .hero-copy { padding: 0 6px; text-align: center; }
.hero-copy h1 { font-size: clamp(30px,9vw,40px); } .hero-copy h1 { font-size: clamp(30px,9vw,40px); }
.search { flex-direction: column; gap: 10px; } .search { flex-direction: column; gap: 10px; }
.search button { width: 100%; } .search button { width: 100%; }
.section-header { align-items: center; text-align: center; }
.tag-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .tag-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.tag-row .tag { flex: 0 0 auto; } .tag-row .tag { flex: 0 0 auto; }
.hero-card img { max-height: 240px; object-fit: cover; object-position: center; } .hero-card img { max-height: 240px; object-fit: cover; object-position: center; }
.section-header { flex-direction: column; align-items: flex-start; gap: 6px; } .section-header { flex-direction: column; align-items: center; gap: 6px; }
.section-header p { font-size: 14px; } .section-header p { font-size: 14px; }
.grid, .grid--tight, .recipe__body { grid-template-columns: 1fr; } .grid, .grid--tight, .recipe__body { grid-template-columns: 1fr; }
.recipe { margin: 0 auto 40px; } .recipe { margin: 0 auto 40px; }
@@ -887,6 +894,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
.coming-strip__row { grid-auto-columns: 128px; } .coming-strip__row { grid-auto-columns: 128px; }
.coming-chip__image img { aspect-ratio: 1/1; } .coming-chip__image img { aspect-ratio: 1/1; }
.hero-card img { max-height: 220px; } .hero-card img { max-height: 220px; }
.hero-copy { text-align: center; }
.card__body { padding: 14px; } .card__body { padding: 14px; }
.recipe__hero { grid-template-columns: 1fr; } .recipe__hero { grid-template-columns: 1fr; }
.recipe__hero img { max-height: 260px; object-fit: cover; object-position: center; order: 1; } .recipe__hero img { max-height: 260px; object-fit: cover; object-position: center; order: 1; }