Visual distinction of grandfathering as less fair

src/lib/Sidebar.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import clsx from 'clsx';
+
 	interface Props {
+		className?: string;
 		children?: import('svelte').Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { children, className }: Props = $props();
 </script>
 
-<div id="sidebar" class="flex h-full w-1/3 flex-col place-content-stretch gap-4 2xl:w-1/4">
+<div
+	id="sidebar"
+	class={clsx('flex h-full w-1/3 flex-col place-content-stretch gap-4 2xl:w-1/4', className)}
+>
 	{@render children?.()}
 </div>

src/lib/StatsTable.svelte

@@ -22,35 +22,46 @@
 	run(() => {
 		tweenedReductions.set(reductions);
 	});
+	const grandfatheringColor = 'text-gray-400';
 </script>
 
-<div class="rounded px-12 py-8">
-	<table class="prose w-full max-w-none table-auto" align="center">
+<div class="rounded px-12 py-6">
+	<table class="prose w-full max-w-none table-fixed">
 		<thead>
 			<tr>
 				<th>Allocation method</th>
 				{#each Object.values(allocationMethods) as { label }}
-					<th>{label}</th>
+					<th>
+						{#if label === 'Grandfathering'}
+							<span class={grandfatheringColor}>{label}</span>
+						{:else}
+							{label}
+						{/if}
+					</th>
 				{/each}
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
 				<th>2030 reductions<br />relative to 2015</th>
 				{#each Object.keys(allocationMethods) as id}
-					<th>{reductions[id][2030] === null ? '-' : $tweenedReductions[id][2030].toFixed(0)}%</th>
+					<td class={id === 'GF' ? grandfatheringColor : ''}>
+						{reductions[id][2030] === null ? '-' : $tweenedReductions[id][2030].toFixed(0)}%
+					</td>
 				{/each}
 			</tr>
 			<tr>
 				<th>2040 reductions<br />relative to 2015</th>
 				{#each Object.keys(allocationMethods) as id}
-					<th>{reductions[id][2040] === null ? '-' : $tweenedReductions[id][2040].toFixed(0)}%</th>
+					<td class={id === 'GF' ? grandfatheringColor : ''}>
+						{reductions[id][2040] === null ? '-' : $tweenedReductions[id][2040].toFixed(0)}%
+					</td>
 				{/each}
 			</tr>
 			<tr>
 				<th>Display graph</th>
 				{#each Object.entries(allocationMethods) as [id, { color }]}
-					<th>
+					<td>
 						{#if availableAllocationMethods.has(id)}
 							<input
 								type="checkbox"
@@ -67,7 +78,7 @@
 								title="Not available for this region"
 							/>
 						{/if}
-					</th>
+					</td>
 				{/each}
 			</tr>
 		</tbody>

src/lib/allocationMethods.ts

@@ -1,11 +1,6 @@
 // Top colors from https://venngage.com/tools/accessible-color-palette-generator
 
 export const allocationMethods = {
-	GF: {
-		label: 'Grandfathering',
-		summary: 'Continuity. Based on current emission levels',
-		color: '#0a3dda'
-	},
 	PC: {
 		label: 'Per capita',
 		summary: 'Equality. Based on current population levels.',
@@ -32,5 +27,10 @@ export const allocationMethods = {
 		summary:
 			'Responsibility + Equality. Pays off historical debt and surplus in the short run and converges to per capita in 2050.',
 		color: '#ae6600'
+	},
+	GF: {
+		label: 'Grandfathering',
+		summary: 'Continuity. Based on current emission levels. Not considered fair.',
+		color: '#919191'
 	}
 } as const;

src/routes/regions/[region]/+page.svelte

@@ -121,7 +121,7 @@
 </script>
 
 <div class="flex h-full flex-row gap-4">
-	<Sidebar>
+	<Sidebar className="min-w-fit">
 		<GlobalBudgetCard
 			remaining={data.global.budget.remaining}
 			relative={data.global.budget.relative}