From b1fbb833422e1e9539a388c6f1b059336b3fcbb5 Mon Sep 17 00:00:00 2001
From: Doloro1978 <doloroo@proton.me>
Date: Tue, 21 Jul 2026 12:59:12 +0100
Subject: [PATCH] fixed a bunch of css

---
 src/lib/StoreButtons.svelte          | 28 ----------------------------
 src/lib/nav.scss                     |  4 ++--
 src/lib/postHelpers.scss             | 10 +++++-----
 src/lib/sidebar/sidebar.scss         |  4 ++--
 src/lib/sidebar/sidebar_right.svelte |  8 ++++----
 src/lib/storeButtons.scss            | 26 ++++++++++++++++++++++++++
 src/routes/store/[slug]/+page.svelte |  1 +
 src/routes/store/[slug]/product.scss |  6 +++---
 src/routes/store/snacks.scss         |  2 +-
 src/routes/store/snacks.svelte       |  1 +
 static/shared__.css                  |  5 +++++
 11 files changed, 50 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/storeButtons.scss

diff --git a/src/lib/StoreButtons.svelte b/src/lib/StoreButtons.svelte
index 12056d3..a3a50b6 100644
--- a/src/lib/StoreButtons.svelte
+++ b/src/lib/StoreButtons.svelte
@@ -13,31 +13,3 @@
 		{/if}
 	</a>
 {/snippet}
-
-<style lang="scss">
-	.StoreButton {
-		display: block;
-		width: 100%;
-		height: 45px;
-		border: 3px outset #1da1f2;
-		background: #1da1f2;
-		padding: 2px;
-		text-align: center;
-
-		img {
-			height: auto;
-			width: 45px;
-		}
-	}
-	.StoreButton:hover {
-		filter: brightness(110%);
-	}
-
-	.StoreButton:active {
-		border-style: inset;
-
-		img {
-			transform: translate(2px, 2px);
-		}
-	}
-</style>
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index f37159a..3665b87 100644
--- a/src/lib/nav.scss
+++ b/src/lib/nav.scss
@@ -11,10 +11,10 @@
 
   a {
     padding: 5px;
-    color: #9f8083;
+    color: var(--accent-1);
   }
 
   a:hover {
-    color: #043b2f;
+    color: var(--thirdly);
   }
 }
diff --git a/src/lib/postHelpers.scss b/src/lib/postHelpers.scss
index aed6cc1..2e104c4 100644
--- a/src/lib/postHelpers.scss
+++ b/src/lib/postHelpers.scss
@@ -64,7 +64,7 @@
 .card {
   --text-color: white;
   position: relative;
-  background: #4f0515;
+  background: var(--accent-3);
   display: flex;
   align-items: start;
   align-content: stretch;
@@ -101,7 +101,7 @@
 .icon_container {
   position: relative;
   width: 100%;
-  background: #555555ff;
+  background: var(--card-muted);
   display: grid;
   align-items: center;
   align-content: stretch;
@@ -167,7 +167,7 @@
   height: 2.5px;
   margin-top: 2px;
   margin-bottom: 2px;
-  background: #000000ff;
+  background: var(--black);
   flex-shrink: 0;
 }
 
@@ -182,7 +182,7 @@
   white-space: pre;
   font-size: 28px;
   text-rendering: geometricPrecision;
-  caret-color: rgba(0, 0, 0, 1);
+  caret-color: var(--black);
   text-decoration: none;
   letter-spacing: 0px;
   font-family: "sourcesanspro";
@@ -201,7 +201,7 @@
   white-space: pre;
   font-size: 18px;
   text-rendering: geometricPrecision;
-  caret-color: rgba(0, 0, 0, 1);
+  caret-color: var(--black);
   text-decoration: none;
   letter-spacing: 0px;
   font-family: "sourcesanspro";
diff --git a/src/lib/sidebar/sidebar.scss b/src/lib/sidebar/sidebar.scss
index a763ef2..516a4fd 100644
--- a/src/lib/sidebar/sidebar.scss
+++ b/src/lib/sidebar/sidebar.scss
@@ -54,8 +54,8 @@
   display: block;
   width: 30px;
   height: 30px;
-  border: 2px outset #1da1f2;
-  background: #1da1f2;
+  border: 2px outset var(--brand-twitter);
+  background: var(--brand-twitter);
   margin: 2px;
 
   img {
diff --git a/src/lib/sidebar/sidebar_right.svelte b/src/lib/sidebar/sidebar_right.svelte
index 3f0b5bd..0a19156 100644
--- a/src/lib/sidebar/sidebar_right.svelte
+++ b/src/lib/sidebar/sidebar_right.svelte
@@ -25,7 +25,7 @@
 			<div class="side-card">
 				<div class="social-button-div">
 					<a
-						style="border-color: #1DA1F2; background: #1DA1F2"
+						style="border-color: var(--brand-twitter); background: var(--brand-twitter)"
 						class="social-button"
 						title="doloro private twitter"
 						href="https:&#x2F;&#x2F;x.com&#x2F;Doloror"
@@ -34,7 +34,7 @@
 					</a>
 
 					<a
-						style="border-color: #ff90e8; background: #ff90e8"
+						style="border-color: var(--brand-gumroad); background: var(--brand-gumroad)"
 						class="social-button"
 						title="gumroad store"
 						href="https:&#x2F;&#x2F;doloro.gumroad.com&#x2F;"
@@ -43,7 +43,7 @@
 					</a>
 
 					<a
-						style="border-color: #000000; background: #000000"
+						style="border-color: var(--black); background: var(--black)"
 						class="social-button"
 						title="steam profile"
 						href="https:&#x2F;&#x2F;steamcommunity.com&#x2F;id&#x2F;Doloro&#x2F;"
@@ -52,7 +52,7 @@
 					</a>
 
 					<a
-						style="border-color: #101010; background: #101010"
+						style="border-color: var(--brand-jinxxy); background: var(--brand-jinxxy)"
 						class="social-button"
 						title="jinxxy"
 						href="https:&#x2F;&#x2F;jinxxy.com&#x2F;doloro"
diff --git a/src/lib/storeButtons.scss b/src/lib/storeButtons.scss
new file mode 100644
index 0000000..7bfc0c9
--- /dev/null
+++ b/src/lib/storeButtons.scss
@@ -0,0 +1,26 @@
+.StoreButton {
+	display: block;
+	width: 100%;
+	height: 45px;
+	border: 3px outset var(--brand-twitter);
+	background: var(--brand-twitter);
+	padding: 2px;
+	text-align: center;
+
+	img {
+		height: 41px;
+		width: auto;
+	}
+
+	&:hover {
+		filter: brightness(110%);
+	}
+
+	&:active {
+		border-style: inset;
+
+		img {
+			transform: translate(2px, 2px);
+		}
+	}
+}
diff --git a/src/routes/store/[slug]/+page.svelte b/src/routes/store/[slug]/+page.svelte
index b8b755b..8d3e112 100644
--- a/src/routes/store/[slug]/+page.svelte
+++ b/src/routes/store/[slug]/+page.svelte
@@ -2,6 +2,7 @@
 	import { snackImage, snackImages } from "../func.svelte";
 	import { storeButton } from "$lib/StoreButtons.svelte";
 	import type { ProductPageData } from "./+page.server.ts";
+	import "$lib/storeButtons.scss";
 
 	let { data } = $props();
 
diff --git a/src/routes/store/[slug]/product.scss b/src/routes/store/[slug]/product.scss
index 45b3de3..4e61824 100644
--- a/src/routes/store/[slug]/product.scss
+++ b/src/routes/store/[slug]/product.scss
@@ -11,7 +11,7 @@
   max-width: 600px;
   border-width: 4px;
   border-style: groove;
-  border-color: blue;
+  border-color: var(--accent-2);
 
   img {
     width: 100%;
@@ -40,8 +40,8 @@
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 2px;
-  color: #888;
-  border-bottom: 2px groove blue;
+  color: var(--accent-1);
+  border-bottom: 2px groove var(--accent-2);
   padding-bottom: 6px;
   width: fit-content;
   margin: 0 auto;
diff --git a/src/routes/store/snacks.scss b/src/routes/store/snacks.scss
index 148274d..49a215e 100644
--- a/src/routes/store/snacks.scss
+++ b/src/routes/store/snacks.scss
@@ -14,7 +14,7 @@
     height: 300px;
   }
 
-  img {
+  img:not(.StoreButton img) {
     width: 100%;
     height: 300px;
     object-fit: cover;
diff --git a/src/routes/store/snacks.svelte b/src/routes/store/snacks.svelte
index f0a8d8c..e8a89f1 100644
--- a/src/routes/store/snacks.svelte
+++ b/src/routes/store/snacks.svelte
@@ -4,6 +4,7 @@
 	import { storeButton } from "$lib/StoreButtons.svelte";
 	import { ExternalLink } from "@lucide/svelte";
 	import "./snacks.scss";
+	import "$lib/storeButtons.scss";
 	export { snackProduct };
 </script>
 
diff --git a/static/shared__.css b/static/shared__.css
index 8ce1c1e..f656a19 100644
--- a/static/shared__.css
+++ b/static/shared__.css
@@ -14,6 +14,11 @@
 		--card-raised: #183636;
 		--card-field: #0a1e1e;
 		--card-border: #1f4444;
+		--card-muted: #555555;
+		--black: #000000;
+		--brand-twitter: #1da1f2;
+		--brand-gumroad: #ff90e8;
+		--brand-jinxxy: #101010;
 	}
 
 	body {