From 61e7f5d5b4bf366dbf77b62e788f2aac251a6e1e Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Wed, 18 Sep 2024 00:35:18 +0000
Subject: Refactor Footer and Header components, update layout styles, and
 adjust Analytics placement

---
 src/components/Footer.astro  | 17 ++++++++--------
 src/components/Header.astro  | 48 ++++++++++++++++++++++++++------------------
 src/layouts/BaseLayout.astro |  2 +-
 src/pages/[...page].astro    |  2 +-
 src/scss/_variables.scss     |  1 -
 5 files changed, 38 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ea53b25..3dd3745 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -15,6 +15,14 @@ import dayjs from "dayjs";
 		right: 0;
 	}
 
+	a {
+		color: $colorText;
+
+		&:visited {
+			color: $colorText;
+		}
+	}
+
 	.left-nav,
 	.right-nav {
 		display: inline-block;
@@ -38,14 +46,6 @@ import dayjs from "dayjs";
 			padding: 4em 1em 2em;
 		}
 	}
-
-	a {
-		color: $colorText;
-
-		&:visited {
-			color: $colorText;
-		}
-	}
 </style>
 
 <footer>
@@ -54,7 +54,6 @@ import dayjs from "dayjs";
 	</div>
 	<div class="right-nav">
 		<a href="https://github.com/valentineus" target="_blank"><Icon name="hugeicons:github-01" /></a>
-		<a href="https://www.linkedin.com/in/valentineus/" target="_blank"><Icon name="hugeicons:linkedin-01" /></a>
 		<a href="https://analytics.popov.link" target="_blank"><Icon name="hugeicons:analytics-up" /></a>
 		<a href="/feed.xml" target="_blank"><Icon name="hugeicons:rss" /></a>
 	</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0f91af3..2fdf620 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,14 +1,18 @@
 ---
+import { Icon } from "astro-icon/components";
 
+const { pathname } = Astro.url;
 ---
 
 <style lang="scss">
 	@import "../scss/_variables.scss";
 
+	[data-icon] {
+		vertical-align: middle;
+	}
+
 	header {
 		background-color: $colorBg;
-		border-bottom: 1px solid $colorHeader;
-		box-shadow: 0 5px 5px $colorBg;
 		left: 0;
 		line-height: 3.5em;
 		opacity: 0.975;
@@ -19,38 +23,42 @@
 
 	nav {
 		margin: auto;
-		max-width: 60em;
+		max-width: 52em;
 		padding: 0 4em;
-		text-align: right;
+	}
 
-		a {
-			color: $colorText;
-			padding: 0 1em;
+	a {
+		color: $colorText;
 
-			&:visited {
-				color: $colorText;
-			}
+		&:visited {
+			color: $colorText;
 		}
 	}
 
 	@media (width <=684px) {
 		header {
-			box-shadow: none;
 			position: fixed;
-		}
-
-		nav {
-			padding: 0 2em;
-
-			span {
-				display: none;
-			}
+			text-align: center;
 		}
 	}
 </style>
 
 <header>
 	<nav>
-		<a href="/">Home</a>
+		<a href="/">
+			{
+				pathname !== "/" ? (
+					<>
+						<Icon name="hugeicons:arrow-left-01" />
+						<span>{import.meta.env.DEFAULT_TITLE}</span>
+					</>
+				) : (
+					<>
+						<Icon name="hugeicons:source-code" />
+						<span>{import.meta.env.DEFAULT_TITLE}</span>
+					</>
+				)
+			}
+		</a>
 	</nav>
 </header>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 142b398..a76861a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -24,7 +24,7 @@ const { description, title } = Astro.props;
 		<main>
 			<slot />
 		</main>
-		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
 		<Footer />
+		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
 	</body>
 </html>
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
index 42f84b3..cd64d66 100644
--- a/src/pages/[...page].astro
+++ b/src/pages/[...page].astro
@@ -20,7 +20,7 @@ const { page } = Astro.props;
 ---
 
 <Layout>
-	<section>
+	<section style={{ "margin-top": "3rem" }}>
 		{page.data.map((post) => <PostSummary post={post} />)}
 	</section>
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 5b65f2a..bc91f7f 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -3,6 +3,5 @@ $colorBgAlt: hwb(0deg 0% 100% / 20%);
 $colorBgCode: #3b3d42;
 $colorBlossom: #6da13f;
 $colorFade: #598332;
-$colorHeader: #1b1f22;
 $colorText: #dee2e6;
 $fontSizeBase: 1.8rem;
-- 
cgit v1.2.3