From 35877ae8acf4cd937da054647824617075dec4d3 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fjla@fredboniface.co.uk>
Date: Mon, 16 Mar 2026 20:31:28 +0000
Subject: [PATCH] Add LocationSearchCard and add to homepage for testing.

Run `npm run format`
---
 .gitea/workflows/build-push.yaml              |   4 +-
 .../components/ui/LocationSearchBox.svelte    | 283 ++++++++++++------
 src/lib/components/ui/Textbox.svelte          | 152 +++++-----
 src/lib/components/ui/cards/BaseCard.svelte   | 163 +++++-----
 .../ui/cards/LocationBoardCard.svelte         |  25 ++
 src/routes/+error.svelte                      |   2 +-
 src/routes/+layout.svelte                     |  16 +-
 src/routes/+layout.ts                         |   2 +-
 src/routes/+page.svelte                       |  32 +-
 src/routes/about/+page.svelte                 |   5 +-
 svelte.config.js                              |  26 +-
 11 files changed, 427 insertions(+), 283 deletions(-)
 create mode 100644 src/lib/components/ui/cards/LocationBoardCard.svelte

diff --git a/.gitea/workflows/build-push.yaml b/.gitea/workflows/build-push.yaml
index 78f4a53..44bbcbc 100644
--- a/.gitea/workflows/build-push.yaml
+++ b/.gitea/workflows/build-push.yaml
@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is building and pushing
 
 on:
   create:
-    tags: "*"
+    tags: '*'
 
 env:
   GITEA_DOMAIN: git.fjla.uk
@@ -36,4 +36,4 @@ jobs:
           push: true
           tags: |
             ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:${{ gitea.ref_name }}
-            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest
\ No newline at end of file
+            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest
diff --git a/src/lib/components/ui/LocationSearchBox.svelte b/src/lib/components/ui/LocationSearchBox.svelte
index 2cdc2f4..1fd33c6 100644
--- a/src/lib/components/ui/LocationSearchBox.svelte
+++ b/src/lib/components/ui/LocationSearchBox.svelte
@@ -1,112 +1,221 @@
 <script lang="ts">
-    import Textbox from '$lib/components/ui/Textbox.svelte';
-    import { onMount } from 'svelte';
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
 
-    interface LocationRecord {
-        n: string; // name
-        t: string; // tiploc
-        c?: string; // crs
-        s: string; // search string
-    }
+	interface LocationRecord {
+		n: string; // name
+		t: string; // tiploc
+		c?: string; // crs
+		s: string; // search string
+	}
 
-    let value = $state("");
-    let results = $state<LocationRecord[]>([]);
-    let locations: LocationRecord[] = [];
+	let { value = $bindable() } = $props();
 
-    let showResults = $state(false);
-    let selectedIndex = $state(-1);
+	let results = $state<LocationRecord[]>([]);
+	let locations: LocationRecord[] = [];
 
-    const MAX_RESULTS = 10;
+	let showResults = $state(false);
+	let selectedIndex = $state(-1);
 
-    async function loadLocations() {
-        const res = await fetch("/api/tiplocs");
-        locations = await res.json();
-    }
+	const MAX_RESULTS = 5;
 
-    onMount(loadLocations);
+	async function loadLocations() {
+		const res = await fetch('/api/tiplocs');
+		locations = await res.json();
+	}
 
-    function tokenize(query: string) {
-        return query
-            .toLowerCase()
-            .trim()
-            .split(/\s+/)
-            .filter(Boolean);
-    }
+	onMount(loadLocations);
 
-    function search(query: string) {
-        if (query.length < 3) {
-            results = [];
-            return;
-        }
+	function tokenize(query: string) {
+		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+	}
 
-        const tokens = tokenize(query);
+	function search(query: string) {
+		if (query.length < 3) {
+			results = [];
+			return;
+		}
 
-        results = locations
-            .filter(r => tokens.every(t => r.s.includes(t)))
-            .slice(0, MAX_RESULTS);
-    }
+		const tokens = tokenize(query);
+		const lowerQuery = query.toLowerCase().trim();
 
-    $effect(() => {
-        search(value);
-    });
+		results = locations
+			.filter((r) => tokens.every((t) => r.s.includes(t)))
+			.sort((a, b) => {
+				// Check if query matches CRS
+				const aIsCrs = a.c?.toLowerCase() === lowerQuery;
+				const bIsCrs = b.c?.toLowerCase() === lowerQuery;
 
-    function choose(loc: LocationRecord) {
-        value = loc.n;
-        showResults = false;
-        selectedIndex = -1;
+				// Sort matching CRS first
+				if (aIsCrs && !bIsCrs) return -1;
+				if (!aIsCrs && bIsCrs) return 1;
 
-        console.log("Selected Location: ", JSON.stringify(loc))
-    }
+				// Alphabetical Sort
+				return a.n.localeCompare(b.n);
+			})
+			.slice(0, MAX_RESULTS);
+	}
 
-    function handleKey(e: KeyboardEvent) {
-        if (!results.length) return;
+	$effect(() => {
+		search(value);
+	});
 
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
-        }
+	// Hide results when click outside of container
+	$effect(() => {
+		if (showResults) {
+			const onClick = (e: MouseEvent) => {
+				const target = e.target as HTMLElement;
+				if (!target.closest('.location-search')) {
+					showResults = false;
+				}
+			};
 
-        if (e.key === "ArrowUp") {
-            e.preventDefault();
-            selectedIndex = Math.max(selectedIndex - 1, 0);
-        }
+			document.addEventListener('click', onClick);
+			return () => document.removeEventListener('click', onClick);
+		}
+	});
 
-        if (e.key === "Enter" && selectedIndex >= 0) {
-            choose(results[selectedIndex]);
-        }
-    }
+	function choose(loc: LocationRecord) {
+		showResults = false;
+		selectedIndex = -1;
+		value = '';
+		console.log('Selected Location: ', JSON.stringify(loc));
+		goto(`/board?stn=${loc.c.toLowerCase()}`);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (!results.length) return;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+		}
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			selectedIndex = Math.max(selectedIndex - 1, 0);
+		}
+
+		if (e.key === 'Enter' && selectedIndex >= 0) {
+			choose(results[selectedIndex]);
+		}
+	}
 </script>
 
 <div class="location-search">
-    <Textbox
-        bind:value
-        placeholder="Enter Location"
-        oninput={() => showResults = true}
-        onkeydown={handleKey}
-        capital
-    />
+	<Textbox
+		bind:value
+		placeholder="Enter Location"
+		oninput={() => (showResults = true)}
+		onkeydown={handleKey}
+		capital
+	/>
 
-    {#if showResults && results.length}
-        <ul class="suggestions">
-            {#each results as loc, i}
-                <li
-                    class:selected={i === selectedIndex}
-                    onclick={() => choose(loc)}
-                >
-                    <span class="name">{loc.n}</span>
-
-                    {#if loc.c}
-                        <span class="crs">{loc.c}</span>
-                    {/if}
-                </li>
-            {/each}
-        </ul>
-    {/if}
+	{#if showResults && results.length}
+		<ul
+			id="location-results"
+			popover={showResults && results.length ? 'manual' : null}
+			role="listbox"
+			class="suggestions"
+			transition:fade={{ duration: 200 }}
+		>
+			{#each results as loc, i}
+				<li class="result-item" class:selected={i === selectedIndex} onclick={() => choose(loc)}>
+					<div class="crs-badge-container">
+						{#if loc.c}
+							<span class="crs-badge">{loc.c}</span>
+						{/if}
+					</div>
+					<div class="details">
+						<span class="name">{loc.n || loc.t}</span>
+						<span class="tiploc">{loc.t}</span>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
 </div>
 
 <style>
-    .suggestions {
-        background-color: var(--color-title);
-        color: var(--color-bg-dark);
-    }
-</style>
\ No newline at end of file
+	.location-search {
+		position: relative;
+		width: 100%;
+	}
+
+	.suggestions[popover] {
+		position: absolute;
+		inset: unset;
+		margin: 0;
+		margin-top: 3px;
+		border: none;
+		border-radius: 5px;
+		padding: 0;
+		width: 100%;
+		max-height: 350px;
+		top: 100%;
+		background-color: var(--color-title);
+		color: var(--color-bg-dark);
+		box-shadow: var(--shadow-std);
+		display: block;
+		z-index: 9999;
+	}
+
+	.suggestions:not([popover]) {
+		display: none;
+	}
+
+	.result-item {
+		font-family: 'URW Gothic', sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+		min-height: 48px;
+		transition: all 0.15s;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.result-item.selected,
+	.result-item:hover {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.crs-badge {
+		font-family: ui-monospace, monospace;
+		font-size: 1.1rem;
+		font-weight: 700;
+		background: var(--color-accent);
+		color: var(--color-title);
+		padding: 3px 6px;
+		border-radius: 10px;
+		transition: all 0.1s;
+	}
+
+	.crs-badge.empty {
+		filter: opacity(0);
+	}
+
+	.result-item:hover .crs-badge {
+		filter: brightness(1.3);
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.name {
+		font-size: 1.1rem;
+		font-weight: 700;
+		text-align: right;
+	}
+
+	.tiploc {
+		text-align: right;
+		font-size: 0.8rem;
+	}
+</style>
diff --git a/src/lib/components/ui/Textbox.svelte b/src/lib/components/ui/Textbox.svelte
index 3f38d5a..2b1c472 100644
--- a/src/lib/components/ui/Textbox.svelte
+++ b/src/lib/components/ui/Textbox.svelte
@@ -1,94 +1,94 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition';
-    import type { HTMLInputAttributes } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
-    interface Props extends HTMLInputAttributes {
-        value?: string;
-        label?: string;
-        placeholder?: string;
-        type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-        error?: string;
-        uppercase?: boolean;
-        [key: string]: any;
-    }
+	interface Props extends HTMLInputAttributes {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+		error?: string;
+		uppercase?: boolean;
+		[key: string]: any;
+	}
 
-    let {
-        value = $bindable(''),
-        label,
-        placeholder = '',
-        type = 'text',
-        error = '',
-        uppercase = false,
-        ...rest
-    }: Props = $props();
+	let {
+		value = $bindable(''),
+		label,
+		placeholder = '',
+		type = 'text',
+		error = '',
+		uppercase = false,
+		...rest
+	}: Props = $props();
 
-    let isFocussed = $state(false);
+	let isFocussed = $state(false);
 </script>
 
 <div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
-    {#if label}
-        <label for="adaptive-input">{label}</label>
-    {/if}
+	{#if label}
+		<label for="adaptive-input">{label}</label>
+	{/if}
 
-    <input
-        id="adaptive-input"
-        class:all-caps={uppercase}
-        {type}
-        {placeholder}
-        bind:value={value}
-        onfocus={() => isFocussed = true}
-        onblur={() => isFocussed = false}
-        {...rest}
-    />
+	<input
+		id="adaptive-input"
+		class:all-caps={uppercase}
+		{type}
+		{placeholder}
+		bind:value
+		onfocus={() => (isFocussed = true)}
+		onblur={() => (isFocussed = false)}
+		{...rest}
+	/>
 
-    {#if error}
-        <span class="error-message" transition:fade>{error}</span>
-    {/if}
+	{#if error}
+		<span class="error-message" transition:fade>{error}</span>
+	{/if}
 </div>
 
 <style>
-    .input-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        width: 100%;
-        font-family: 'URW Gothic', sans-serif;
-    }
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+		font-family: 'URW Gothic', sans-serif;
+	}
 
-    label {
-        font-size: 0.9rem;
-        font-weight: 400;
-        color: var(--color-title)
-    }
+	label {
+		font-size: 0.9rem;
+		font-weight: 400;
+		color: var(--color-title);
+	}
 
-    input {
-        min-height: 48px;
-        padding: 0 16px;
-        background-color: var(--color-title);
-        border: 2px solid transparent;
-        border-radius: 20px;
-        color: var(--color-bg-dark);
-        font-size: 1.5rem;
-        transition: all 0.2s ease-in-out;
-        outline: none;
-        text-align: center;
-    }
+	input {
+		min-height: 40px;
+		padding: 0 16px;
+		background-color: var(--color-title);
+		border: 2px solid transparent;
+		border-radius: 20px;
+		color: var(--color-bg-dark);
+		font-size: 1.2rem;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+		text-align: center;
+	}
 
-    .all-caps {
-        text-transform: uppercase;
-    }
+	.all-caps {
+		text-transform: uppercase;
+	}
 
-    .focussed input {
-        border-color: var(--color-bg-light);
-    }
+	.focussed input {
+		border-color: var(--color-bg-light);
+	}
 
-    .has-error input {
-        border-color: #ff4d4d;
-    }
+	.has-error input {
+		border-color: #ff4d4d;
+	}
 
-    .error-message {
-        color: #ff4d4d;
-        font-size: 1rem;
-        text-align: center;
-    }
-</style>
\ No newline at end of file
+	.error-message {
+		color: #ff4d4d;
+		font-size: 1rem;
+		text-align: center;
+	}
+</style>
diff --git a/src/lib/components/ui/cards/BaseCard.svelte b/src/lib/components/ui/cards/BaseCard.svelte
index 87a1a68..f593a84 100644
--- a/src/lib/components/ui/cards/BaseCard.svelte
+++ b/src/lib/components/ui/cards/BaseCard.svelte
@@ -1,94 +1,101 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { IconHelpCircle } from '@tabler/icons-svelte';
-    import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { slide } from 'svelte/transition';
 
-    interface Props {
-        children: Snippet;
-        header?: string;
-        helpText?: string;
-    }
+	interface Props {
+		children: Snippet;
+		header?: string;
+		helpText?: string;
+	}
 
-    let {
-        children,
-        header = "",
-        helpText,
-    }: Props = $props();
+	let { children, header = '', helpText }: Props = $props();
 
-    let showHelp = $state(false);
+	let showHelp = $state(false);
 </script>
 
 <div class="card">
-    {#if header || helpText}
-        <header class="card-header">
-            <div class="header-content">
-                {header}
-            </div>
-            {#if helpText}
-                <button
-                    type="button"
-                    class="help-toggle"
-                    onclick={() => showHelp = !showHelp}
-                    aria-label="Show Help"
-                >
-                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
-                </button>
-            {/if}
-        </header>
+	{#if header || helpText}
+		<header class="card-header">
+			<div class="header-content">
+				{header}
+			</div>
+			{#if helpText}
+				<button
+					type="button"
+					class="help-toggle"
+					onclick={() => (showHelp = !showHelp)}
+					aria-label="Show Help"
+				>
+					<IconHelpCircle
+						size={26}
+						stroke={2.25}
+						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
+					/>
+				</button>
+			{/if}
+		</header>
 
-        {#if showHelp && helpText}
-            <div class="help-drawer" transition:slide={{ duration: 400 }}>
-                <p>{helpText}</p>
-            </div>
-        {/if}
-    {/if}
+		{#if showHelp && helpText}
+			<div class="help-drawer" transition:slide={{ duration: 400 }}>
+				<p>{helpText}</p>
+			</div>
+		{/if}
+	{/if}
 
-    <div class="card-body">
-        {@render children?.()}
-    </div>
+	<div class="card-body">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
-    .card {
-        background: var(--color-accent);
-        position: relative;
-        border-radius: 20px;
-        overflow: hidden;
-        width: 95%;
-        max-width: 600px;
-        text-align: center;
-        font-family: 'URW Gothic', sans-serif;
-        color: var(--color-title);
-    }
+	.card {
+		background: var(--color-accent);
+		position: relative;
+		border-radius: 20px;
+		overflow: visible;
+		width: 95%;
+		max-width: 600px;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+		color: var(--color-brand);
+		padding: 10px 0;
+	}
 
-    .header-content { flex: 1;
-    font-size: 1.5rem; font-weight: 600; }
+	.header-content {
+		flex: 1;
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 600;
+	}
 
-    .help-toggle {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: none;
-        border: none;
-        padding: 4px;
-        cursor: help;
-        opacity: 0.6;
-        z-index: 2;
-        transition: opacity 0.2s, transform 0.2s;
-    }
+	.help-toggle {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: help;
+		opacity: 0.6;
+		z-index: 2;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
 
-    .help-toggle:hover {
-        opacity: 1;
-        transform: scale(1.1);
-    }
+	.help-toggle:hover {
+		opacity: 1;
+		transform: scale(1.1);
+	}
 
-    .help-drawer {
-        background-color: var(--color-accent);
-        padding: 4px 16px;
-        font-size: 0.95rem;
-        line-height: 1.2;
-        margin: auto;
-        border-bottom: 1px solid rgba(255,255,255,0.05);
-        color: var(--color-title);
-    }
-</style>
\ No newline at end of file
+	.help-drawer {
+		background-color: var(--color-accent);
+		padding: 4px 16px;
+		font-size: 0.95rem;
+		line-height: 1.2;
+		margin: auto;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+		color: var(--color-title);
+	}
+</style>
diff --git a/src/lib/components/ui/cards/LocationBoardCard.svelte b/src/lib/components/ui/cards/LocationBoardCard.svelte
new file mode 100644
index 0000000..9ef7e01
--- /dev/null
+++ b/src/lib/components/ui/cards/LocationBoardCard.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+
+	let locationValue = $state('');
+
+	function resetSearchBox() {
+		value = '';
+	}
+</script>
+
+<BaseCard header={'Live Arrivals & Departures'}>
+	<div class="card-content">
+		<LocationSearchBox bind:value={locationValue} />
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+</style>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 5a69b2c..779f0e5 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -58,7 +58,7 @@
 		font-size: 1.1rem;
 		color: var(--color-title);
 		max-width: 300px;
-        margin-top: 5px;
+		margin-top: 5px;
 		margin-bottom: 30px;
 	}
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a98f5c2..9d531c5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -34,7 +34,7 @@
 		if (navWidth === 0) return navItems.length;
 		const available = navWidth;
 		const totalItems = navItems.length;
-		const countWithoutMore = Math.floor(available/ ITEM_WIDTH);
+		const countWithoutMore = Math.floor(available / ITEM_WIDTH);
 
 		if (countWithoutMore >= totalItems) return totalItems;
 
@@ -128,10 +128,11 @@
 </nav>
 
 <div class="viewport-guard">
-	<img src={logoPlain} alt="OwlBoard Logo" width=100 height=100>
+	<img src={logoPlain} alt="OwlBoard Logo" width="100" height="100" />
 	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
 	<p>
-		Just as trains need the right track width, our data needs a bit more room to stay on the rails. Please expand your view to at least 300px to view the app.
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
+		Please expand your view to at least 300px to view the app.
 	</p>
 </div>
 
@@ -193,7 +194,8 @@
 		box-shadow: var(--shadow-up);
 	}
 
-	.nav-item, .more-menu-wrapper {
+	.nav-item,
+	.more-menu-wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -317,8 +319,10 @@
 			margin: auto;
 			padding-top: 30px;
 		}
-	
-		header, main, nav {
+
+		header,
+		main,
+		nav {
 			display: none;
 		}
 	}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index cf088e3..e285259 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,3 +1,3 @@
 export const prerender = true;
 export const trailingSlash = 'always';
-export const csr = true;
\ No newline at end of file
+export const csr = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d307e7a..6ec1a92 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-
-	function test() {
-		console.log('Button Clicked');
-	}
+	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
 </script>
 
-<br /><br /><br />
-<Button>Default</Button>
-<Button color={'brand'} onclick={test}>Brand</Button>
-<Button color={'accent'}>Accent</Button>
-<Textbox placeholder={"Textbox am I"} uppercase={true} error={""} />
+<div class="card-container">
+	<LocationBoardCard />
+</div>
 
-<BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
-
-<LocationSearchBox />
-
-<h2>OwlBoard</h2>
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+</style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index aafe7fa..d77c5fa 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -29,7 +29,10 @@
 		daily basis.
 	</p>
 	<p class="amble">
-Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.
+		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
+		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
+		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">
 		Some components that combine to form OwlBoard are open-source, see the <a
diff --git a/svelte.config.js b/svelte.config.js
index b017e64..0b3a44a 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -2,19 +2,19 @@ import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    kit: {
-        adapter: adapter({
-            pages: 'build',
-            assets: 'build',
-            fallback: 'index.html',
-            precompress: 'true',
-            strict: 'true'
-        }),
-        prerender: {
-            // Temporary option during testing
-            handleHttpError: 'ignore'
-        }
-    }
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: 'true',
+			strict: 'true'
+		}),
+		prerender: {
+			// Temporary option during testing
+			handleHttpError: 'ignore'
+		}
+	}
 };
 
 export default config;