From d7f6d957b7dd7af79a42afc419051d05d6c2bd3e Mon Sep 17 00:00:00 2001
From: Fred Boniface <fjla@fredboniface.co.uk>
Date: Tue, 10 Mar 2026 23:39:08 +0000
Subject: [PATCH] Add 'About' page

---
 src/lib/global.css            | 26 ++++++++++++
 src/routes/+layout.svelte     | 33 ++++++---------
 src/routes/about/+page.svelte | 75 ++++++++++++++++++++++++++++++++++-
 3 files changed, 113 insertions(+), 21 deletions(-)

diff --git a/src/lib/global.css b/src/lib/global.css
index 2a642c1..c8718dd 100644
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -44,6 +44,20 @@
     font-display: swap;
 }
 
+	:root {
+		/* Brand Colours */
+		--color-brand: #4fd1d1;
+		--color-accent: #3c6f79;
+		--color-title: #ebebeb;
+		--color-bg-light: #404c55;
+		--color-bg-dark: #2b343c;
+		
+		/* Shadows */
+		--color-shadow: hsla(210, 20%, 5%, 0.35);
+		--shadow-std: 0 4px 12px var(--color-shadow);
+		--shadow-up: 0 -4px 12px var(--color-shadow);
+	}
+
 body {
     margin: 0;
     padding: 0;
@@ -52,4 +66,16 @@ body {
     -webkit-font-smoothing: antialiased;
     -mos-osx-font-smoothing: grayscale;
     overflow-x: hidden;
+}
+
+a {
+    color: var(--color-brand);
+}
+
+a:visited {
+    color: var(--color-brand);
+}
+
+a:hover {
+    color: var(--color-accent);
 }
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c7382d6..e24f375 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -58,7 +58,7 @@
 	   >
 	   		<item.icon
 				size={24}
-				stroke={isActive ? 2.5 : 2}
+				stroke={isActive ? 2 : 1.5}
 				class="nav-icon"
 			/>
 
@@ -68,20 +68,6 @@
 </nav>
 
 <style>
-	:root {
-		/* Brand Colours */
-		--color-brand: #4fd1d1;
-		--color-accent: #3c6f79;
-		--color-title: #ebebeb;
-		--color-bg-light: #404c55;
-		--color-bg-dark: #2b343c;
-		
-		/* Shadows */
-		--color-shadow: hsla(210, 20%, 5%, 0.35);
-		--shadow-std: 0 4px 12px var(--color-shadow);
-		--shadow-up: 0 -4px 12px var(--color-shadow);
-	}
-
 		header {
 		top: 0;
 		height: 80px;
@@ -100,8 +86,9 @@
 	}
 
 	.page-title {
-		font-family: 'URW Gothic' sans-serif;
+		font-family: 'URW Gothic', sans-serif;
 		font-weight: 600;
+		font-style: normal;
 		margin-left: 5px;
 		padding-bottom: 2px;
 		color: var(--color-title);
@@ -138,6 +125,7 @@
 	}
 
 	.nav-item {
+		display: flex;
 		flex: 1;
 		flex-direction: column;
 		align-items: center;
@@ -145,7 +133,7 @@
 		text-decoration: none;
 		position:  relative;
 		height: 100%;
-		color: rgba(255,255,255,0.4);
+		color: var(--color-title);
 		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
@@ -165,10 +153,15 @@
 		box-shadow: var(--shadow-std);
 	}
 
+	.nav-item.active .label {
+		font-weight: 600;
+	}
+
 	.label {
-		font-size: 0.65rem;
-		font-weight: 700;
+		font-size: 0.85rem;
+		font-family: 'URW Gothic', sans-serif;
+		font-weight: 400;
 		margin-top: 4px;
-		letter-spacing: 0.2rem;
+		letter-spacing: 0.05rem;
 	}
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 4d28455..0d731b2 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,2 +1,75 @@
 <script lang="ts">
-</script>
\ No newline at end of file
+    import logo from '$lib/assets/round-logo.svg'
+
+    let isSpinning = $state(false);
+
+    function handleLogoTap() {
+        if (isSpinning) return;
+        isSpinning = true;
+        setTimeout(() => isSpinning = false, 800);
+    }
+</script>
+
+<div class="logo-container">
+    <img class="logo" src={logo} alt="OwlBoard Logo" onclick={handleLogoTap} class:animate={isSpinning} />
+</div>
+
+<section class="about">
+    <p class="copy">
+        &copy; 2022-2026 Frederick Boniface
+    </p>
+    <p class="tagline">
+        Created by train crew, for train crew
+    </p>
+    <p class="amble">
+        OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger departure boards.  The aim was to provide fast and easy access to the information we need on a daily basis.
+    </p>
+    <p class="opensource">
+        Some components that combine to form OwlBoard are open-source, see the <a href="https://git.fjla.uk" target="_blank" rel="noopener">Git reposititories</a> for more info.
+    </p>
+</section>
+
+<section class="data-sourcing">
+    <p>
+        Data is sourced from multiple providers, including <a href="https://nationalrail.co.uk" target="_blank" rel="noopener noreferrer">National Rail Enquiries</a> and Network Rail along side OwlBoard's own data
+    </p>
+</section>
+
+<style>
+    .logo-container {
+        width: 100%;
+        text-align: center;
+    }
+
+    @keyframes owl-spin {
+        0% {transform: rotate(0deg);}
+        15% {transform: rotate(-20deg);}
+        100% {transform: rorate(360deg);}
+    }
+
+    .logo {
+        padding-top: 25px;
+        margin: auto;
+        height: auto;
+        width: clamp(80px, 20vw, 200px);
+    }
+
+    .logo.animate {
+        animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    }
+
+    section {
+        margin: auto;
+        width: 75%;
+        font-family: 'URW Gothic', sans-serif;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+
+    .tagline {
+        font-weight: 600;
+        font-style: italic;
+    }
+</style>
\ No newline at end of file