From bc7ea05fe3cee7f92fe4e87298e2da29b39e4019 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Fri, 17 Apr 2026 17:12:29 +0200
Subject: [PATCH] chore: blur theme improvements

---
 src/common/loader.js                          |  2 ++
 .../blur/artwork-controller/element.css       |  5 +--
 .../blur/artwork-controller/facet/index.html  |  6 ++++
 src/themes/blur/facet/index.css               | 11 +++++++
 src/themes/blur/facet/index.html              |  8 ++---
 src/themes/blur/facet/index.inline.js         | 31 +++++++++++++++++--
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/common/loader.js b/src/common/loader.js
index 3700dd19..2660555e 100644
--- a/src/common/loader.js
+++ b/src/common/loader.js
@@ -161,6 +161,8 @@ export async function ensureHTML(item) {
  * @param {{ context?: Error; throw?: boolean }} [options]
  */
 export function renderError(container, error, options) {
+  document.querySelector("#diffuse-loader")?.classList.add("loaded");
+  container.classList.add("has-loaded");
   container.innerHTML = `
     <div class="diffuse">
       <a href="./" class="flex" style="color: inherit; text-decoration: none;">
diff --git a/src/themes/blur/artwork-controller/element.css b/src/themes/blur/artwork-controller/element.css
index 22c2e741..e5621696 100644
--- a/src/themes/blur/artwork-controller/element.css
+++ b/src/themes/blur/artwork-controller/element.css
@@ -2,7 +2,8 @@
   --transition-durition: 750ms;
   container-type: inline-size;
   display: block;
-  font-size: var(--fs-sm);
+  font-size: var(--fs-xs);
+  font-size: calc((var(--fs-xs) + var(--fs-sm)) / 2);
 }
 
 main {
@@ -52,7 +53,7 @@ main {
   letter-spacing: var(--tracking-wide);
   line-height: 0.75;
   padding: calc(var(--space-2xs) * 0.8) calc(var(--space-2xs) * 0.65);
-  padding-bottom: calc(var(--space-2xs) * 0.575);
+  padding-bottom: calc(var(--space-2xs) * 0.675);
   position: absolute;
   text-box: trim-both cap alphabetic;
   text-transform: uppercase;
diff --git a/src/themes/blur/artwork-controller/facet/index.html b/src/themes/blur/artwork-controller/facet/index.html
index 390c11e5..577755a8 100644
--- a/src/themes/blur/artwork-controller/facet/index.html
+++ b/src/themes/blur/artwork-controller/facet/index.html
@@ -9,6 +9,12 @@
     font-feature-settings: normal;
     font-optical-sizing: auto;
   }
+
+  @media (min-width: 70em) {
+    db-artwork-controller {
+      font-size: var(--fs-sm);
+    }
+  }
 </style>
 
 <script type="module" src="themes/blur/artwork-controller/facet/index.inline.js"></script>
diff --git a/src/themes/blur/facet/index.css b/src/themes/blur/facet/index.css
index 6058d5a5..bd3ce661 100644
--- a/src/themes/blur/facet/index.css
+++ b/src/themes/blur/facet/index.css
@@ -37,6 +37,17 @@ body {
   mix-blend-mode: normal;
 }
 
+#bg-overlay::after {
+  background: linear-gradient(#0000, rgba(0, 0, 0, 0.175));
+  bottom: 0;
+  content: "";
+  height: 16rem;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}
+
 /***********************************
  * Main
  ***********************************/
diff --git a/src/themes/blur/facet/index.html b/src/themes/blur/facet/index.html
index b69514e8..e1eab21f 100644
--- a/src/themes/blur/facet/index.html
+++ b/src/themes/blur/facet/index.html
@@ -63,6 +63,10 @@
           <input type="url" id="bg-url-input" placeholder="https://..." />
           <button id="bg-url-apply"><i class="ph-bold ph-arrow-right"></i></button>
         </div>
+        <button class="bg-mix-btn" id="bg-mix-btn">
+          <i class="ph-bold ph-intersect"></i>
+          Mix image with background color
+        </button>
       </section>
 
       <section class="settings-section">
@@ -76,10 +80,6 @@
             <span>None</span>
           </button>
         </div>
-        <button class="bg-mix-btn" id="bg-mix-btn">
-          <i class="ph-bold ph-intersect"></i>
-          Mix image with color
-        </button>
       </section>
     </div>
   </div>
diff --git a/src/themes/blur/facet/index.inline.js b/src/themes/blur/facet/index.inline.js
index e565d5a9..c9f0cacb 100644
--- a/src/themes/blur/facet/index.inline.js
+++ b/src/themes/blur/facet/index.inline.js
@@ -56,8 +56,8 @@ const storedBg = getSettingValue(BACKGROUND_KEY);
 const storedBgColor = getSettingValue(BACKGROUND_COLOR_KEY);
 const storedBgMix = getSettingValue(BACKGROUND_MIX_KEY);
 
-const activeBg = storedBg ?? "builtin:13";
-const activeMix = storedBgMix !== null ? storedBgMix === "true" : true;
+const activeBg = storedBg ?? "builtin:12";
+const activeMix = storedBgMix !== null ? storedBgMix === "true" : false;
 
 applyBackgroundMix(activeMix);
 if (storedBgColor) applyBackgroundColor(storedBgColor);
@@ -298,6 +298,9 @@ async function applyBackgroundImage(value) {
     });
 
     overlay.style.backgroundImage = `url('${imageUrl.replace(/'/g, "\\'")}')`;
+    overlay.style.backgroundPosition = value.startsWith("builtin:")
+      ? backgroundPositioning(`${value.slice(8)}.jpg`)
+      : "";
 
     await new Promise((resolve) => {
       requestAnimationFrame(() => resolve(undefined));
@@ -307,6 +310,30 @@ async function applyBackgroundImage(value) {
   }
 }
 
+/**
+ * Returns the background-position value for a given image filename.
+ * @param {string} filename
+ * @returns {string}
+ */
+function backgroundPositioning(filename) {
+  switch (filename) {
+    case "2.jpg": return "center 68%";
+    case "3.jpg": return "center 30%";
+    case "4.jpg": return "center 96.125%";
+    case "6.jpg": return "center 40%";
+    case "11.jpg": return "center 67.25%";
+    case "19.jpg": return "center 13%";
+    case "20.jpg": return "center 39.75%";
+    case "21.jpg": return "center 52.5%";
+    case "22.jpg": return "center top";
+    case "23.jpg": return "center 92.5%";
+    case "24.jpg": return "center top";
+    case "25.jpg": return "center 50%";
+    case "27.jpg": return "center top";
+    default: return "center bottom";
+  }
+}
+
 /**
  * Apply a background color value as the page background color.
  * @param {string | null} color  CSS color string, or null/empty to clear
-- 
2.51.2