cool fancy unimportant styling stuff

src/routes/+layout.svelte

@@ -1,12 +1,29 @@
 <script>
 	import Header from './Header.svelte';
 	import './styles.css';
+	import { onNavigate } from '$app/navigation';
+
+	onNavigate((navigation) => {
+		// @ts-ignore
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			// @ts-ignore
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 <div class="app">
 
 	<main>
 		<slot />
+		<footer>
+			&copy; 2024 Aleks Rūtiņš
+		</footer>
 	</main>
 </div>
 
@@ -14,7 +31,6 @@
 	.app {
 		display: flex;
 		flex-direction: column;
-		min-height: 100vh;
 	}
 
 	main {
@@ -34,6 +50,8 @@
 		justify-content: center;
 		align-items: center;
 		padding: 12px;
+		margin-top: 25px;
+		border-top: 1px solid var(--color-text);
 	}
 
 	footer a {

src/routes/+page.svelte

@@ -12,11 +12,10 @@
 </svelte:head>
 
 <section>
-	<h1>
+	<h1 class="welcome">
-		<span class="welcome">
+		<img src={welcome} alt="Welcome" />
-			<img src={welcome} alt="Welcome" />
-		</span>
 	</h1>
+	<p class="tagline">for mere mortals</p>
 
 	<p use:reveal class="sr__hide">
 		Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
@@ -43,18 +42,21 @@
 	}
 
 	.welcome {
-		display: block;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
 		position: relative;
 		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
 	}
 
 	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
 		display: block;
 	}
+
+	.tagline {
+		align-self: center;
+		font-style: italic;
+		margin-top: -10px;
+	}
 </style>