From 45bc1a60b64fc69d1625e505c80aceefb66dc694 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Thu, 28 Dec 2023 13:10:33 +0100
Subject: [PATCH] gradients

---
 base.css | 67 +++++++++++++++++++++++---------------------------------
 1 file changed, 27 insertions(+), 40 deletions(-)

diff --git a/base.css b/base.css
index 30f86e5..97aaccb 100644
--- a/base.css
+++ b/base.css
@@ -2,6 +2,7 @@
 @import url(fonts/noto/noto.css);
 
 :root {
+  /*
   --gradient:
     linear-gradient(135deg,
         hsl(42deg,  92%,  70%),
@@ -11,47 +12,26 @@
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
+  */
+
+  --gradient:
+    linear-gradient(135deg,
+        oklch(93% 0.16 86),
+        oklch(84% 0.17 15),
+        oklch(78% 0.18 304),
+        oklch(78% 0.18 233),
+        oklch(78% 0.18 162)
+      );
   --size: 15pt;
   --weight: 600;
   --link-color: hsl(196deg, 100%, 85%);
   --hover-color: hsl(50deg, 100%, 82%);
 
-  /* for seamonkey ☺ */
-  background:
-    url(media/bg.png)
-      top center fixed,
-    linear-gradient(135deg,
-        hsl(42deg,  92%,  70%),
-        hsl(348deg, 92%,  70%),
-        hsl(334deg, 100%, 80%),
-        hsl(234deg, 100%, 76%),
-        hsl(195deg, 100%, 67%),
-        hsl(155deg, 70%,  62%)
-      ) fixed;
-  background:
-    -webkit-image-set(url(media/bg.png)    1x,
-                      url(media/bg_2x.png) 2x)
-      top center fixed,
-    linear-gradient(135deg,
-        hsl(42deg,  92%,  70%),
-        hsl(348deg, 92%,  70%),
-        hsl(334deg, 100%, 80%),
-        hsl(234deg, 100%, 76%),
-        hsl(195deg, 100%, 67%),
-        hsl(155deg, 70%,  62%)
-      ) fixed;
   background:
     image-set(url(media/bg.png)    1x,
               url(media/bg_2x.png) 2x)
       top center fixed,
-    linear-gradient(135deg,
-        hsl(42deg,  92%,  70%),
-        hsl(348deg, 92%,  70%),
-        hsl(334deg, 100%, 80%),
-        hsl(234deg, 100%, 76%),
-        hsl(195deg, 100%, 67%),
-        hsl(155deg, 70%,  62%)
-      ) fixed;
+    var(--gradient) fixed;
   background-blend-mode: overlay;
 
   font-family: 'Muller';
@@ -69,7 +49,8 @@
 }
 
 main {
-  background: hsla(316deg, 100%, 95%, 45%);
+  --default-bg: hsla(316deg, 100%, 95%, 45%);
+  background: var(--default-bg);
   border-radius: 2em;
   --glow-col: hsla(318deg, 100%, 98%, 100%);
   border: 1px solid var(--glow-col);
@@ -180,9 +161,9 @@ rt::after  { margin-right: -1.25em; }
 }
 
 
-/* ~the "not actually supported by browsers yet" zone~ */
 @media (prefers-contrast: high), (prefers-color-scheme: dark) {
   :root {
+    /*
     --gradient:
       linear-gradient(135deg,
           hsl(42deg,  56%, 55%),
@@ -192,21 +173,27 @@ rt::after  { margin-right: -1.25em; }
           hsl(195deg, 60%, 44%),
           hsl(155deg, 60%, 55%)
         );
+    */
+
+    --gradient:
+      linear-gradient(135deg,
+          /* oklch(33% 0.16 86), */
+          oklch(30% 0.17 15),
+          oklch(30% 0.18 304),
+          oklch(30% 0.18 233),
+          oklch(30% 0.18 162)
+        );
 
-    background:
-      -webkit-image-set(url(media/bg_dim.png)    1x,
-                        url(media/bg_2x_dim.png) 2x)
-        top center fixed,
-      var(--gradient) fixed;
     background:
       image-set(url(media/bg_dim.png)    1x,
                 url(media/bg_2x_dim.png) 2x)
         top center fixed,
       var(--gradient) fixed;
+    background-blend-mode: multiply;
   }
 
   main {
-    background: hsla(0, 0%, 0%, 60%);
+    --default-bg: hsla(0, 0%, 0%, 60%);
     --glow-col: hsla(0, 0%, 0%, 60%);
   }