From 287077d9a988062b67fd66f24b1532764b7a6443 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 9 Mar 2023 15:41:41 +0100
Subject: [PATCH] new color scheme

---
 assets/scss/home.scss             |  2 +-
 assets/scss/partials/sidebar.scss | 24 +++++-------
 assets/scss/variables.scss        | 62 ++++++++++++++++++++-----------
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 26ae49d..51abe43 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -19,7 +19,7 @@
     font-family: "playfair";
     font-size: 2rem;
     height: 100vh;
-    color: var(--text-2);
+    color: var(--text-accent);
     h1 {
         letter-spacing: 0.5rem;
         font-size: 7rem;
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 2261789..2d62fc2 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -3,7 +3,7 @@
 // -----------
 
 #sidebar {
-	background: var(--sidebar-background-10);
+	background: var(--sidebar-background);
 	display: flex;
 	flex-direction: column;
 	gap: 1em;
@@ -15,7 +15,7 @@
 	z-index: 2;
 	margin: 0.5rem 0;
 	border-radius: 0 2rem 2rem 0;
-	border: 1px solid var(--sidebar-background-05);
+	border: 1px solid var(--sidebar-border);
 	border-left: 0;
 	header {
 		text-align: center;
@@ -55,7 +55,7 @@
 				line-height: 4rem;
 			}
 			&::after {
-				background-color: var(--sidebar-background-20);
+				background-color: var(--sidebar-accent);
 				bottom: 0;
 				content: "";
 				height: 100%;
@@ -69,9 +69,12 @@
 				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
 			}
 			&.active {
-				background-color: var(--sidebar-background-20);
+				background-color: var(--sidebar-accent);
 				&:hover {
-					background-color: var(--sidebar-background-30);
+					background-color: var(--sidebar-accented);
+				}
+				&:active {
+					background-color: var(--sidebar-accentest);
 				}
 			}
 			&:hover {
@@ -82,7 +85,7 @@
 			}
 			&:active {
 				&::after {
-					background-color: var(--sidebar-background-30);
+					background-color: var(--sidebar-accented);
 				}
 			}
 		}
@@ -134,15 +137,6 @@
 				padding: 1em;
 				margin: -1em;
 				pointer-events: all;
-				/*&::after {
-					content: attr(data-page-lang);
-					position: absolute;
-					left: -4px;
-					font-size: 0.6em;
-					line-height: 1.5em;
-					bottom: 0;
-					text-transform: uppercase;
-				}*/
 			}
 			#languages {
 				background-color: var(--background);
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 226330c..b034045 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -1,16 +1,32 @@
 :root {
-	--background: hsl(210, 21%, 15%);
-	--border: hsl(210, 21%, 20%);
-	
-	--text: hsl(210, 21%, 95%);
-	--text-2: hsl(210, 21%, 80%);
-	--text-secondary: hsl(210, 21%, 40%);
-	
-	--sidebar-background-05: hsl(210, 21%, 5%);
-	--sidebar-background-10: hsl(210, 21%, 10%);
-	--sidebar-background-20: hsl(210, 21%, 20%);
-	--sidebar-background-30: hsl(210, 21%, 30%);
+	@for $i from 1 to 20 {
+		$counter: $i * 50;
+		$saturation: 20% + $i * 2.5%;
+		$lightness: $i * 5%;
+		--primary-dark-#{$counter}: hsl(275, #{$saturation}, #{$lightness});
+	}
 
+	@for $i from 1 to 20 {
+		$counter: $i * 50;
+		$saturation: 20% + $i * 2.5%;
+		$lightness: $i * 5%;
+		--primary-light-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
+	}
+
+	--background: var(--primary-dark-150);
+	--border: var(--primary-dark-200);
+	
+	--text: var(--primary-light-950);
+	--text-accent: var(--primary-light-900);
+	--text-accented: var(--primary-light-850);
+	--text-accentest: var(--primary-light-800);
+
+	--sidebar-background: var(--primary-dark-100);
+	--sidebar-border: var(--primary-dark-150);
+	--sidebar-accent: var(--primary-dark-150);
+	--sidebar-accented: var(--primary-dark-200);
+	--sidebar-accentest: var(--primary-dark-350);
+	
 	--vriish-rose: hsl(0, 100%, 75%);
 	--orange: hsl(25, 100%, 75%);
 	--gold: hsl(50, 100%, 75%);
@@ -19,21 +35,25 @@
 	--purpur: hsl(275, 100%, 75%);
 	--white: hsl(360, 100%, 100%);
 
-	--vriish-gradient: linear-gradient(30deg, var(--orange) -100%, var(--vriish-rose) 100%);
+	--vriish-gradient: linear-gradient(55deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
 	--vriish-gradient-shadow: 2px 2px 10px var(--background);
 }
 @media (prefers-color-scheme: light) {
 	:root {
-		--background: hsl(0, 100%, 95%);
-		--border: hsl(0, 100%, 90%);
+		--background: var(--primary-light-850);
+		--border: var(--primary-dark-800);
 
-		--text: hsl(0, 20%, 20%);
-		--text-2: hsl(0, 20%, 30%);
-		--text-secondary: hsl(0, 20%, 70%);
+		--text: var(--primary-dark-50);
+		--text-accent: var(--primary-dark-100);
+		--text-accented: var(--primary-dark-150);
+		--text-accentest: var(--primary-dark-200);
 
-		--sidebar-background-05: hsla(0, 50%, 95%);
-		--sidebar-background-10: hsla(0, 50%, 90%);
-		--sidebar-background-20: hsla(0, 50%, 80%);
-		--sidebar-background-30: hsla(0, 50%, 70%);
+		--sidebar-background: var(--primary-light-900);
+		--sidebar-border: var(--primary-light-850);
+		--sidebar-accent: var(--primary-light-850);
+		--sidebar-accented: var(--primary-light-800);
+		--sidebar-accentest: var(--primary-light-750);
+
+		--vriish-gradient: linear-gradient(55deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
 	}
 }
\ No newline at end of file