improve gradient

dist/index.css

@@ -38,8 +38,8 @@ main {
   background-image: radial-gradient(var(--color-1), var(--color-2));
 }
 #background-wrapper #grass-1 {
-  --color-1: hsl(120, 50%, 50%);
+  --color-1: hsl(150, 100%, 30%);
-  --color-2: hsl(120, 50%, 40%);
+  --color-2: hsl(150, 100%, 25%);
   background-image:
     linear-gradient(
       350deg,
@@ -52,25 +52,10 @@ main {
   --color-2: hsl(110, 100%, 35%);
   background-image:
     linear-gradient(
-      4deg,
+      9deg,
       var(--color-1),
-      var(--color-2) 25%,
+      var(--color-2) 30%,
-      transparent 30%);
+      transparent 35%);
-}
-#background-wrapper #sun {
-  top: -20%;
-  left: -200%;
-  right: -100%;
-  bottom: -50%;
-  --color-1: hsl(23, 100%, 50%);
-  --color-2: hsl(36.5, 100%, 50%);
-  --color-3: hsl(44.9, 100%, 50%);
-  background-image:
-    radial-gradient(
-      var(--color-1),
-      var(--color-2) 10%,
-      var(--color-3) 20%,
-      transparent 40%);
 }
 @media (prefers-color-scheme: dark) {
   #background-wrapper {
@@ -88,11 +73,6 @@ main {
     --color-1: hsl(110, 60%, 30%);
     --color-2: hsl(110, 50%, 24%);
   }
-  #background-wrapper #sun {
-    --color-1: hsl(9, 100%, 50%);
-    --color-2: hsl(36.5, 100%, 40%);
-    --color-3: hsl(44.9, 100%, 30%);
-  }
 }
 
 /* src/colors.css */

dist/index.js

@@ -2091,7 +2091,7 @@
     );
   });
   document.body.append(
-    /* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "sun" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))
+    /* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))
   );
   document.querySelector("main").append(
     HomePage(settingsViewModel, connectionViewModel, chatListViewModel),

src/base.css

@@ -53,8 +53,8 @@ main {
 }
 
 #background-wrapper #grass-1 {
-  --color-1: hsl(120, 50%, 50%);
+  --color-1: hsl(150, 100%, 30%);
-  --color-2: hsl(120, 50%, 40%);
+  --color-2: hsl(150, 100%, 25%);
 
   background-image: linear-gradient(
     350deg,
@@ -69,28 +69,10 @@ main {
   --color-2: hsl(110, 100%, 35%);
 
   background-image: linear-gradient(
-    4deg,
+    9deg,
     var(--color-1),
-    var(--color-2) 25%,
+    var(--color-2) 30%,
-    transparent 30%
+    transparent 35%
-  );
-}
-
-#background-wrapper #sun {
-  top: -20%;
-  left: -200%;
-  right: -100%;
-  bottom: -50%;
-
-  --color-1: hsl(23, 100%, 50%);
-  --color-2: hsl(36.5, 100%, 50%);
-  --color-3: hsl(44.9, 100%, 50%);
-
-  background-image: radial-gradient(
-    var(--color-1),
-    var(--color-2) 10%,
-    var(--color-3) 20%,
-    transparent 40%
   );
 }
 
@@ -113,10 +95,4 @@ main {
     --color-1: hsl(110, 60%, 30%);
     --color-2: hsl(110, 50%, 24%);
   }
-
-  #background-wrapper #sun {
-    --color-1: hsl(9, 100%, 50%);
-    --color-2: hsl(36.5, 100%, 40%);
-    --color-3: hsl(44.9, 100%, 30%);
-  }
 }

src/index.tsx

@@ -46,7 +46,6 @@ chatListViewModel.selectedChat.subscribe(() => {
 document.body.append(
   <div id="background-wrapper">
     <div id="sky"></div>
-    <div id="sun"></div>
     <div id="grass-1"></div>
     <div id="grass-2"></div>
   </div>