style: change scrolling

package.json

@@ -36,6 +36,7 @@
 	},
 	"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,6 +5,9 @@ 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
@@ -390,6 +393,10 @@ 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: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Atkinson Hyperlegible', 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  font-size: min(1.5vw, 1.5vh);
+  font-size: 20px;
 }
 
 * {

src/lib/TestCard.svelte

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

src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <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';