Update font styles and accent colors in CSS files

6 files changed, 32 insertions, 43 deletions

diff --git a/assets/css/_root.scss b/assets/css/_root.scss
index fb8c8f1..57cd83e 100644
--- a/assets/css/_root.scss
+++ b/assets/css/_root.scss
@@ -1,28 +1,17 @@
-:root {
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.65;
-	font-family: $mainFontStack;
-
-	--body-background: #efefef;
-	--body-color: #212121;
-
-	--header-background: #ffffff;
-	--header-color: var(--accent-1);
+$accent: hsl(215, 69%, 49%);
+$accentLight: hsl(215, 69%, 59%);
+$accentDark: hsl(215, 69%, 39%);
+$dark: hsl(340, 13%, 5%);
+$light: hsl(214, 64%, 98%);
+$lightAlt: hsl(0, 0%, 94%);
 
-	--footer-background: #212121;
-	--footer-color: #ffffff;
-
-	--accent-1: hsl(36, 100%, 50%);
-	--accent-2: hsl(36, 100%, 60%);
-	--accent-3: hsl(36, 100%, 70%);
-	--accent-4: hsl(36, 100%, 80%);
-	--accent-5: hsl(36, 100%, 90%);
-
-	--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
-}
+$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 
 $floatingRadius: 0.5rem;
 
 $breakpointTablet: 480px;
-$breakpointDesktop: 1024px;
\ No newline at end of file
+$breakpointDesktop: 1024px;
+
+:root {
+	font: 400 16px/1.65 $mainFontStack;
+}
diff --git a/assets/css/base.scss b/assets/css/base.scss
index fe8bb86..9ca9b9e 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -19,8 +19,8 @@ body {
 	flex-direction: column;
 	gap: 0.5rem;
 	
-	background-color: var(--body-background);
-	color: var(--body-color);
+	background-color: $light;
+	color: $dark;
 
 	background-image: radial-gradient(circle at 1px 1px, #A9A9A988 1px, transparent 0);
 	background-size: 15px 15px;
@@ -35,7 +35,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a {
-	color: var(--accent-1);
+	color: $accent;
 }
 
 #main-footer-separator {
diff --git a/assets/css/markup/_render-heading.scss b/assets/css/markup/_render-heading.scss
index e93e4e6..87506a2 100644
--- a/assets/css/markup/_render-heading.scss
+++ b/assets/css/markup/_render-heading.scss
@@ -1,7 +1,7 @@
 main {
 	h1, h2, h3, h4, h5, h6 {
 		a.anchor {
-			color: var(--accent-1);
+			color: $accentDark;
 			font-weight: 700;
 			text-decoration: none;
 
diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss
index 86d1fc3..7d99b92 100644
--- a/assets/css/partials/_article.scss
+++ b/assets/css/partials/_article.scss
@@ -3,21 +3,21 @@ main {
 	margin: 0.75rem 1rem 3rem;
 	padding: 1.5rem 2.5rem;
 	border-radius: $floatingRadius;
-	box-shadow: var(--shadow);
+	box-shadow: $shadow;
 
 	align-self: center;
 
 	max-width: 82ch;
 	font-size: 1.25rem;
 
-	background-color: var(--header-background);
+	background-color: $lightAlt;
 
 	a {
-		color: var(--accent-1);
+		color: $accentDark;
 		transition: color 0.2s ease-in-out;
 
 		&:hover {
-			color: var(--accent-2);
+			color: $accent;
 		}
 	}
 
@@ -30,7 +30,7 @@ main {
 		word-break: break-word;
 		font-family: $monoFontStack;
 
-		color: var(--accent-1);
+		color: $accentDark;
 		background-color: #f6f6f6;
 	}
 
diff --git a/assets/css/partials/_footer.scss b/assets/css/partials/_footer.scss
index 77ecc8d..8fdc2b7 100644
--- a/assets/css/partials/_footer.scss
+++ b/assets/css/partials/_footer.scss
@@ -1,11 +1,11 @@
 footer {
-	background-color: var(--footer-background);
-	color: var(--footer-color);
+	background-color: $dark;
+	color: $light;
 	text-align: center;
 
 	padding: 0.5rem 1rem;
 
 	a {
-		color: var(--accent-5);
+		color: $accentLight;
 	}
 }
\ No newline at end of file
diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss
index 49185b8..f1501b5 100644
--- a/assets/css/partials/_header.scss
+++ b/assets/css/partials/_header.scss
@@ -1,7 +1,7 @@
 header {
-	background-color: var(--header-background);
-	color: var(--header-color);
-	box-shadow: var(--shadow);
+	background-color: $lightAlt;
+	color: $accent;
+	box-shadow: $shadow;
 
 	display: flex;
 	flex-direction: column;
@@ -18,7 +18,7 @@ header {
 		height: 4px;
 		width: 100%;
 
-		background-color: var(--header-color);
+		background-color: $accent;
 
 		position: absolute;
 		display: block;
@@ -44,7 +44,7 @@ header {
 
 			a {
 				font-family: $mainFontStack;
-				color: var(--header-color);
+				color: $accent;
 				text-decoration: none;
 			}
 		}
@@ -89,15 +89,15 @@ header {
 		text-transform: uppercase;
 		letter-spacing: 0.1rem;
 		transition: color 0.2s ease-in-out;
-		color: var(--header-color);
+		color: $accent;
 		line-height: 1;
 
 		&:hover {
-			color: var(--accent-3);
+			color: $accentDark;
 		}
 
 		&.active {
-			color: var(--accent-1);
+			color: $accentDark;
 		}
 	}