Adjust 'home link' to use logo

src/routes/map/[slug]/+page.svelte

@@ -2,7 +2,9 @@
 	import RouteRow from '$lib/components/RouteRow.svelte';
 	import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.svelte';
 	import { slide } from 'svelte/transition';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
+
+	import logo from '$lib/assets/round-logo.svg';
 
 	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
 	export let data;
@@ -61,8 +63,8 @@
 <div class="map-layout">
 	<header class="top-nav">
 		<div class="nav-cluster">
-			<a href="{base}/" class="home-link" title="Back to Index">
-				<span class="home-icon">⌂</span>
+			<a href={resolve('/')} aria-label="Home" class="home-link" title="Back to Index">
+				<img src={logo} alt="OwlBoard Logo" class="nav-logo" />
 			</a>
 
 			<div class="route-stack">
@@ -149,6 +151,7 @@
 		width: 100%;
 		box-sizing: border-box;
 		top: 0;
+		height: 80px;
 		left: 0;
 		display: flex;
 		align-items: center;
@@ -171,20 +174,19 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 36px;
-		height: 36px;
-		background: #404c55;
-		border: 1px solid #334155;
-		border-radius: 8px;
-		color: #e1ebeb;
-		text-decoration: none;
-		font-size: 1.2rem;
+		width: 52px;
+		height: 52px;
 		flex-shrink: 0;
 		transition: all 0.3s ease;
 	}
 
 	.home-link:hover {
-		background: #2d2d2d;
+		transform: translateY(-1px) scale(1.05);
+		filter: brightness(1.1);
+	}
+
+	.home-link:active {
+		transform: scale(0.95);
 	}
 
 	.route-stack {
@@ -229,11 +231,7 @@
 
 		.top-nav {
 			padding: 0 2rem;
-			height: 90px;
-		}
-
-		.map-spine {
-			padding-top: 90px;
+			height: 80px;
 		}
 
 		h1 {