From 46e5c3d313c13ebb42e09130c09608ce49b644ba Mon Sep 17 00:00:00 2001
From: nomadics9 <binaskar9@gmail.com>
Date: Thu, 9 Jan 2025 18:09:38 +0300
Subject: [PATCH] Website: Logo colors

---
 src/lib/components/atoms/Logo.svelte     |  2 +-
 src/lib/scss/_themes.scss                |  6 ++++++
 src/routes/(blog-article)/+layout.svelte | 16 +++-------------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/atoms/Logo.svelte b/src/lib/components/atoms/Logo.svelte
index 608db96..ef45cd3 100644
--- a/src/lib/components/atoms/Logo.svelte
+++ b/src/lib/components/atoms/Logo.svelte
@@ -92,7 +92,7 @@
 		}
 	}
 	.logo path {
-		fill: #303e35;
+		fill: var(--color--logo-fill);
 		stroke-width: 7px;
 		stroke: var(--color--text);
 	}
diff --git a/src/lib/scss/_themes.scss b/src/lib/scss/_themes.scss
index 35a6e23..7c1822e 100644
--- a/src/lib/scss/_themes.scss
+++ b/src/lib/scss/_themes.scss
@@ -25,6 +25,9 @@
 	@include define-color('post-page-background', #F3FBFC);  // Slightly darker for content
 	@include define-color('card-background', #FFFFFF);  // Card background
 
+	// Logo
+	@include define-color('logo-fill', #1C1E26);  // Slightly darker for content
+
 	// Callout component
 	@include define-color('callout-background', #F4F8FB);  // Neutral light background
 	@include define-color('callout-background--info', #D8EFFF);  // Info callout background
@@ -75,6 +78,9 @@
 	@include define-color('post-page-background', #181A1B);  // Darker for content areas
 	@include define-color('card-background', #24282A);  // Cards background
 
+	// Logo
+	@include define-color('logo-fill', #00000000);  // Darker for content areas
+
 	// Callout Backgrounds & Accents
 	@include define-color('callout-background', #181A1B);  // Neutral dark background
 	@include define-color('callout-background--info', #125A75);  // Info callout (cool blue)
diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
index cb0a80a..1887cc8 100644
--- a/src/routes/(blog-article)/+layout.svelte
+++ b/src/routes/(blog-article)/+layout.svelte
@@ -78,7 +78,7 @@
 			</div>
 		</article>
 		<div id="branding">
-			<div class="circle-container">
+			<div>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="logo"
@@ -210,16 +210,6 @@
 		align-items: center;
 		position: relative;
 
-		// .circle-container {
-		// 	position: relative;
-		// 	width: 120px;
-		// 	height: 120px;
-		// 	background-color: #f0f0f0;
-		// 	border-radius: 50%;
-		// 	display: flex;
-		// 	justify-content: center;
-		// 	align-items: center;
-		// }
 		.logo {
 			display: flex;
 			align-items: center;
@@ -228,9 +218,9 @@
 			height: 250px;
 		}
 		.logo path {
-			stroke: white;
+			stroke: var(--color--text);
 			stroke-width: 4px;
-			fill: black;
+			fill: var(--color--logo-fill);
 		}
 	}
 </style>