Refactor Footer and Header components, update layout styles, and adjust Analytics placement

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>

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 {
+	a {
+		color: $colorText;
+
+		&:visited {
 			color: $colorText;
-			padding: 0 1em;
-
-			&:visited {
-				color: $colorText;
-			}
 		}
 	}
 
 	@media (width <=684px) {
 		header {
-			box-shadow: none;
 			position: fixed;
-		}
+			text-align: center;
-
-		nav {
-			padding: 0 2em;
-
-			span {
-				display: none;
-			}
 		}
 	}
 </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>

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>

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>
 

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;