style: enhance Header component and update SCSS imports (#50)

- Improved the Header component by adding a site title with styling.
- Wrapped navigation links in a div for better structure.
- Updated SCSS imports across multiple components for consistency.

src/components/Header.astro

@@ -1,14 +1,27 @@
 <style lang="scss">
-        @use "../scss/variables" as *;
+	@use "../scss/variables" as *;
 
 	header {
 		padding-bottom: 1rem;
+		position: relative;
+	}
+
+	.site-title {
+		color: $colorText;
+		font-weight: bold;
+		left: 0;
+		position: absolute;
+		text-decoration: none;
+		top: 0;
+	}
+
+	.nav-links {
 		text-align: right;
 	}
 
 	a {
-		text-decoration: none;
 		margin-right: 1.5rem;
+		text-decoration: none;
 
 		&:last-child {
 			margin-right: 0;
@@ -17,6 +30,9 @@
 </style>
 
 <header>
-	<a href="/">Home</a>
+	<a class="site-title" href="/">{import.meta.env.DEFAULT_TITLE}</a>
-	<a href="/blog/">Blog</a>
+	<div class="nav-links">
+		<a href="/">Home</a>
+		<a href="/blog/">Blog</a>
+	</div>
 </header>

src/components/PostElement.astro

@@ -12,7 +12,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-        @use "../scss/variables" as *;
+	@use "../scss/variables" as *;
 
 	small {
 		font-size: $fontSizeBase * 0.75;

src/components/PostSummary.astro

@@ -12,7 +12,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-        @use "../scss/variables" as *;
+	@use "../scss/variables" as *;
 
 	a {
 		color: $colorText;

src/pages/blog/[...slug].astro

@@ -23,7 +23,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 ---
 
 <style lang="scss">
-        @use "../../scss/variables" as *;
+	@use "../../scss/variables" as *;
 
 	p {
 		opacity: 0.5;