From 34ce9f6162ae4ff2d0278760cce28227d82433ed Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Tue, 10 Jun 2025 22:38:58 +0400
Subject: 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      | 24 ++++++++++++++++++++----
 src/components/PostElement.astro |  2 +-
 src/components/PostSummary.astro |  2 +-
 src/pages/blog/[...slug].astro   |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/components/Header.astro b/src/components/Header.astro
index c2edf19..52c0ca8 100644
--- a/src/components/Header.astro
+++ b/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 href="/blog/">Blog</a>
+	<a class="site-title" href="/">{import.meta.env.DEFAULT_TITLE}</a>
+	<div class="nav-links">
+		<a href="/">Home</a>
+		<a href="/blog/">Blog</a>
+	</div>
 </header>
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro
index 6ddf7c5..e213ce7 100644
--- a/src/components/PostElement.astro
+++ b/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;
diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro
index 2e66b90..a3fbb29 100644
--- a/src/components/PostSummary.astro
+++ b/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;
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 2718f1b..8330c80 100644
--- a/src/pages/blog/[...slug].astro
+++ b/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;
-- 
cgit v1.2.3