Changeset c2a9522 in Klonkt for src

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@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/topnav.ejs (modified) (1 diff)
• views/shell.ejs (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;
 }

src/views/partials/topnav.ejs

@@ -364 +364 @@
   min-width: 220px;
   padding: .35rem;
-  /* Frosted glass: bewust transparanter (was 92%) zodat de blur écht doorkomt. */
-  background: color-mix(in srgb, var(--paper) 66%, transparent);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  /* Frosted glass: transparant + zware blur zodat het frosted effect duidelijk is. */
+  background: color-mix(in srgb, var(--paper) 60%, transparent);
+  backdrop-filter: blur(34px) saturate(190%);
+  -webkit-backdrop-filter: blur(34px) saturate(190%);
   border: 1px solid var(--rule);
   border-radius: 12px;

src/views/shell.ejs

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