site: use for web-font loading (so font is always visible)

src/routes/payday/+page.svelte

@@ -1,87 +1,103 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import { onMount } from "svelte";
-	import { endOfMonth, isWeekend, sub, differenceInCalendarDays } from 'date-fns';
+  import {
+    endOfMonth,
+    isWeekend,
+    sub,
+    differenceInCalendarDays
+  } from "date-fns";
 
-	let lastDayOfMonth = new Date();
+  let lastDayOfMonth = new Date();
-	let daysUntilPayDay = 0;
+  let daysUntilPayDay = 0;
 
-	function prettyPrintDays(numberOfDays: number): string {
+  function prettyPrintDays(numberOfDays: number): string {
-		return `${numberOfDays} ${numberOfDays === 1 ? 'day' : 'days'}`;
+    return `${numberOfDays} ${numberOfDays === 1 ? "day" : "days"}`;
-	}
+  }
 
-	$: pluralisedDays = prettyPrintDays(Math.abs(daysUntilPayDay));
+  $: pluralisedDays = prettyPrintDays(Math.abs(daysUntilPayDay));
 
-	onMount(() => {
+  onMount(() => {
-		lastDayOfMonth = endOfMonth(new Date());
+    lastDayOfMonth = endOfMonth(new Date());
 
-		while (isWeekend(lastDayOfMonth)) {
+    while (isWeekend(lastDayOfMonth)) {
-			lastDayOfMonth = sub(lastDayOfMonth, { days: 1 });
+      lastDayOfMonth = sub(lastDayOfMonth, { days: 1 });
-		}
+    }
 
-		daysUntilPayDay = differenceInCalendarDays(lastDayOfMonth, new Date());
+    daysUntilPayDay = differenceInCalendarDays(lastDayOfMonth, new Date());
-	});
+  });
 </script>
 
 <svelte:head>
-	<title>Pay Day</title>
+  <title>Pay Day</title>
 </svelte:head>
 
 <main>
-	<section class="content">
+  <section class="content">
-		{#if daysUntilPayDay > 0}
+    {#if daysUntilPayDay > 0}
-			<h1>The next Pay Day is</h1>
+      <h1>
-			<p class="days-away">In {pluralisedDays}</p>
+        Your next pay day is in <span style="display:none"
-			<p class="day">
+          >{pluralisedDays}</span
-				The last working day of this month is <strong>
+        >
-					{Intl.DateTimeFormat('en-GB', {
+      </h1>
-						weekday: 'long',
+      <p class="days-away" aria-hidden="true">{pluralisedDays}</p>
-						month: 'long',
+      <p class="day">
-						day: 'numeric'
+        The last working day of this month is <strong>
-					}).format(lastDayOfMonth)}</strong
+          {Intl.DateTimeFormat("en-GB", {
-				>
+            weekday: "long",
-				<br />
+            month: "long",
-				That's only {prettyPrintDays(daysUntilPayDay - 1)} with Monzo's "get paid now"
+            day: "numeric"
-			</p>
+          }).format(lastDayOfMonth)}</strong
-		{:else}
+        >
-			<p>PayDay was {pluralisedDays} ago</p>
+        <br />
-		{/if}
+        That's only {prettyPrintDays(daysUntilPayDay - 1)} with Monzo's "get paid
-	</section>
+        now"
+      </p>
+    {:else}
+      <p class="day">PayDay was {pluralisedDays} ago</p>
+    {/if}
+  </section>
 </main>
 
 <style>
-	main {
+  main {
-		display: grid;
+    display: grid;
-		place-items: center;
+    place-items: center;
-		height: 100vh;
+    height: 100vh;
-		width: 100vw;
+    width: 100vw;
-		background: var(--gray-200);
+    background: var(--gray-200);
-		overflow-x: hidden;
+    overflow-x: hidden;
-		grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
-		box-sizing: border-box;
+    box-sizing: border-box;
-		padding: 12px;
+    padding: 12px;
-	}
+  }
 
-	h1 {
+  h1 {
-		font-size: 1rem;
+    font-size: 1.15rem;
-		text-align: center;
+    text-align: center;
-		padding: 0;
+    padding: 0;
-	}
+    margin: 0;
+    color: #111827;
+  }
 
-	.content {
+  .content {
-		background: white;
+    background: white;
-		display: flex;
+    display: flex;
-		flex-flow: column;
+    flex-flow: column;
-		padding: 12px;
+    padding: 24px;
-	}
+    border-radius: 8px;
+  }
 
-	.days-away {
+  .days-away {
-		font-size: 2rem;
+    font-size: 2rem;
-		text-align: center;
+    text-align: center;
-	}
+    line-height: 100%;
+    padding-top: 4px;
+    padding-bottom: 18px;
+  }
 
-	.day {
+  .day {
-		font-size: 1.1rem;
+    font-size: 1.1rem;
-		text-align: center;
+    padding: 0;
-		padding: 0;
+    color: #374151;
-	}
+  }
 </style>

src/styles/thomaswilson.css

@@ -1,6 +1,7 @@
 @font-face {
     font-family: 'FivoSansModern-Regular';
     src: url('/FivoSansModern-Regular.otf');
+    font-display: swap;
 }
 
 :root {