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

2 files changed, 36 insertions, 29 deletions

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>