From b90e0de888a1030fff764872ba88e1c692fb0750 Mon Sep 17 00:00:00 2001
From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com>
Date: Fri, 27 Jan 2023 00:00:33 -0600
Subject: [PATCH] Make nav sticky while scrolling

---
 src/components/Header.astro | 19 ++++++++-----------
 src/style/global.css        | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b88bb3c..7d28821 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,19 +10,16 @@ import { SITE_TITLE } from "../config";
 			<h2>a blog, or whatever</h2>
 		</div>
 	</div>
-	<nav>
-		<HeaderLink href="/">home</HeaderLink>
-		<HeaderLink href="/posts">posts</HeaderLink>
-		<HeaderLink href="https://cassidoo.co">website</HeaderLink>
-		<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
-			>newsletter
-		</HeaderLink>
-	</nav>
 </header>
+<nav>
+	<HeaderLink href="/">home</HeaderLink>
+	<HeaderLink href="/posts">posts</HeaderLink>
+	<HeaderLink href="https://cassidoo.co">website</HeaderLink>
+	<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
+		>newsletter
+	</HeaderLink>
+</nav>
 <style>
-	header {
-		margin: 0em 0 2em;
-	}
 	h2 {
 		margin: 0.5em 0;
 	}
diff --git a/src/style/global.css b/src/style/global.css
index c77b6ac..4996057 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -54,14 +54,25 @@ button.dark-mode button {
 	background: var(--black);
 	color: var(--white);
 }
+body.dark-mode nav {
+	background: rgba(0, 0, 0, 0.8);
+}
+
+header {
+	position: relative;
+}
 
 a {
 	color: var(--pink);
 }
 
 nav {
+	position: sticky;
+	top: 0;
 	text-align: center;
+	background: rgba(255, 255, 255, 0.8);
 }
+
 nav a {
 	margin: 25px 0;
 }
@@ -74,12 +85,9 @@ hr {
 	margin: 1rem 0;
 }
 
-ul {
+ul.posts-list,
+ul.tags-list {
 	padding: unset;
-}
-
-.posts-list,
-.tags-list {
 	list-style-type: none;
 }