From 5a8802f8f2e2aee52233c382be0172cc32f2f3f4 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 19 Apr 2024 21:28:40 +0200
Subject: [PATCH] feat: Various style improvements

---
 .../static/fellchensammlung/css/styles.css    | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index cd67231..66bc0fa 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -1,10 +1,19 @@
 :root {
-    --background-one: #5daa68;
-    --background-two: #203f24;
-    --background-three: #faf1cf;
-    --highlight-one: #5daa68;
-    --text-one: #faf1cf;
-    --text-three: var(--background-two);
+    --primary-light-one: #5daa68;
+    --primary-light-two: #4a9455;
+    --primary-dark-one: #203f24;
+    --secondary-light-one: #faf1cf;
+    --background-one: var(--primary-light-one);
+    --background-two: var(--primary-light-two);
+    --background-three: var(--secondary-light-one);
+    --background-four: var(--primary-dark-one);
+    --highlight-one: var(--primary-dark-one);
+    --highlight-one-text: var(--secondary-light-one);
+    --text-one: var(--secondary-light-one);
+    --shadow-one: var(--primary-dark-one);
+    --text-two: var(--primary-dark-one);
+    --text-three: var(--primary-light-one);
+    --shadow-three: var(--primary-dark-one);
 }
 
 html, body {
@@ -14,8 +23,10 @@ html, body {
 
 body {
     background: var(--background-one);
+    color: var(--text-two);
 }
 
+
 .content-box {
     margin: 20px;
 }
@@ -50,6 +61,8 @@ th {
 h1 {
     padding-top: 10px;
     word-wrap: break-word;
+    color: var(--text-one);
+    text-shadow: 2px 2px var(--shadow-one);
 }
 
 * {
@@ -59,9 +72,11 @@ h1 {
 .header {
     overflow: hidden;
     background-color: var(--background-two);
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
 }
 
-.header a, .sidebar-nav a {
+.header a {
     color: var(--text-one);
     text-align: center;
     text-decoration: none;
@@ -76,7 +91,7 @@ h1 {
 
 .header a:hover {
     background-color: var(--highlight-one);
-    color: black;
+    color: var(--highlight-one-text);
 }
 
 .header a.active {
@@ -90,7 +105,7 @@ h1 {
     border: none;
     border-radius: 4px;
     opacity: 1;
-    background-color: #4ba3cd;
+    background-color: var(--secondary-light-one);
 }
 
 .header-right select.option {
@@ -340,7 +355,12 @@ h1 {
     border-radius: 3%;
     padding: 5px;
     background: var(--background-three);
+    color: var(--text-two);
+}
+
+.card-adoption-notice h1 {
     color: var(--text-three);
+    text-shadow: 2px 2px var(--shadow-three);
 }
 
 .card-adoption-notice img {