Add [defunct] label and lower opacity for revivals that are no longer active

pages/revivals/finobe.md

@@ -3,6 +3,7 @@ name: Finobe
 date: 2023-07-09 01:58 PM
 updated: 2023-07-12 05:36 AM
 logo: finobe.png
+defunct: yes
 clients:
     - 2012
     - 2016

pages/revivals/goodblox.md

@@ -1,6 +1,7 @@
 ---
 name: Goodblox
 date: 2023-07-09 01:58 PM
+defunct: yes
 clients:
     - 2009
 rating:

pages/revivals/kapish.md

@@ -1,6 +1,7 @@
 ---
 name: Kapish
 date: 2023-07-09 01:58 PM
+defunct: yes
 clients:
     - 2014
     - 2016

pages/revivals/krypton.md

@@ -1,6 +1,7 @@
 ---
 name: Krypton
 date: 2023-07-09 01:58 PM
+defunct: yes
 clients:
     - 2011
 rating:

pages/revivals/meteorite.md

@@ -1,6 +1,7 @@
 ---
 name: Meteorite
 date: 2023-07-09 01:58 PM
+defunct: yes
 clients:
     - 2016
     - 2020

pages/revivals/tadah.md

@@ -1,6 +1,7 @@
 ---
 name: Tadah
 date: 2023-07-09 01:58 PM
+defunct: yes
 clients:
     - 2010
     - 2012

src/lib/types.ts

@@ -3,6 +3,7 @@ export type RevivalMetadata = {
 	date: Date
 	updated?: Date
 	logo?: string
+	defunct?: boolean
 	clients: number[]
 	rating: {
 		website: number

src/routes/reviews/+page.svelte

@@ -16,7 +16,7 @@
 		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 flex p-3 ps-5">
+		<article class:opacity-50={review.defunct} class="mb-4 flex p-3 ps-5">
 			{#if review.logo}
 				<img
 					src="/logos/{review.logo}"
@@ -24,7 +24,12 @@
 					alt="{review.name} Logo" />
 			{/if}
 			<div>
-				<h2 class="mb-2 mt-1">{review.name}</h2>
+				<div class="flex flex-wrap">
+					<h2 class="mb-0 me-3 mt-1">{review.name}</h2>
+					{#if review.defunct}
+						<p class="mb-a mt-0 text-sm text-red-500">[defunct]</p>
+					{/if}
+				</div>
 				<p class="my-2">
 					{when(review.date)}
 				</p>

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

@@ -24,7 +24,14 @@
 			<a href="/revivals" class="hover:text-#888 mt-a">← Back to Index</a>
 			<div class="ms-4 mt-4">
 				<span class="flex">
-					<h1 class="text-2rem m-0">{data.name}</h1>
+					<div class="flex flex-wrap">
+						<h1 class="text-2rem m-0 me-3">{data.name}</h1>
+						{#if data.defunct}
+							<p class="mb-a mt-0 text-red-500">
+								[defunct]
+							</p>
+						{/if}
+					</div>
 					<span class="mt-a ms-a mb-0.5">
 						{when(data.date)}
 						{#if data.updated}
@@ -75,7 +82,9 @@
 					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 flex p-3 ps-5">
+					<article
+						class:opacity-50={revival.defunct}
+						class="mb-4 flex p-3 ps-5">
 						{#if revival.logo}
 							<img
 								src="/logos/{revival.logo}"
@@ -83,7 +92,14 @@
 								alt="{revival.name} Logo" />
 						{/if}
 						<div>
-							<h3 class="mb-2 mt-1">{revival.name}</h3>
+							<div class="flex flex-wrap">
+								<h3 class="mb-2 me-3 mt-1">{revival.name}</h3>
+								{#if revival.defunct}
+									<p class="mb-a mt-0 text-sm text-red-500">
+										[defunct]
+									</p>
+								{/if}
+							</div>
 							<small>
 								{when(revival.date)}
 							</small>

src/routes/revivals/+page.svelte

@@ -34,9 +34,16 @@
 			class="txt bg-#1f1c1d @light:bg-white rounded-2 card durition-500
 			@light:text-black box-border flex flex-col p-5 text-white
 			transition hover:shadow-xl">
-			<div class="flex">
+			<div class:opacity-50={revival.defunct} class="flex">
 				<div>
-					<h2 class="m-0 mb-1">{revival.name}</h2>
+					<div class="flex flex-wrap">
+						<h2 class="m-0 mb-1 me-3">{revival.name}</h2>
+						{#if revival.defunct}
+							<p class="mb-a mt-0 text-sm text-red-500">
+								[defunct]
+							</p>
+						{/if}
+					</div>
 					<div class="flex flex-wrap text-white">
 						{#each revival.clients as year}
 							<span
@@ -56,11 +63,11 @@
 				{/if}
 			</div>
 
-			<div class="mb-30">
+			<div class:opacity-50={revival.defunct} class="mb-30">
 				{@html revival.overview}
 			</div>
 
-			<div class="mt-a ms-a flex">
+			<div class:opacity-50={revival.defunct} class="mt-a ms-a flex">
 				<span class="me-2">Rating:</span>
 				<Stars rating={revival.rating.overall} />
 			</div>