feat: foundations for beautiful pages

src/app.css

@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer base {
+    @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url(/fonts/Roboto-Bold.ttf) format('truetype');
+    }
+    html {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+    }
+}

src/components/main/animatedNav.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { crossfade } from 'svelte/transition';
+	import { cubicInOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import Title from '../title.svelte';
+	const [send, receive] = crossfade({
+		duration: 3000,
+		easing: cubicInOut
+	});
+
+	export let state = 0;
+</script>
+
+{#if state === 0}
+	<div
+		out:fade={{ delay: 3000 }}
+		class="absolute flex h-screen w-screen items-center justify-center bg-[#07090f]"
+	>
+		<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-9xl">
+			<Title />
+		</div>
+	</div>
+{:else}
+	<nav class="flex w-screen justify-between p-8">
+		<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-4xl">
+			<Title />
+		</div>
+
+		<div in:fade={{ delay: 3000 }} class="flex space-x-4">
+			<slot />
+		</div>
+		<div />
+	</nav>
+{/if}

src/components/main/navLink.svelte

@@ -0,0 +1,41 @@
+<script>
+	export let href = '';
+	export let activated = false;
+</script>
+
+<a {href} class="h-full text-2xl text-white" class:active={activated}>
+	<slot />
+</a>
+
+<style>
+	a {
+		transition: all 0.3s;
+	}
+
+	a::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: black;
+	}
+
+	a:hover::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: white;
+	}
+
+	.active::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: white;
+	}
+</style>

src/components/title.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<h1 class="hero glitch layers text-center text-white" data-text="4T$">4T$</h1>

src/lib/glitch.css

@@ -1,5 +1,4 @@
 .hero {
-    font-size: clamp(40px, 10vw, 100px);
     line-height: 1;
     color: #fff;
     z-index: 2;

src/routes/+layout.svelte

@@ -1,12 +1,48 @@
 <script>
+	import { fade } from 'svelte/transition';
 	import '../app.css';
+	import '$lib/glitch.css';
+	import { onMount } from 'svelte';
+	import NavLink from '../components/main/navLink.svelte';
+	import AnimatedNav from '../components/main/animatedNav.svelte';
+	import { page } from '$app/stores';
+	import { onNavigate } from '$app/navigation';
+
+	// Animation : start at center, end up in the navbar
+	let titlePosition = 0;
+	let transitioning = false;
+
+	onMount(() => {
+		setTimeout(() => {
+			titlePosition++;
+		}, 1000);
+	});
+
+	onNavigate(() => {
+		transitioning = true;
+		setTimeout(() => {
+			transitioning = false;
+		}, 300);
+	});
 </script>
 
-<slot />
+<!-- Animation : start at center, end up in the navbar -->
+
+<AnimatedNav state={titlePosition}>
+	<!-- Add buttons for navigation -->
+	<NavLink href="/" activated={$page.url.pathname === '/'}>Home</NavLink>
+	<NavLink href="/page" activated={$page.url.pathname === '/page'}>Page</NavLink>
+</AnimatedNav>
+
+{#if !transitioning}
+	<div transition:fade={{ duration: 200 }}>
+		<slot />
+	</div>
+{/if}
 
 <style lang="postcss">
 	:global(html) {
-		background-color: theme(colors.gray.900);
+		background-color: #07090f;
 		overflow-x: hidden;
 	}
 </style>

src/routes/+page.svelte

@@ -1,7 +1 @@
-<script>
-	import '$lib/glitch.css';
-</script>
-
-<div class="w-screen">
-	<h1 class="text-center text-white hero glitch layers" data-text="4T$">4T$</h1>
-</div>
+<div class="text-white">this is home</div>

src/routes/page/+page.svelte

@@ -0,0 +1 @@
+<div class="text-white">this is page</div>