From 0503e20b5d1fcc00b8d1d63b3f4ba929e4152ea5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 23:33:41 -0700
Subject: [PATCH] Make text colors consistent

---
 src/assets/styles/variables.scss             |  3 ++-
 src/lib/components/DynamicPostContent.svelte | 26 +++++++++-----------
 src/lib/components/PostContent.svelte        | 14 +++++------
 src/lib/components/ProjectContent.svelte     | 18 +++++++++++---
 4 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index ddbf2ef..ea65a88 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -122,8 +122,9 @@ $page-color: #ffffff;
 $card-color: #f7f7f7;
 $card-color-hover: #f0f0f0;
 
+$text-color: #4d4d4d;
+$text-color-subdued: #666666;
 $text-color-light: #b2b2b2;
-$text-color-body: #666666;
 
 $accent-color: #e33d3d;
 $grey-color: #f0f0f0;
diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte
index 7d6b7b5..1522a2a 100644
--- a/src/lib/components/DynamicPostContent.svelte
+++ b/src/lib/components/DynamicPostContent.svelte
@@ -138,7 +138,7 @@
 
 	.post-date {
 		font-size: 0.9rem;
-		color: $grey-40;
+		color: $text-color-subdued;
 		font-weight: 400;
 		transition: color 0.2s ease;
 	}
@@ -147,7 +147,7 @@
 		margin: 0;
 		font-size: 2.5rem;
 		font-weight: 700;
-		color: $grey-10;
+		color: $text-color;
 		line-height: 1.2;
 
 		@include breakpoint('phone') {
@@ -168,7 +168,7 @@
 			font-size: 1rem;
 			font-weight: 600;
 			margin: 0 0 $unit-2x;
-			color: $grey-20;
+			color: $text-color;
 		}
 	}
 
@@ -182,41 +182,41 @@
 		.album-description {
 			margin: 0;
 			font-size: 1rem;
-			color: $grey-10;
+			color: $text-color;
 			line-height: 1.5;
 		}
 	}
 
 	.post-body {
-		color: $grey-10;
+		color: $text-color;
 		line-height: 1.5;
 
 		:global(h1) {
 			margin: $unit-5x 0 $unit-3x;
 			font-size: 2rem;
 			font-weight: 600;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(h2) {
 			margin: $unit-4x 0 $unit-2x;
 			font-size: 1.5rem;
 			font-weight: 600;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(h3) {
 			margin: $unit-3x 0 $unit-2x;
 			font-size: 1.25rem;
 			font-weight: 600;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(h4) {
 			margin: $unit-3x 0 $unit-2x;
 			font-size: 1rem;
 			font-weight: 600;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(p) {
@@ -248,7 +248,7 @@
 			background: $grey-97;
 			border-left: 4px solid $grey-80;
 			border-radius: $unit;
-			color: $grey-30;
+			color: $text-color;
 			font-style: italic;
 
 			:global(p:last-child) {
@@ -263,7 +263,7 @@
 			font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
 				monospace;
 			font-size: 0.9em;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(pre) {
@@ -288,8 +288,6 @@
 
 			&:hover {
 				text-decoration: underline;
-				text-decoration-style: wavy;
-				text-underline-offset: 0.15em;
 			}
 		}
 
@@ -305,7 +303,7 @@
 
 		:global(strong) {
 			font-weight: 600;
-			color: $grey-10;
+			color: $text-color;
 		}
 
 		:global(figure) {
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index 7094ccf..73e3492 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -107,26 +107,26 @@
 	.post-date {
 		display: block;
 		font-size: 0.9rem;
-		color: $grey-40;
+		color: $text-color-subdued;
 		font-weight: 400;
 	}
 
 	.post-body {
-		color: $grey-10;
+		color: $text-color;
 		line-height: 1.5;
 
 		:global(h2) {
 			margin: $unit-4x 0 $unit-2x;
 			font-size: 1.5rem;
 			font-weight: 600;
-			color: $grey-20;
+			color: $text-color;
 		}
 
 		:global(h3) {
 			margin: $unit-3x 0 $unit-2x;
 			font-size: 1.2rem;
 			font-weight: 600;
-			color: $grey-20;
+			color: $text-color;
 		}
 
 		:global(p) {
@@ -152,7 +152,7 @@
 			margin: $unit-3x 0;
 			padding-left: $unit-3x;
 			border-left: 3px solid $grey-80;
-			color: $grey-40;
+			color: $text-color;
 			font-style: italic;
 		}
 
@@ -185,8 +185,6 @@
 
 		:global(a:hover) {
 			text-decoration: underline;
-			text-decoration-style: wavy;
-			text-underline-offset: 0.15em;
 		}
 
 		:global(hr) {
@@ -197,7 +195,7 @@
 
 		:global(em) {
 			font-style: italic;
-			color: $grey-40;
+			color: $text-color;
 		}
 	}
 
diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte
index 32d21e5..47112e2 100644
--- a/src/lib/components/ProjectContent.svelte
+++ b/src/lib/components/ProjectContent.svelte
@@ -56,7 +56,7 @@
 		:global(h2),
 		:global(h3) {
 			margin: $unit-3x 0 $unit-2x;
-			color: $grey-10;
+			color: $text-color;
 			font-weight: 600;
 
 			&:first-child {
@@ -80,7 +80,7 @@
 			margin: $unit-2x 0;
 			font-size: 1rem;
 			line-height: 1.5;
-			color: $grey-20;
+			color: $text-color;
 		}
 
 		:global(figure) {
@@ -102,13 +102,23 @@
 				margin: $unit 0;
 				font-size: 1.0625rem;
 				line-height: 1.65;
-				color: $grey-20;
+				color: $text-color;
 
 				:global(p) {
 					margin: 0;
 				}
 			}
 		}
+
+		:global(a) {
+			color: $red-60;
+			text-decoration: none;
+			transition: all 0.2s ease;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
 	}
 
 	/* Gallery Section */
@@ -116,7 +126,7 @@
 		h2 {
 			font-size: 1.75rem;
 			margin: 0 0 $unit-3x;
-			color: $grey-10;
+			color: $text-color;
 			font-weight: 600;
 		}
 	}