From a273c8de4bb56a177d33b2185ef0518916c5a8eb Mon Sep 17 00:00:00 2001
From: Max Nuding <max.nuding@icloud.com>
Date: Thu, 6 Apr 2023 18:25:35 +0200
Subject: [PATCH] Improve color palette

---
 src/lib/components/FooterComponent.svelte   |  4 +-
 src/lib/components/LoadMoreComponent.svelte | 19 ++++--
 static/style.css                            | 64 +++++++++++++++------
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/FooterComponent.svelte b/src/lib/components/FooterComponent.svelte
index d39d5c2..9247577 100644
--- a/src/lib/components/FooterComponent.svelte
+++ b/src/lib/components/FooterComponent.svelte
@@ -34,7 +34,7 @@
     gap: 10px;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    background-color: #bbbbcd73;
+    background-color: var(--color-grey-translucent);
     padding: 0.3em 1em;
     margin: 0 -8px;
     border-radius: 3px;
@@ -50,7 +50,7 @@
       filter: invert();
     }
     .footer {
-      background-color: #6364FF88;
+      background-color: var(--color-grey-translucent);
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/LoadMoreComponent.svelte b/src/lib/components/LoadMoreComponent.svelte
index c87c012..3fd386a 100644
--- a/src/lib/components/LoadMoreComponent.svelte
+++ b/src/lib/components/LoadMoreComponent.svelte
@@ -31,16 +31,27 @@
     padding: 0.75em;
     border-radius: 3px;
     border: none;
-    background-color: var(--color-link);
-    color: white;
+    background-color: var(--color-button);
+    color: var(--color-button-text);
     cursor: grab;
     transition: all 0.2s ease-in-out;
   }
+
   button:hover:not(:disabled) {
-    background-color: var(--color-link-visited);
+    background-color: var(--color-button-hover);
   }
+
+  button:hover:not(:disabled):not(:active) {
+    box-shadow: 4px 4px 3px 0 var(--color-button-shadow);
+    translate: -2px -2px;
+  }
+
   button:disabled {
     cursor: not-allowed;
-    background-color: grey;
+    background-color: var(--color-button-deactivated);
+  }
+
+  button:not(:disabled) {
+    box-shadow: 2px 2px 1px 0 var(--color-button-shadow);
   }
 </style>
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 6e84b17..2eabfe1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,30 +1,56 @@
 body {
-    --color-text: #2F0C7A;
-    --color-bg: white;
-    --color-border: #17063B;
-    --color-link: #563ACC;
-    --color-link-visited: #858AFA;
+  --color-blue: hsl(259, 82%, 26%);
+  --color-blue-dark: hsl(259, 82%, 10%);
+  --color-lavender: hsl(273, 43%, 65%);
+  --color-mauve: hsl(286, 73%, 81%);
 
-    color: var(--color-text);
-    background-color: var(--color-bg);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, 
-    Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, 
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --color-grey: hsl(44, 7%, 41%);
+  --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
+  --color-grey-light: hsl(42, 7%, 72%);
+
+  --color-red: hsl(7, 100%, 56%);
+  --color-red-light: hsl(7, 100%, 61%);
+  --color-red-desat: hsl(7, 20%, 56%);
+  --color-red-desat-dark: hsl(7, 20%, 30%);
+  --color-red-desat-desat: hsl(7, 8%, 56%);
+
+
+  --color-text: var(--color-blue);
+  --color-border: var(--color-grey);
+  --color-link: var(--color-mauve);
+  --color-link-visited: var(--color-lavender);
+  --color-bg: var(--color-grey-light);
+  --color-button: var(--color-red-light);
+  --color-button-shadow: var(--color-red-desat-dark);
+  --color-button-hover: var(--color-red);
+  --color-button-deactivated: var(--color-red-desat-desat);
+  --color-button-text: var(--color-blue-dark);
+
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
+  Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 a {
-    color: var(--color-link);
+  color: var(--color-link);
 }
 a:visited {
-    color: var(--color-link-visited);
+  color: var(--color-link-visited);
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
-        --color-text: white;
-        --color-bg: #17063B;
-        --color-border: white;
-        --color-link: #8A9BF0;
-        --color-link-visited: #C384FB;
-    }
+  body {
+    --color-text: var(--color-grey-light);
+    --color-border: var(--color-grey-light);
+    --color-link: var(--color-mauve);
+    --color-link-visited: var(--color-lavender);
+    --color-bg: var(--color-blue);
+    --color-button: var(--color-red-light);
+    --color-button-shadow: var(--color-red-desat);
+    --color-button-hover: var(--color-red);
+    --color-button-deactivated: var(--color-red-desat-desat);
+    --color-button-text: var(--color-blue-dark);
+  }
 }
\ No newline at end of file