From ccc21cbc75fcd561e674f45e942f3a892a9b16ed Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 27 Jan 2025 19:36:11 -0500
Subject: [PATCH] code refactoring add colors as variables relocate dark mode
 media query to take priority if dark mode is selected

---
 style/style.css | 73 ++++++++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/style/style.css b/style/style.css
index 35f8ce5..137f95e 100644
--- a/style/style.css
+++ b/style/style.css
@@ -18,6 +18,18 @@
 	--link-visited: #8A2BE2;
 	--link-color: #4B0082;
 	--border-color: #DB7093;
+	--bi-pride-pink-light: #D60270;
+	--bi-pride-purple-light: #9B4F96;
+	--bi-pride-blue-light: #0038A8;
+	--disability-pride-black-light: #595959;
+	--disability-pride-red-light: #CF7280;
+	--disability-pride-yellow-light: #EEDE77;
+	--disability-pride-white-light: #E8E8E8;
+	--disability-pride-blue-light: #7BC2E0;
+	--disability-pride-green-light: #3BB07D;
+	--trans-pride-blue-light: #5BCEFA;
+	--trans-pride-pink-light: #F5A9B8;
+	--trans-pride-white-light: #FFFFFF;
 
 }
 
@@ -46,34 +58,6 @@ body {
 	color: var(--text-color);
 }
 
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--background-color: #29274c;
-		--body-background-color: #0d0c1d;
-		--text-color: #f1dac4;
-		--scroll-bar: #474973;
-		--scroll-gutter: #a69cac;
-		--link-color: #4cc9f0;
-		--link-hover: #f72585;
-		--link-visited: #4cc9f0;
-		--border-color: #474973;
-	}
-
-	body {
-		background-color: var(--body-background-color);
-		background-image: url("../img/site/assets/stardust.png");
-	}
-
-	.status .statuslol_content p {
-		color: var(--text-color);
-	}
-
-	.status .statuslol_content .statuslol_time a {
-		color: var(--link-color) !important;
-	}
-}
-
 h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
 	margin: 0.5rem;
 }
@@ -109,7 +93,7 @@ header {
 	border-bottom: 10px solid;
 	border-image-slice: 1;
 	border-width: 5px;
-	border-image-source: linear-gradient(to right, #D60270 0 33%, #9B4F96 33% 66%, #0038A8 66%);
+	border-image-source: linear-gradient(to right, var(--bi-pride-pink-light) 0 33%, var(--bi-pride-purple-light) 33% 66%, var(--bi-pride-blue-light) 66%);
 	font-size: 1.4rem;
 	margin-top: 0.43rem;
 }
@@ -125,7 +109,7 @@ footer {
 	border-top: 10px solid;
 	border-image-slice: 1;
 	border-width: 5px;
-	border-image-source: linear-gradient(to right, #595959 0 35%, #CF7280 35% 41%, #EEDE77 41% 47%, #E8E8E8 47% 53%, #7BC2E0 53% 59%, #3BB07D 59% 65%, #595959 65% 71%);
+	border-image-source: linear-gradient(to right, var(--disability-pride-black-light) 0 35%, var(--disability-pride-red-light) 35% 41%, var(--disability-pride-yellow-light) 41% 47%, var(--disability-pride-white-light) 47% 53%, var(--disability-pride-blue-light) 53% 59%, var(--disability-pride-green-light) 59% 65%, var(--disability-pride-black-light) 65% 71%);
 	font-family: system-ui;
 	font-size: 1.3rem;
 	letter-spacing: 0.05rem;
@@ -152,7 +136,34 @@ nav {
 	border-right: 10px solid;
 	border-image-slice: 1;
 	border-width: 5px;
-	border-image-source: linear-gradient(to bottom, #5BCEFA 0 20%, #F5A9B8 20% 40%, #FFFFFF 40% 60%, #F5A9B8 60% 80%, #5BCEFA 80%);
+	border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-light) 0 20%, var(--trans-pride-pink-light) 20% 40%, var(--trans-pride-white-light) 40% 60%, var(--trans-pride-pink-light) 60% 80%, var(--trans-pride-blue-light) 80%);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-color: #29274c;
+		--body-background-color: #0d0c1d;
+		--text-color: #f1dac4;
+		--scroll-bar: #474973;
+		--scroll-gutter: #a69cac;
+		--link-color: #4cc9f0;
+		--link-hover: #f72585;
+		--link-visited: #4cc9f0;
+		--border-color: #474973;
+	}
+
+	body {
+		background-color: var(--body-background-color);
+		background-image: url("../img/site/assets/stardust.png");
+	}
+
+	.status .statuslol_content p {
+		color: var(--text-color);
+	}
+
+	.status .statuslol_content .statuslol_time a {
+		color: var(--link-color) !important;
+	}
 }
 
 section {