From ec7fcb5c4a087a7338fec72c4ef00b95fc62ce75 Mon Sep 17 00:00:00 2001
From: Lewin Kelly <heli@odex.cf>
Date: Sun, 9 Jul 2023 10:20:32 +0100
Subject: [PATCH] Add new sidebar navbar and some styling fixes

---
 src/global.sass                  |  6 ++++
 src/lib/components/Navbar.svelte | 53 +++++++++++++++++++++++---------
 src/routes/+layout.svelte        | 22 ++++++++-----
 3 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/src/global.sass b/src/global.sass
index 7beae04..b5897b5 100644
--- a/src/global.sass
+++ b/src/global.sass
@@ -29,10 +29,16 @@ a
 			@apply text-orange-300
 			@media (prefers-color-scheme: light)
 				@apply text-orange-700
+		&:active
+			@apply text-orange-600
+			@media (prefers-color-scheme: light)
+				@apply text-orange-400
 	.txt
 		@apply text-white
 		&:hover
 			@apply text-#aaa
+		&:active
+			@apply text-#888
 
 hr
 	border: none
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index fe21f25..491a5f3 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,28 +1,51 @@
-<div class="bg-#282625 @light:bg-white px-6">
-	<span class="inline-block pt-3 pb-3">
-		<a href="/" class="txt text-white @light:text-black hover:text-#aaa text-xl font-light mb-5">
+<div class="bg-#1f1d1c @light:bg-white w-full lg:w-90 lg:h-a
+	ps-6 pb-3 lg:pt-42 fixed lg:static flex lg:flex-col flex-wrap">
+	<span class="mt-3 me-12 lg:me-0 hidden sm:inline-block">
+		<a
+			href="/"
+			class="txt text-white @light:text-black
+			text-2xl lg:text-2.2rem font-600">
 			Revival Archive
 		</a>
 	</span>
-	<span class="inline-block pb-4">
-		<nav class="inline-block ps-4">
-			<a class="navlink" href="/">Home</a>
-			<a class="navlink" href="/about">About</a>
-			<a class="navlink" href="/index">Revival Index</a>
-			<a class="navlink" href="/blog">Blog</a>
-		</nav>
-	</span>
+	<nav class="flex lg:flex-col flex-wrap
+	box-border justify-self-center mt-3">
+		<a href="/">Home</a>
+		<a href="/about">About</a>
+		<a href="/index">Revival Index</a>
+		<a href="/blog">Blog</a>
+	</nav>
 </div>
 
 <style lang="sass">
-	.navlink
-		@apply no-underline px-2 me-1 rounded-1 transition
-		font-size: 0.9rem
+	nav a
+		@apply no-underline me-5 rounded-1 transition
+
+		margin: auto 1rem auto 0
+
+		font-size: 1.3rem
+		@media screen and (max-width: 1023px)
+			font-size: 1rem
 
 		color: white
 		@media (prefers-color-scheme: light)
 			color: black
 
+		
+		@media screen and (min-width: 1024px)
+			&::before
+				color: #aaa
+				transition: 0.25s
+				content: "→ "
+				opacity: 0
+
+	a
 		&:hover
-			@apply text-#aaa
+			color: #aaa
+			&::before
+				margin-right: 0.5rem
+				opacity: 1
+
+		&:active
+			color: #7f7f7f
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e8f6113..ca142df 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,14 +3,22 @@
 	import "uno.css"
 </script>
 
-<div class="flex flex-col h-screen">
+<div class="flex flex-col lg:flex-row">
 	<Navbar />
 
-	<main
-		class="box-border px-5 pt-12 sm:mx-a w-full
-		sm:w-140 md:w-180 lg:w-220 xl:w-270 2xl:w-300">
-		<slot />
-	</main>
+	<div class="flex flex-col w-full h-screen oveflow-scroll">
+		<main
+			class="box-border ps-5 pe-2.5 pt-18 sm:pt-24 lg:pt-12 sm:mx-a
+			sm:w-155 md:w-190 lg:w-170 xl:w-230 2xl:w-280">
+			<slot />
+		</main>
 
-	<Footer />
+		<Footer />
+	</div>
 </div>
+
+<style lang="sass">
+	@media screen and (min-width: 1024px)
+		div div
+			overflow-y: scroll
+</style>