package.json

@@ -36,7 +36,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/atkinson-hyperlegible": "^5.0.19",
 		"@fontsource/b612": "^5.0.8",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",

pnpm-lock.yaml

@@ -5,9 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@fontsource/atkinson-hyperlegible':
-    specifier: ^5.0.19
-    version: 5.0.19
   '@fontsource/b612':
     specifier: ^5.0.8
     version: 5.0.8
@@ -393,10 +390,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@fontsource/atkinson-hyperlegible@5.0.19:
-    resolution: {integrity: sha512-dnhQiFATy7n12Nq1fq8yhuzbae4WJSFKaKesJLTNKyiz6w+DI7RbcB3D1hwU+tBax4Dxlhg0tkY1LS4AzRRqxw==}
-    dev: false
-
   /@fontsource/b612@5.0.8:
     resolution: {integrity: sha512-PuOfVZB37asTrwI6GD5dcOjIuEZI+m9PW6/9MM05zRxA5pSUyPn280rLP7r7mOiFmEKSEWCFyI0Yf2XJOmqwNA==}
     dev: false

src/index.css

@@ -8,8 +8,8 @@ body, html {
   color: white;
   background-color: black;
 
-  font-family: 'Atkinson Hyperlegible', 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  font-size: 20px;
+  font-size: min(1.5vw, 1.5vh);
 }
 
 * {

src/lib/TestCard.svelte

@@ -78,9 +78,6 @@
 		width: 100vw;
 		height: 100vh;
 		overflow: hidden;
-
-		font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-		font-size: min(4vw, 4vh);
 	}
 
 	.inner {

src/routes/(pages)/+page.svelte

@@ -201,15 +201,17 @@
 			{#if tests.filter((test) => test.categories.includes(category.id)).length > 0}
 				<h2>{$i18n.t(category.label)}</h2>
 				{#each filteredTests.filter((test) => test.categories.includes(category.id) && filteredCategories.every( (f) => test.categories.includes(f) )) as test}
-					<a class="test" href={test.id} class:disabled={test.disabled}>
+					<div class="test" class:disabled={test.disabled}>
+						<a class="test" href={test.id}>
+							<span class="label">
 								<i class="ti {test.icon}"></i>
-						<div class="label">
 								{$i18n.t(test.label)}
-						</div>
+							</span>
-						<div class="description">
+							<span class="description">
 								{$i18n.t(`tests.${test.id}.description`)}
-						</div>
+							</span>
 						</a>
+					</div>
 				{/each}
 			{/if}
 		{:else}
@@ -228,7 +230,7 @@
 		gap: 1rem;
 		flex-grow: 1;
 		padding: 0 4rem;
-		overflow: hidden;
+		overflow: auto;
 
 		& input[type='search'] {
 			padding: 0.5em;
@@ -236,10 +238,6 @@
 		}
 	}
 
-	.tests {
-		overflow-y: auto;
-	}
-
 	h1 {
 		text-align: center;
 		font-size: 3rem;
@@ -248,6 +246,7 @@
 	}
 
 	h2 {
+		font-weight: normal;
 		margin: 0.25em 0;
 	}
 
@@ -294,22 +293,21 @@
 	}
 
 	.test {
-		display: grid;
+		display: flex;
-		grid-template-columns: auto 1fr;
+		gap: 0.5em;
-		align-items: center;
-		gap: 0 0.25em;
 		margin-bottom: 0.25em;
 
-		text-decoration: none;
-		color: inherit;
-
 		& .label {
 			white-space: nowrap;
 		}
 
 		& .description {
-			opacity: 0.8;
+			opacity: 0.85;
-			grid-column-start: 2;
+		}
+
+		& a {
+			text-decoration: none;
+			color: inherit;
 		}
 
 		&.disabled {

src/routes/+layout.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	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';