From afc45328cfdaa7982d1b21feeb81813401deb567 Mon Sep 17 00:00:00 2001
From: Lewin Kelly <heli@odex.cf>
Date: Sat, 8 Jul 2023 10:01:50 +0100
Subject: [PATCH] Add light mode, hover effects, and improve colours

---
 src/global.sass                  | 31 ++++++++++++++--
 src/lib/components/Footer.svelte | 13 ++++++-
 src/lib/components/Navbar.svelte | 11 ++++--
 src/lib/components/Stars.svelte  |  4 +-
 src/routes/+error.svelte         |  4 +-
 src/routes/blog/+page.svelte     | 11 +++++-
 src/routes/index/+page.svelte    | 64 +++++++++++++++++++++-----------
 7 files changed, 103 insertions(+), 35 deletions(-)

diff --git a/src/global.sass b/src/global.sass
index f6159a7..7beae04 100644
--- a/src/global.sass
+++ b/src/global.sass
@@ -1,28 +1,44 @@
 @font-face
 	font-family: "Inter"
 	src: url("/Inter.woff2") format("woff2"), url("/Inter.ttf") format("ttf")
+	font-display: swap
 
 @font-face
 	font-family: "Inter"
 	src: url("/InterItalic.woff2") format("woff2"), url("/InterItalic.ttf") format("ttf")
 	font-style: italic
+	font-display: swap
 	
 :root, body
 	padding: 0
 	margin: 0
 	background: #100f0e
 	color: white
+	@media (prefers-color-scheme: light)
+		background: #e6e4e3
+		color: black
+
 	font-family: "Inter", sans-serif
 
 a
-	@apply transition-colors text-orange-500
+	@apply transition-colors
 	text-decoration: none
-	&:hover
-		@apply text-orange-300
+	&:not(.txt)
+		@apply text-orange-500
+		&:hover
+			@apply text-orange-300
+			@media (prefers-color-scheme: light)
+				@apply text-orange-700
+	.txt
+		@apply text-white
+		&:hover
+			@apply text-#aaa
 
 hr
 	border: none
 	border-top: 1px solid #464443
+	@media (prefers-color-scheme: light)
+		border-top: 1px solid #a6a4a3
 
 ::-webkit-scrollbar
 	position: fixed
@@ -32,13 +48,22 @@ hr
 		background: none
 	&-thumb
 		border-radius: 0.2rem
+		
 		background: #282625
 		&:hover
 			background: #464443
 
+		@media (prefers-color-scheme: light)
+			background: white
+			&:hover
+				background: #a6a4a3
+
 // Utility classes
 
 .bg-a
 	background: #1f1c1d
+	@media (prefers-color-scheme: light)
+		background: white
+
 .bg-bg
 	background: #100f0e
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 47acf55..3e91489 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,4 +1,4 @@
-<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a">
+<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a @light:text-#4c4b4a">
 	<a href="/" class="pe-1.5">Revival Archive</a>
 	2023-2023
 	<nav class="text-white mt-5 mb-4">
@@ -11,10 +11,19 @@
 <style lang="sass">
 	nav
 		color: #8c8b8a
+		@media (prefers-color-scheme: light)
+			color: #4c4b4a
 		a
+			text-decoration: none
+
 			color: white
 			&:hover
 				color: #aaa
-			text-decoration: none
+
+			@media (prefers-color-scheme: light)
+				color: black
+				&:hover
+					color: #888
+				
 
 </style>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index a5505de..fe21f25 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,6 +1,6 @@
-<div class="bg-#282625 px-6">
+<div class="bg-#282625 @light:bg-white px-6">
 	<span class="inline-block pt-3 pb-3">
-		<a href="/" class="text-light hover:text-#aaa text-xl font-light mb-5">
+		<a href="/" class="txt text-white @light:text-black hover:text-#aaa text-xl font-light mb-5">
 			Revival Archive
 		</a>
 	</span>
@@ -16,8 +16,13 @@
 
 <style lang="sass">
 	.navlink
-		@apply no-underline text-white px-2 me-1 rounded-1 transition
+		@apply no-underline px-2 me-1 rounded-1 transition
 		font-size: 0.9rem
+
+		color: white
+		@media (prefers-color-scheme: light)
+			color: black
+
 		&:hover
 			@apply text-#aaa
 </style>
diff --git a/src/lib/components/Stars.svelte b/src/lib/components/Stars.svelte
index a025f63..a05497b 100644
--- a/src/lib/components/Stars.svelte
+++ b/src/lib/components/Stars.svelte
@@ -11,7 +11,9 @@
 <style lang="sass">
 	div
 		// Fill each star with a gradient based on the rating
-		background: linear-gradient( to right, #f1c40f var(--rating), #f1c40f var(--rating), #7f7d7c var(--rating), #7f7d7c var(--rating), #7f7d7c)
+		background: linear-gradient(to right, #f1c40f var(--rating), #4f4d4c var(--rating))
+		@media (prefers-color-scheme: light)
+			background: linear-gradient(to right, #f1c40f var(--rating), #bfbdbc var(--rating))
 
 		// APply a mask to hide the gradient outside the star
 		-webkit-mask: url(/star.svg) no-repeat
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index ffa26c9..ec24188 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -7,8 +7,8 @@
 </svelte:head>
 
 <div class="flex flex-col justify-center items-center h-72vh">
-	<div class="bg-a p-8 px-22 rounded-4 light-text text-center">
-		<h1 class="light-text m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
+	<div class="bg-a p-8 px-22 rounded-4 text-center">
+		<h1 class="m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
 		{$page.error?.message}
 	</div>
 </div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index fde0d95..d0d16f7 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -9,8 +9,10 @@
 <h1>Posts</h1>
 
 {#each data.posts as post}
-	<a href="/blog/{post.path}" class="text-white hover:text-#aaa">
-		<article class="bg-a py-3 px-6 rounded-5 mb-4">
+	<a href="/blog/{post.path}" class="txt text-white @light:text-dark
+		hover:text-#ccc @light:hover:text-#555 block bg-a rounded-3
+		transition durition-500 hover:shadow-xl box-border">
+		<article class="py-3 px-6 mb-4">
 			<h2 class="my-2">{post.title}</h2>
 			<p class="my-2">
 				Published {new Date(post.date).toLocaleDateString("en-GB", {
@@ -24,3 +26,8 @@
 		</article>
 	</a>
 {/each}
+
+<style lang="sass">
+	a:hover
+		transform: translateY(-0.15rem)
+</style>
diff --git a/src/routes/index/+page.svelte b/src/routes/index/+page.svelte
index eadbbda..5de9d06 100644
--- a/src/routes/index/+page.svelte
+++ b/src/routes/index/+page.svelte
@@ -1,19 +1,24 @@
 <script lang="ts">
 	const years: { [k: number]: string } = {
-		2009: "bg-red-600",
+		2008: "bg-pink-700",
+		2009: "bg-rose-400 text-black",
+		2010: "bg-red-600",
 		2011: "bg-orange-500 text-black",
 		2012: "bg-yellow-500 text-black",
-		2013: "bg-green-600",
-		2014: "bg-teal-600",
-		2016: "bg-blue-600",
-		2018: "bg-indigo-600",
-		2020: "bg-purple-600",
+		2013: "bg-lime-500 text-black",
+		2014: "bg-emerald-600 text-black",
+		2015: "bg-cyan-600 text-black",
+		2016: "bg-blue-600 ",
+		2017: "bg-indigo-600",
+		2018: "bg-violet-400 text-black",
+		2019: "bg-purple-600",
+		2020: "bg-slate-600",
 	}
 
 	const revivals = [
 		{
 			name: "Mercury",
-			years: [2013],
+			years: [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
 			rating: 5,
 		},
 		{
@@ -24,31 +29,31 @@
 		{
 			name: "Finobe",
 			years: [2012, 2016],
-			rating: 4.5
+			rating: 4.5,
 		},
 		{
 			name: "Meteorite",
 			years: [2016, 2020],
 			rating: 2.65,
 		},
+		{
+			name: "Tadah",
+			years: [2010, 2012, 2014, 2016],
+			rating: 3.5,
+		},
 		{
 			name: "Krypton",
 			years: [2011],
 			rating: 4.65,
 		},
 		{
-			name: "Tadah",
-			years: [2014],
-			rating: 3.5,
+			name: "Hamblox",
+			years: [2015],
+			rating: 4.65,
 		},
 		{
-			name: "Kapish",
-			years: [2014],
-			rating: 2.35,
-		},
-		{
-			name: "Fobe",
-			years: [2016],
+			name: "Rawblox",
+			years: [2017],
 			rating: 1,
 		},
 		{
@@ -56,6 +61,11 @@
 			years: [2018],
 			rating: 1.65,
 		},
+		{
+			name: "Kapish",
+			years: [2014, 2016],
+			rating: 2.35,
+		},
 	]
 </script>
 
@@ -67,12 +77,17 @@
 
 <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
 	{#each revivals as revival}
-		<div class="bg-#1f1c1d p-5 rounded-2 flex flex-col">
+		<a
+			href="/index"
+			class="txt bg-#1f1c1d @light:bg-white p-5 rounded-2 flex flex-col
+			card transition durition-500 hover:shadow-xl box-border
+			text-white @light:text-black">
 			<h2 class="m-0 mb-1">{revival.name}</h2>
-			<div>
+			<div class="text-white flex flex-wrap">
 				{#each revival.years as year}
 					<span
-						class="rounded-full {years[year]} px-2 py-0.5 text-sm me-2">
+						class="{years[year]}
+						rounded-full px-2 py-0.5 my-1 text-sm me-2">
 						{year}
 					</span>
 				{/each}
@@ -84,6 +99,11 @@
 			<div class="mt-a ms-a">
 				<Stars rating={revival.rating} />
 			</div>
-		</div>
+		</a>
 	{/each}
 </div>
+
+<style lang="sass">
+	.card:hover
+		transform: translateY(-0.3rem)
+</style>