From 62515b95f00301460702cd30d943f298c612e93f Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 9 Apr 2026 21:33:51 +0200
Subject: [PATCH] fix: extend recipe hero images into status bar safe area

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.
---
 package.json                                       | 2 +-
 src/lib/components/recipes/TitleImgParallax.svelte | 2 +-
 src/routes/[recipeLang=recipeLang]/+page.svelte    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5375de1..cd44df8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.21.1",
+	"version": "1.21.2",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/recipes/TitleImgParallax.svelte b/src/lib/components/recipes/TitleImgParallax.svelte
index 5fbcc3a..a3406be 100644
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -46,7 +46,7 @@
 
 .section {
   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: scaleY(calc(1 - var(--scale)));
 }
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 83b47dd..e1c7700 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -137,7 +137,7 @@
 	margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
 	transform-origin: center top;
 	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) {
 	.hero-section {