content, css: generateWallpaperStyleTag: --box-opacity & friends

2 files changed, 46 insertions, 2 deletions

diff --git a/src/content/dependencies/generateWallpaperStyleTag.js b/src/content/dependencies/generateWallpaperStyleTag.js
index b89f01c2..200fd45a 100644
--- a/src/content/dependencies/generateWallpaperStyleTag.js
+++ b/src/content/dependencies/generateWallpaperStyleTag.js
@@ -1,5 +1,12 @@
 import {empty, stitchArrays} from '#sugar';
 
+function findCSSProperty(property, properties) {
+  if (!properties) return null;
+  const regexp = new RegExp(String.raw`(?<=(?:^|;)\s*${property}: ).*?(?=;)`, 'ms' /* mad scrath */);
+  const match = properties.match(regexp);
+  return match?.[0] ?? null;
+}
+
 export default {
   relations: (relation) => ({
     styleTag:
@@ -7,6 +14,10 @@ export default {
   }),
 
   slots: {
+    wallpaperBrightness: {
+      validate: v => v.isNumber,
+    },
+
     singleWallpaperPath: {
       validate: v => v.strictArrayOf(v.isString),
     },
@@ -32,8 +43,16 @@ export default {
 
     attributes.add('class', 'wallpaper-style');
 
+    let brightness = slots.wallpaperBrightness;
+
+    const brightnessFrom = properties => {
+      const opacity = findCSSProperty('opacity', properties);
+      return Number(opacity) || null;
+    };
+
     if (empty(slots.wallpaperPartPaths)) {
       attributes.set('data-wallpaper-mode', 'one');
+      brightness ||= brightnessFrom(slots.singleWallpaperStyle);
 
       rules.push({
         select: 'body::before',
@@ -45,6 +64,7 @@ export default {
     } else {
       attributes.set('data-wallpaper-mode', 'parts');
       attributes.set('data-num-wallpaper-parts', slots.wallpaperPartPaths.length);
+      brightness ||= brightnessFrom(slots.wallpaperPartStyles[0]);
 
       stitchArrays({
         path: slots.wallpaperPartPaths,
@@ -67,6 +87,15 @@ export default {
       });
     }
 
+    if (brightness) {
+      rules.push({
+        select: ':root',
+        declare: [
+          `--wallpaper-brightness: ${brightness};`,
+        ],
+      });
+    }
+
     relations.styleTag.setSlots({
       attributes,
       rules,
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 73b732d8..ff386847 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -254,6 +254,10 @@ body::before, .wallpaper-part {
 
 :root {
   color-scheme: dark;
+
+  --initial-wallpaper-opacity: 0.5;
+  --wallpaper-brightness: var(--initial-wallpaper-opacity);
+  --box-opacity: calc(0.6 + 0.3 * (clamp(0.75, var(--wallpaper-brightness), 0.95) - 0.75) / (0.95 - 0.75));
 }
 
 body {
@@ -270,11 +274,22 @@ body::before {
 body::before, .wallpaper-part {
   background-position: center;
   background-size: cover;
-  opacity: 0.5;
+  opacity: var(--initial-wallpaper-opacity);
 }
 
 #page-container {
   background-color: var(--bg-color, rgba(35, 35, 35, 0.8));
+
+  --adjust-page-opacity: calc(alpha * (1.0 + 0.6 * (var(--box-opacity, 0.6) - 0.6)));
+
+  background-color:
+    color-mix(in hsl,
+      rgb(from var(--bg-color, rgba(35, 35, 35, 0.8))
+        r g b / var(--adjust-page-opacity)),
+      rgb(from var(--bg-color, rgba(35, 35, 35, 0.8))
+        0 0 0 / var(--adjust-page-opacity))
+      calc((var(--box-opacity, 0.6) - 0.6) * 40%));
+
   color: #ffffff;
   border-bottom: 2px solid #fff1;
   box-shadow:
@@ -334,7 +349,7 @@ body::before, .wallpaper-part {
 #secondary-nav,
 #skippers,
 #footer {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, var(--box-opacity, 0.6));
   border: 1px dotted var(--primary-color);
   border-radius: 3px;
   transition: background-color 0.2s;