From e6009c619c4061503ab30177194f5d731d2a0b01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 26 Sep 2025 00:06:23 +0200
Subject: [PATCH] style: switch from B612 to Atkinson Hyperlegible font, enable
 tabular numbers

---
 av-sync/src/App.svelte    |  7 ++++---
 src/lib/TestCard.svelte   | 14 +++++++++-----
 src/routes/+layout.svelte |  2 --
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/av-sync/src/App.svelte b/av-sync/src/App.svelte
index 684b1e0..86296cb 100644
--- a/av-sync/src/App.svelte
+++ b/av-sync/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import '@fontsource/b612';
-	import '@fontsource/b612/700.css';
+	import '@fontsource/atkinson-hyperlegible';
+	import '@fontsource/atkinson-hyperlegible/700.css';
 	import 'normalize.css/normalize.css';
 
 	import { onMount, tick } from 'svelte';
@@ -80,7 +80,8 @@
 		justify-content: space-evenly;
 		align-items: center;
 
-		font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+		font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+		font-variant-numeric: tabular-nums;
 	}
 
 	.circular {
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index 273edeb..33c4201 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -23,11 +23,14 @@
 	});
 
 	let columnWidth = $derived(sizes.horizontalCount % 2 === 0 ? 3 : 4);
-	let columnHeight = $derived(2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2));
+	let columnHeight = $derived(
+		2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2)
+	);
 	let leftColumn = $derived(sizes.horizontalCount / 4 - columnWidth / 2);
-	let circleBlocks =
-		$derived(2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
-		(sizes.horizontalCount % 2));
+	let circleBlocks = $derived(
+		2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
+			(sizes.horizontalCount % 2)
+	);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -85,7 +88,8 @@
 		height: 100vh;
 		overflow: hidden;
 
-		font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+		font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+		font-variant-numeric: tabular-nums;
 		font-size: min(4vw, 4vh);
 	}
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 911fe7c..91ced66 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,8 +2,6 @@
 	import 'normalize.css/normalize.css';
 	import '@fontsource/atkinson-hyperlegible';
 	import '@fontsource/atkinson-hyperlegible/700.css';
-	import '@fontsource/b612';
-	import '@fontsource/b612/700.css';
 	import '@tabler/icons-webfont/tabler-icons.css';
 	import '../index.css';
 	import { onMount } from 'svelte';