diff --git a/index.html b/index.html
index 6ed209eb..e41eb6e0 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,8 @@
+
+
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index da78eca2..3d6dd5cf 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -43,6 +43,10 @@ html[data-no-scroll], html[data-no-scroll] body {
overflow: hidden;
}
+.top-content {
+ padding-top: calc(env(safe-area-inset-top) - 20px);
+}
+
.roll {
animation: roll 1s;
}
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 90e91e59..0abf62da 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -47,14 +47,14 @@ export function Navigation(props: NavigationProps) {
{/* backgrounds - these are seperate because of z-index issues */}
{props.children}
diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx
index 5c2a0c12..bbb68852 100644
--- a/src/pages/parts/home/HeroPart.tsx
+++ b/src/pages/parts/home/HeroPart.tsx
@@ -39,20 +39,30 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
},
[setShowBg, setIsSticky],
);
+ const { width: windowWidth, height: windowHeight } = useWindowSize();
- const { width: windowWidth } = useWindowSize();
+ // Detect if running as a PWA on iOS
+ const isIOSPWA =
+ /iPad|iPhone|iPod/i.test(navigator.userAgent) &&
+ window.matchMedia("(display-mode: standalone)").matches;
- const topSpacing = 16;
+ const topSpacing = isIOSPWA ? 60 : 16;
const [stickyOffset, setStickyOffset] = useState(topSpacing);
+
+ const isLandscape = windowHeight < windowWidth && isIOSPWA;
+ const adjustedOffset = isLandscape
+ ? -40 // landscape
+ : 0; // portrait
+
useEffect(() => {
- if (windowWidth > 1200) {
+ if (windowWidth > 1280) {
// On large screens the bar goes inline with the nav elements
setStickyOffset(topSpacing);
} else {
// On smaller screens the bar goes below the nav elements
- setStickyOffset(topSpacing + 60);
+ setStickyOffset(topSpacing + 60 + adjustedOffset);
}
- }, [windowWidth]);
+ }, [adjustedOffset, topSpacing, windowWidth]);
const time = getTimeOfDay(new Date());
const title = randomT(`home.titles.${time}`);