fixed a bunch of css

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>

src/lib/nav.scss

@@ -11,10 +11,10 @@
 
   a {
     padding: 5px;
-    color: #9f8083;
+    color: var(--accent-1);
   }
 
   a:hover {
-    color: #043b2f;
+    color: var(--thirdly);
   }
 }

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";

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 {

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"

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);
+		}
+	}
+}

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();
 

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;

src/routes/store/snacks.scss

@@ -14,7 +14,7 @@
     height: 300px;
   }
 
-  img {
+  img:not(.StoreButton img) {
     width: 100%;
     height: 300px;
     object-fit: cover;

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>
 

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 {