Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: extend recipe hero images into status bar safe area

Browse Source 
Account for env(safe-area-inset-top) in the hero negative margin-top
so images fill the status bar area on edge-to-edge Android instead of
leaving empty space.
This commit is contained in:
Alexander Bocken
2026-04-09 21:33:51 +02:00
parent 29059b8197
commit a7491d6f08
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "homepage", "name": "homepage",
"version": "1.21.1", "version": "1.21.2",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
src/lib/components/recipes/TitleImgParallax.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
.section { .section {
margin-bottom: -20vh; margin-bottom: -20vh;
margin-top: calc(-3.5rem - 12px); margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
transform-origin: center top; transform-origin: center top;
transform: scaleY(calc(1 - var(--scale))); transform: scaleY(calc(1 - var(--scale)));
} }
src/routes/[recipeLang=recipeLang]/+page.svelte
+1 -1
View File
@@ -137,7 +137,7 @@
margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px))); margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
transform-origin: center top; transform-origin: center top;
transform: scaleY(calc(1 - var(--parallax-scale))); transform: scaleY(calc(1 - var(--parallax-scale)));
margin-top: calc(-3.5rem - 12px); margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
.hero-section { .hero-section {