From cabe24377ab87c3a3e0492d7d44e36e833dba260 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Tue, 8 Jun 2021 02:05:14 +0200
Subject: [PATCH] making image-set work in webkit is a bad experience

---
 style.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index 59ce422..d547bd4 100644
--- a/style.css
+++ b/style.css
@@ -11,15 +11,33 @@ body {
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
-  --bg-image:
-    image-set(url(media/bg.png)    1x,
-              url(media/bg_2x.png) 2x);
   --size: 1.75rem;
   --weight: 600;
 
   background:
-    var(--bg-image) top center fixed,
-    var(--gradient) fixed;
+    -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;
   background-blend-mode: overlay;
 
   font-family: 'Muller';
@@ -241,9 +259,31 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
           hsl(195deg, 60%, 44%),
           hsl(155deg, 60%, 55%)
         );
-    --bg-image:
+
+    background:
+      -webkit-image-set(url(media/bg_dim.png)    1x,
+                        url(media/bg_2x_dim.png) 2x)
+        top center fixed,
+      linear-gradient(135deg,
+          hsl(42deg,  56%, 55%),
+          hsl(348deg, 56%, 55%),
+          hsl(334deg, 60%, 43%),
+          hsl(234deg, 60%, 40%),
+          hsl(195deg, 60%, 44%),
+          hsl(155deg, 60%, 55%)
+        ) fixed;
+    background:
       image-set(url(media/bg_dim.png)    1x,
-                url(media/bg_2x_dim.png) 2x);
+                url(media/bg_2x_dim.png) 2x)
+        top center fixed,
+      linear-gradient(135deg,
+          hsl(42deg,  56%, 55%),
+          hsl(348deg, 56%, 55%),
+          hsl(334deg, 60%, 43%),
+          hsl(234deg, 60%, 40%),
+          hsl(195deg, 60%, 44%),
+          hsl(155deg, 60%, 55%)
+        ) fixed;
   }
 
   main {