moved some stuff around and made the scores look nicer

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	// import { enhance } from '$app/forms';
-	import Table from './Table.svelte';
+	import Table from '$lib/ui/Table.svelte';
 
 	// Get initial data from the load thing (innacurate lol)
 	let { data }: { data: import('./$types').PageData } = $props();
@@ -78,16 +78,31 @@
 {/snippet}
 
 <svelte:window onbeforeunload={() => scoreEndpoint?.close()} />
-<Table data={eventTable} {header} {row} />
 
-<div class="p-[2vw]">
+<div class="flex max-h-[150vh] flex-col object-contain p-[2vw]">
 	{#each leaderboard as team (team.name)}
 		<div
 			style="--theme-color: {team.color};"
-			class="score-box mb-2 aspect-3/1 rounded-2xl border-5 first:aspect-2/1"
+			class="score-box mx-[10vw] mb-2 grid aspect-3/1 min-h-0 min-w-[70vw] flex-1 grid-cols-1 grid-rows-1 overflow-hidden rounded-2xl border-5 *:col-span-full *:row-end-[-1] *:flex *:items-center *:justify-center first:aspect-2/1"
 		>
-			<div class="text-center">{team.name}</div>
-			<div class="items-center justify-center text-center"><p>{team.points}</p></div>
+			<div class="black-ops-one-regular @container uppercase opacity-60">
+				<svg viewBox="0 0.1 100 0.6" preserveAspectRatio="none" class="h-full w-full fill-current">
+					<text
+						x="0"
+						y="0.7"
+						font-size="1"
+						dominant-baseline="auto"
+						textLength="100"
+						lengthAdjust="spacingAndGlyphs"
+						class="goldman-bold"
+					>
+						{team.name}
+					</text>
+				</svg>
+			</div>
+			<div class="text-[20cqh]">
+				<p>{team.points.toString().padStart(3, '0')}</p>
+			</div>
 		</div>
 	{/each}
 </div>
@@ -103,8 +118,17 @@
 	Send update
 </button>
 
+<Table data={eventTable} maxHeight="500px" focusId="20" {header} {row} />
+
 <style>
 	@import url('https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css');
+	@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
+
+	.black-ops-one-regular {
+		font-family: 'Black Ops One', system-ui;
+		font-weight: 400;
+		font-style: normal;
+	}
 	.score-box {
 		color: var(--theme-color);
 		border-color: var(--theme-color);

src/routes/Table.svelte

@@ -1,29 +0,0 @@
-<script>
-	let { data, header, row } = $props();
-</script>
-
-<table class="w-full table-auto">
-	{#if header}
-		<thead>
-			<tr class="justify-content-center">{@render header()}</tr>
-		</thead>
-	{/if}
-
-	<tbody>
-		{#each data as d}
-			<tr class="text-center">{@render row(d)}</tr>
-		{/each}
-	</tbody>
-</table>
-
-<style>
-	table :global(th:not(.large)),
-	table :global(td:not(.large)) {
-		width: 1%;
-		padding: 0;
-		margin: 0;
-	}
-	tbody tr:nth-child(2n + 1) {
-		background: var(--ctp-mocha-surface1);
-	}
-</style>