Changeset 7ca3ffc in Klonkt

Timestamp:

06/26/2026 03:14:05 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

a036251

Parents:

dee7f02

Message:

fix(ios): use env(safe-area-inset-*) directly instead of via a CSS var

The masthead + footer safe-area used calc(... + var(--safe-top/bot)), and env() nested
in a CSS custom property doesn't reliably resolve in iOS standalone PWAs (resolves to 0
-> content under the notch). Use env() directly in the calc. Bumped style.css cache-buster
to v53 so PWAs fetch the fresh CSS.

Location:

src

Files:

• assets/css/style.css (modified) (5 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -507 +507 @@
 .masthead {
     border-bottom: 1px solid var(--rule);
-    padding: calc(1rem + var(--safe-top)) 0 1rem;
+    padding: calc(1rem + env(safe-area-inset-top, 0px)) 0 1rem;
     /* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
        frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
@@ -668 +668 @@
 
 /* Footer */
-.site-footer { padding: 2rem 0 calc(2rem + var(--safe-bot)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
+.site-footer { padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
 .site-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; }
 .site-footer a { color: var(--ink-muted); text-decoration-color: var(--rule); }
@@ -1678 +1678 @@
 }
 @media (max-width: 400px) {
-    .masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }
+    .masthead { padding: calc(.5rem + env(safe-area-inset-top, 0px)) 0 .5rem; }
     .masthead-inner { gap: .25rem; }
     .site-title { font-size: 1.05rem; }
@@ -2759 +2759 @@
 
 /* Masthead: compacter */
-.masthead { padding: calc(.55rem + var(--safe-top)) 0 .55rem; }
+.masthead { padding: calc(.55rem + env(safe-area-inset-top, 0px)) 0 .55rem; }
 .masthead-inner { gap: 1rem; }
 .site-title { font-size: 1.25rem; }
@@ -2787 +2787 @@
 
 /* Site footer compacter */
-.site-footer { padding: 1.25rem 0 calc(1.25rem + var(--safe-bot)); margin-top: 2rem; font-size: .78rem; }
+.site-footer { padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)); margin-top: 2rem; font-size: .78rem; }
 .site-footer-inner { gap: .75rem; }
 

src/views/shell.ejs

@@ -198 +198 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=52">
+<link rel="stylesheet" href="/assets/css/style.css?v=53">
 
 <!-- Audio player styles: loaded on every page so the mini-player works