Changeset c2a9522 in Klonkt for src/assets/css/style.css

Timestamp:

06/17/2026 01:03:25 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3068cc0

Parents:

d8693e4

Message:

User-menu dropdown frosted blur now works: masthead backdrop-filter removed

Root cause: the masthead (ancestor) had backdrop-filter:blur(12px), which
blocks the backdrop-filter of child elements below it (an element cannot
blur the page if an ancestor already has a backdrop-filter). The masthead
is nearly opaque anyway → backdrop-filter removed, bg set to 94%. Dropdown
now blur(34px)/60%. CSS cache-buster v5.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -310 +310 @@
     border-bottom: 1px solid var(--rule);
     padding: calc(1rem + var(--safe-top)) 0 1rem;
-    background: color-mix(in srgb, var(--paper) 88%, transparent);
-    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+    /* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
+       frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
+       dekkend, dus solide bg i.p.v. blur. */
+    background: color-mix(in srgb, var(--paper) 94%, transparent);
     position: sticky; top: 0; z-index: 20;
 }