Improve formatting of pages and route names

src/global.sass

@@ -48,21 +48,31 @@ hr
 
 ::-webkit-scrollbar
 	position: fixed
-	width: 0.5rem
+	width: 1rem
 	height: 0.5rem
 	&-track, &-corner
-		background: none
-	&-thumb
-		border-radius: 0.2rem
-		
 		background: #282625
-		&:hover
-			background: #464443
-
 		@media (prefers-color-scheme: light)
 			background: white
+
+	&-thumb
+		background: #181615
+		border: 0.2rem solid #282625
+		border-radius: 1rem
+		width: 0.5rem
+		
+		&:hover
+			background: #464443
+		&:active
+			background: #3f3d3c
+
+		@media (prefers-color-scheme: light)
+			background: #d6d4d3
+			border: 0.2rem solid white
 			&:hover
 				background: #a6a4a3
+			&:active
+				background: #bfbdbc
 
 // Utility classes
 

src/lib/components/Navbar.svelte

@@ -1,6 +1,6 @@
 <div
 	class="bg-#1f1d1c @light:bg-white lg:w-90 lg:h-a lg:pt-42
-	fixed flex w-full flex-wrap pb-3 ps-6 lg:static lg:flex-col">
+	z-1 fixed flex w-full flex-wrap pb-3 ps-6 lg:static lg:flex-col">
 	<span class="me-12 mt-3 hidden sm:inline-block lg:me-0">
 		<a
 			href="/"
@@ -14,7 +14,8 @@
 	flex-wrap justify-self-center lg:flex-col">
 		<a href="/">Home</a>
 		<a href="/about">About</a>
-		<a href="/index">Revival Index</a>
+		<a href="/revivals">Revival Index</a>
+		<a href="/revivals">Reviews</a>
 		<a href="/blog">Blog</a>
 	</nav>
 </div>
@@ -33,7 +34,6 @@
 		@media (prefers-color-scheme: light)
 			color: black
 
-		
 		@media screen and (min-width: 1024px)
 			&::before
 				color: #aaa

src/lib/when.ts

@@ -0,0 +1,10 @@
+export default (date: Date) => {
+	const d = new Date(date).toLocaleDateString("en-GB", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric",
+	})
+	return d == "Invalid Date" ? "Not yet published" : `Published ${d}`
+}

src/routes/+page.svx

@@ -10,7 +10,7 @@
 
 Welcome to the Revival Archive, a website dedicated to keeping track of active/defunct old brickbuilding private servers.
 
-Check out our [blog posts](/blog), [reviews](/reviews) and most importantly, the [revival index](/index).
+Check out our [blog posts](/blog), [reviews](/revivals) and most importantly, the [revival index](/revivals).
 
 ---
 
@@ -27,7 +27,6 @@ You can easily find a revival perfect for you on the Revival Archive!
 
 You can go ahead and join our [Discord](https://discord.gg/zfC3VH2WBa) server - there you can request for your/somebody else's revival to be added to the archive!
 
-
 <style lang="sass">
     h1
         margin-bottom: 0

src/routes/blog/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import when from "$lib/when"
+
 	export let data
 </script>
 
@@ -10,20 +12,14 @@
 
 {#each data.posts as post}
 	<a
-		href="/blog/{post.path}"
+		href="/post/{post.path}"
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 durition-500 box-border
 		block text-white transition hover:shadow-xl">
 		<article class="mb-4 px-6 py-3">
 			<h2 class="my-2">{post.title}</h2>
 			<p class="my-2">
-				Published {new Date(post.date).toLocaleDateString("en-GB", {
+				{when(post.date)}
-					year: "numeric",
-					month: "long",
-					day: "numeric",
-					hour: "numeric",
-					minute: "numeric",
-				})}
 			</p>
 		</article>
 	</a>

src/routes/post/[post]/+page.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-	const when = (date: Date) =>
+	import when from "$lib/when"
-		new Date(date).toLocaleDateString("en-GB", {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-			hour: "numeric",
-			minute: "numeric",
-		})
 
 	export let data
 </script>
@@ -31,7 +24,7 @@
 				<hr class="mb-8 mt-3" />
 
 				<div class="text-justify">
-					{@html data.html}
+					<svelte:component this={data.content}/>
 				</div>
 			</div>
 		</div>
@@ -41,14 +34,14 @@
 			<h2>Other posts</h2>
 			{#each data.posts as post}
 				<a
-					href="/blog/{post.path}"
+					href="/post/{post.path}"
 					class="txt bg-a @light:text-dark hover:text-#ccc
 					@light:hover:text-#555 rounded-3 durition-500 box-border
 					block text-white transition hover:shadow-xl">
 					<article class="mb-4 px-6 py-3">
 						<h3 class="my-2">{post.title}</h3>
 						<small class="pb-5">
-							Published {when(post.date)}
+							{when(post.date)}
 						</small>
 					</article>
 				</a>

src/routes/revival/[revival]/+page.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
+	import when from "$lib/when"
 	import Stars from "$lib/components/Stars.svelte"
 
-	const when = (date: Date) =>
-		new Date(date).toLocaleDateString("en-GB", {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-			hour: "numeric",
-			minute: "numeric",
-		})
-
 	export let data
 
 	const ratingCategories: { [k: string]: number } = data.rating
@@ -23,12 +15,12 @@
 <div class="xl:max-w-300 flex flex-col xl:flex-row">
 	<article class="w-150 pt-8">
 		<div class="-ms-4">
-			<a href="/index" class="hover:text-#888">← Back to Index</a>
+			<a href="/revivals" class="hover:text-#888">← Back to Index</a>
 			<div class="ms-4">
 				<span class="mt-2 flex">
 					<h1 class="text-2rem m-0">{data.name}</h1>
 					<span class="mt-a ms-a mb-0.5">
-						Published {when(data.date)}
+						{when(data.date)}
 					</span>
 				</span>
 
@@ -36,7 +28,7 @@
 
 				<article>
 					<div class="mb-10 text-justify">
-						{@html data.html}
+						<svelte:component this={data.content} />
 					</div>
 
 					<h1>Rating</h1>
@@ -68,7 +60,7 @@
 					<article class="mb-4 px-6 py-3">
 						<h3 class="my-2">{revival.name}</h3>
 						<small class="pb-5">
-							Published {when(revival.date)}
+							{when(revival.date)}
 						</small>
 					</article>
 				</a>

src/routes/revivals/+page.svelte

@@ -28,7 +28,7 @@
 <h1>Revival Index</h1>
 
 <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-	{#each data.revivals as revival}
+	{#each data.revivals.sort((a, b) => b.rating.overall - a.rating.overall) as revival}
 		<a
 			href="/revival/{revival.path}"
 			class="txt bg-#1f1c1d @light:bg-white rounded-2 card durition-500
@@ -50,7 +50,7 @@
 
 			<div class="mt-a ms-a flex">
 				<span class="me-2">Rating:</span>
-				<Stars rating={revival.rating} />
+				<Stars rating={revival.rating.overall} />
 			</div>
 		</a>
 	{/each}