From 429e7ff3b0635f0036b9121c81479e08355745b7 Mon Sep 17 00:00:00 2001
From: polsevev <rolf.martin@glomsrud.no>
Date: Sun, 4 Aug 2024 21:29:22 +0200
Subject: [PATCH] Reworked some of the navigation styling

---
 src/components/Header.astro     | 15 ++++++++-------
 src/components/HeaderLink.astro |  3 ++-
 src/pages/index.astro           |  2 +-
 src/styles/global.css           |  3 ++-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index e0d477f..d3dd64a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -7,10 +7,10 @@ import { SITE_TITLE } from '../consts';
 	<nav>
 		<h2><a href="/">{SITE_TITLE}</a></h2>
 		<div class="internal-links">
-			<HeaderLink href="/">Home</HeaderLink>
-			<HeaderLink href="/blog">Blog</HeaderLink>
-			<HeaderLink href="/about">About</HeaderLink>
-			<HeaderLink href="/homelab">Homelab</HeaderLink>
+			<HeaderLink href="/">~/</HeaderLink>
+			<HeaderLink href="/blog">~/blog</HeaderLink>
+			<HeaderLink href="/about">~/about</HeaderLink>
+			<HeaderLink href="/homelab">~/homelab</HeaderLink>
 		</div>
 		<div class="social-links">
 		<a href="https://github.com/polsevev" target="_blank">
@@ -29,10 +29,11 @@ import { SITE_TITLE } from '../consts';
 	header {
 		margin: 0;
 		padding: 0 1em;
-			background-color: rgb(198, 60, 81);
-			box-shadow: 0 2px 8px rgba(var(--black), 5%);
+		background-color: rgb(198, 60, 81);
+		box-shadow: 0 2px 8px rgba(var(--black), 5%);
 		border-radius: 10px;
 		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
 		color: white;
 		width: 100%;
 	}
@@ -59,7 +60,7 @@ import { SITE_TITLE } from '../consts';
 	}
 	nav a.active {
 		text-decoration: none;
-		border-bottom-color: var(--accent);
+		border-bottom-color: cyan;
 	}
 	.social-links,
 	.social-links a {
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index bb600fb..e3b4a21 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -17,9 +17,10 @@ const isActive = href === pathname || href === '/' + subpath?.[0];
 	a {
 		display: inline-block;
 		text-decoration: none;
+
 	}
 	a.active {
 		font-weight: bolder;
-		text-decoration: underline;
+		text-decoreation: underline;
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a62ecef..e562728 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -65,7 +65,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 					</p>
 				</left>
 				<right class="column">
-					<img src="public/images/self.png"/>
+					<img src="images/self.png"/>
 				</right >
 			</box>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index c6efe9d..f6ac4b3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -32,6 +32,7 @@
 }
 
 footer{
+
 	height: 4em;
 }
 body {
@@ -101,7 +102,7 @@ a {
 	color: white;
 }
 a:hover {
-	color: var(--accent);
+	color: black;
 }
 p {
 	margin-bottom: 1em;