Add new sidebar navbar and some styling fixes

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

src/lib/components/Navbar.svelte

@@ -1,28 +1,51 @@
-<div class="bg-#282625 @light:bg-white px-6">
+<div class="bg-#1f1d1c @light:bg-white w-full lg:w-90 lg:h-a
-	<span class="inline-block pt-3 pb-3">
+	ps-6 pb-3 lg:pt-42 fixed lg:static flex lg:flex-col flex-wrap">
-		<a href="/" class="txt text-white @light:text-black hover:text-#aaa text-xl font-light mb-5">
+	<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="flex lg:flex-col flex-wrap
-		<nav class="inline-block ps-4">
+	box-border justify-self-center mt-3">
-			<a class="navlink" href="/">Home</a>
+		<a href="/">Home</a>
-			<a class="navlink" href="/about">About</a>
+		<a href="/about">About</a>
-			<a class="navlink" href="/index">Revival Index</a>
+		<a href="/index">Revival Index</a>
-			<a class="navlink" href="/blog">Blog</a>
+		<a href="/blog">Blog</a>
-		</nav>
+	</nav>
-	</span>
 </div>
 
 <style lang="sass">
-	.navlink
+	nav a
-		@apply no-underline px-2 me-1 rounded-1 transition
+		@apply no-underline me-5 rounded-1 transition
-		font-size: 0.9rem
+
+		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>

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
+	<div class="flex flex-col w-full h-screen oveflow-scroll">
-		class="box-border px-5 pt-12 sm:mx-a w-full
+		<main
-		sm:w-140 md:w-180 lg:w-220 xl:w-270 2xl:w-300">
+			class="box-border ps-5 pe-2.5 pt-18 sm:pt-24 lg:pt-12 sm:mx-a
-		<slot />
+			sm:w-155 md:w-190 lg:w-170 xl:w-230 2xl:w-280">
-	</main>
+			<slot />
+		</main>
 
-	<Footer />
+		<Footer />
+	</div>
 </div>
+
+<style lang="sass">
+	@media screen and (min-width: 1024px)
+		div div
+			overflow-y: scroll
+</style>