From d53149404b848077c524b04856dd4eeb8b6fffad Mon Sep 17 00:00:00 2001
From: Lewin Kelly <heli@odex.cf>
Date: Wed, 19 Jul 2023 18:53:49 +0100
Subject: [PATCH] Fix light mode styling and add website link for each revival
 to revival index page

---
 src/global.styl                           |  4 +-
 src/lib/components/Navbar.svelte          |  5 +--
 src/lib/types.ts                          |  1 +
 src/routes/404/+page.svelte               |  3 --
 src/routes/revival/[revival]/+page.svelte |  3 +-
 src/routes/revivals/+page.svelte          | 46 +++++++++++++++--------
 static/outlink.svg                        |  8 ++++
 7 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 static/outlink.svg

diff --git a/src/global.styl b/src/global.styl
index 1f9712f..a242be9 100644
--- a/src/global.styl
+++ b/src/global.styl
@@ -37,8 +37,10 @@ a
 			@apply text-orange-600
 			+lightTheme()
 				@apply text-orange-400
-	.txt
+	&.txt
 		color white
+		+lightTheme()
+			color black
 		&:hover
 			color #aaa
 		&:active
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index b2f6422..06387df 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -2,10 +2,7 @@
 	class="bg-#1f1d1c @light:bg-white lg:w-90 lg:h-a lg:pt-42
 	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="/"
-			class="txt @light:text-black lg:text-2.2rem
-			font-600 text-2xl text-white">
+		<a href="/" class="txt lg:text-2.2rem font-600 text-2xl">
 			Revival Archive
 		</a>
 	</span>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 4172a94..fc2b892 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -3,6 +3,7 @@ export type RevivalMetadata = {
 	date: Date
 	updated?: Date
 	logo?: string
+	website?: string
 	defunct?: boolean
 	clients: number[]
 	rating?: {
diff --git a/src/routes/404/+page.svelte b/src/routes/404/+page.svelte
index eafe693..1e72ae9 100644
--- a/src/routes/404/+page.svelte
+++ b/src/routes/404/+page.svelte
@@ -1,6 +1,3 @@
-<script lang="ts">
-</script>
-
 <svelte:head>
 	<meta name="description" content="Page not found" />
 	<title>Not found • Revival Archive</title>
diff --git a/src/routes/revival/[revival]/+page.svelte b/src/routes/revival/[revival]/+page.svelte
index 9d5643b..b12b159 100644
--- a/src/routes/revival/[revival]/+page.svelte
+++ b/src/routes/revival/[revival]/+page.svelte
@@ -72,7 +72,8 @@
 					</div>
 				{:else}
 					<h2 class="font-300 text-center tracking-wide">
-						This revival has not yet been reviewed. Watch this space!
+						This revival has not yet been reviewed. Watch this
+						space!
 					</h2>
 				{/if}
 			</div>
diff --git a/src/routes/revivals/+page.svelte b/src/routes/revivals/+page.svelte
index 91c5b4a..068300b 100644
--- a/src/routes/revivals/+page.svelte
+++ b/src/routes/revivals/+page.svelte
@@ -35,14 +35,28 @@
 {#if revivals.length > 0}
 	<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
 		{#each revivals as revival}
-			<a
-				href="/revival/{revival.path}"
+			<div
 				class="txt bg-#1f1c1d @light:bg-white rounded-2
 			@light:text-black card box-border flex flex-col p-5 text-white transition hover:shadow-xl">
 				<div class:opacity-50={revival.defunct} class="flex">
 					<div>
 						<div class="flex flex-wrap">
-							<h2 class="m-0 mb-1 me-3">{revival.name}</h2>
+							{#if revival.website}
+								<h2 class="m-0 mb-1 me-3 flex">
+									<a
+										href={revival.website}
+										target="_blank"
+										class="txt">
+										{revival.name}
+									</a>
+									<img
+										src="/outlink.svg"
+										alt="Links to an external site"
+										class="@light:invert ms-1.5 h-3" />
+								</h2>
+							{:else}
+								<h2 class="m-0 mb-1 me-3">{revival.name}</h2>
+							{/if}
 							{#if revival.defunct}
 								<p class="mb-a mt-0 text-sm text-red-500">
 									[defunct]
@@ -68,19 +82,21 @@
 					{/if}
 				</div>
 
-				<div class:opacity-50={revival.defunct} class="mb-30">
-					{@html revival.overview || ""}
-				</div>
-
-				{#if revival.rating}
-					<div
-						class:opacity-50={revival.defunct}
-						class="mt-a ms-a flex">
-						<span class="me-2">Rating:</span>
-						<Stars rating={revival.rating.overall} />
+				<a href="/revival/{revival.path}" class="txt">
+					<div class:opacity-50={revival.defunct} class="mb-30">
+						{@html revival.overview || ""}
 					</div>
-				{/if}
-			</a>
+
+					{#if revival.rating}
+						<div
+							class:opacity-50={revival.defunct}
+							class="mt-a ms-a flex">
+							<span class="me-2">Rating:</span>
+							<Stars rating={revival.rating.overall} />
+						</div>
+					{/if}
+				</a>
+			</div>
 		{/each}
 	</div>
 {:else}
diff --git a/static/outlink.svg b/static/outlink.svg
new file mode 100644
index 0000000..a7144f7
--- /dev/null
+++ b/static/outlink.svg
@@ -0,0 +1,8 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd"
+		d="M36.4386 16.001C36.9067 16.4691 37.7076 16.1454 37.7188 15.4834L37.9692 0.762758C37.9764 0.338607 37.6307 -0.00710394 37.2066 0.000110915L22.4859 0.250511C21.824 0.261771 21.5002 1.0626 21.9683 1.53073L25.2101 4.77248C25.503 5.06538 25.503 5.54025 25.2101 5.83315L11.8787 19.1646C10.7071 20.3361 10.7071 22.2356 11.8787 23.4072L14.7071 26.2356C15.8787 27.4072 17.7782 27.4072 18.9497 26.2356L32.2812 12.9042C32.5741 12.6113 33.0489 12.6113 33.3418 12.9042L36.4386 16.001Z"
+		fill="white" />
+	<path fill-rule="evenodd" clip-rule="evenodd"
+		d="M32.496 12.7539C32.3705 8.85901 29.2752 5.71442 25.4006 5.51051C25.3667 5.62865 25.3032 5.74009 25.2101 5.83315L22.5433 8.5H25C27.4853 8.5 29.5 10.5147 29.5 13V15.6854L32.2812 12.9042C32.3453 12.8401 32.4182 12.7899 32.496 12.7539ZM29.5 19.928L32.5 16.928V30C32.5 34.1421 29.1421 37.5 25 37.5H8C3.85786 37.5 0.5 34.1421 0.5 30V13C0.5 8.85786 3.85786 5.5 8 5.5H21.3006L18.3006 8.5H8C5.51472 8.5 3.5 10.5147 3.5 13V30C3.5 32.4853 5.51472 34.5 8 34.5H25C27.4853 34.5 29.5 32.4853 29.5 30V19.928Z"
+		fill="white" />
+</svg>
\ No newline at end of file