Update font styles and background colors in CSS files

6 files changed, 28 insertions, 13 deletions

diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
new file mode 100644
index 0000000..4740a20
--- /dev/null
+++ b/assets/css/_fonts.scss
@@ -0,0 +1,10 @@
+@font-face {
+	font-family: 'Sen Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400 800;
+	src: url("/fonts/Sen.woff2") format("woff2-variations");
+}
+
+$mainFontStack: 'Sen Variable', 'Arial', system-ui, sans-serif;
+$monoFontStack: 'Fira Code', 'Consolas', monospace;
\ No newline at end of file
diff --git a/assets/css/_root.scss b/assets/css/_root.scss
index 568691e..e04a427 100644
--- a/assets/css/_root.scss
+++ b/assets/css/_root.scss
@@ -1,12 +1,8 @@
 :root {
-	--font-heading: "Roboto Slab", "Segoe UI";
-	--font-body: Arial, Helvetica, sans-serif;
-	--font-mono: "Fira Code", "Consolas" , monospace;
-
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.65;
-	font-family: var(--font-body);
+	font-family: $mainFontStack;
 
 	--body-background: #efefef;
 	--body-color: #212121;
diff --git a/assets/css/_utilities.scss b/assets/css/_utilities.scss
new file mode 100644
index 0000000..554572c
--- /dev/null
+++ b/assets/css/_utilities.scss
@@ -0,0 +1,3 @@
+%tracking-tight {
+	letter-spacing: -0.05em;
+}
\ No newline at end of file
diff --git a/assets/css/base.scss b/assets/css/base.scss
index 083a667..e68958b 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -1,3 +1,5 @@
+@import "_fonts";
+@import "_utilities";
 @import "_root";
 @import "markup/_index";
 @import "partials/_index";
@@ -19,10 +21,14 @@ body {
 	
 	background-color: var(--body-background);
 	color: var(--body-color);
+
+	background-image: radial-gradient(circle at 1px 1px, #A9A9A988 1px, transparent 0);
+	background-size: 15px 15px;
 }
 
 h1, h2, h3, h4, h5, h6 {
-	font-family: var(--font-heading);
+	font-family: $mainFontStack;
+	@extend %tracking-tight;
 	line-height: 1.25;
 	margin-top: 0;
 	margin-bottom: 0.6em;	
@@ -42,5 +48,5 @@ a {
 }
 
 li > time {
-	font-family: var(--font-mono);
+	font-family: $monoFontStack;
 }
\ No newline at end of file
diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss
index 22c27ce..c615d65 100644
--- a/assets/css/partials/_article.scss
+++ b/assets/css/partials/_article.scss
@@ -28,7 +28,7 @@ main {
 
 	>p>code {
 		word-break: break-word;
-		font-family: var(--font-mono);
+		font-family: $monoFontStack;
 		
 		color: var(--accent-1);
 		background-color: #f6f6f6;
diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss
index 00d211a..75bc14c 100644
--- a/assets/css/partials/_header.scss
+++ b/assets/css/partials/_header.scss
@@ -9,10 +9,6 @@ header {
 	gap: 0.5rem 0;
 
 	padding: 1rem 1rem;
-	margin: 0.75rem;
-	margin-bottom: 1rem;
-
-	border-radius: $floatingRadius;
 
 	position: relative;
 	overflow: hidden;
@@ -47,7 +43,7 @@ header {
 			line-height: 1;
 
 			a {
-				font-family: var(--font-heading);
+				font-family: $mainFontStack;
 				color: var(--header-color);
 				text-decoration: none;
 			}
@@ -64,6 +60,10 @@ header {
 
 		transition: max-height 0.2s linear;
 		max-height: 100vh;
+
+		a {
+			@extend %tracking-tight;
+		}
 	}
 
 	#nav-socials {