mobile fixes and metadata

src/lib/components/SEO.svelte

@@ -0,0 +1,36 @@
+<script>
+	// https://www.reddit.com/r/sveltejs/comments/1e1bcb6/how_you_guys_manage_metadataseo_in_svelte_kit/lcswtoq/
+	import { page } from '$app/state';
+
+	export let title = 'BISMUTH';
+	export let description =
+		'A small group of friends creating and developing all sorts of stuff together ';
+	// export let image = 'https://bismuth.win/your-logo.png';
+
+	$: title = title || 'BISMUTH';
+	$: description =
+		description || 'A small group of friends creating and developing all sorts of stuff together ';
+</script>
+
+<svelte:head>
+	<title>{title} | bismuth.win</title>
+	<meta name="description" content={description} />
+	<meta property="og_site_name" content="bismuth.win”" />
+	<meta property="og:url" content="https://bismuth.win{page.url.pathname.toString()}" />
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<!-- <meta property="og:image" content={image} /> -->
+
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta property="twitter:domain" content="“bismuth.win" />
+	<meta property="twitter:url" content="https://bismuth.win{page.url.pathname.toString()}" />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<!-- <meta name="twitter:image" content={image} /> -->
+	{@html `  <script type="application/ld+json">{
+   "@context": "https://schema.org",
+   "@type": "Website",
+   "name": "${title} | BISMUTH",
+   "url": "https//bismuth.win${page.url.pathname}"}</script>`}
+</svelte:head>

src/lib/components/navbar.svelte

@@ -97,4 +97,22 @@
 			border-color: #ff4343;
 		}
 	}
+
+	@media (max-width: 768px) {
+		nav {
+			position: fixed;
+			top: unset;
+			bottom: 0;
+			flex-direction: column;
+			height: auto;
+			padding: 0.5rem 1rem;
+		}
+
+		.linksRight {
+			position: static;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 0.5rem;
+		}
+	}
 </style>

src/routes/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import LogoOverlay from '$lib/components/logoOverlay.svelte';
+	import SEO from '$lib/components/SEO.svelte';
 	import SocialLink from '$lib/components/socialLink.svelte';
 
 	const title = 'BISMUTH';
 	const description =
 		'A small group of friends creating and developing all sorts of stuff together';
 </script>
 
+<SEO title="Home" {description} />
 <div class="flex min-h-screen flex-col items-center justify-center">
 	<h1 class="title">
 		{#each title as letter}
@@ -88,6 +90,7 @@
 			padding: 1rem 2rem;
 			background-color: white;
 			text-decoration: none;
+			text-align: center;
 			font-size: 1.5rem;
 			transition:
 				background-color 0.3s ease,
@@ -144,4 +147,26 @@
 			opacity: 1;
 		}
 	}
+
+	@media (max-width: 768px) {
+		.title {
+			font-size: 4rem;
+		}
+
+		.description {
+			font-size: 1rem;
+		}
+
+		.routes {
+			flex-direction: column;
+			align-items: center;
+
+			.route {
+				width: 100%;
+				margin: 0.5rem 0;
+				font-size: 1.2rem;
+				padding: 0.75rem 1.5rem;
+			}
+		}
+	}
 </style>

src/routes/about/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import SEO from '$lib/components/SEO.svelte';
 </script>
 
+<SEO title="About" description="About Bismuth" />
 <div class="p-8 flex flex-col items-center gap-4">
 	<h1>About Bismuth</h1>
 	<h2>

src/routes/projects/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import SEO from '$lib/components/SEO.svelte';
 </script>
 
+<SEO title="Projects" description="Projects by Bismuth" />
 <div class="p-8 flex flex-col items-center gap-4">
 	<h1>Projects</h1>
 	<h2>

src/routes/servers/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import SEO from '$lib/components/SEO.svelte';
 </script>
 
+<SEO title="Servers" description="Game servers hosted by Bismuth" />
 <div class="p-8 flex flex-col items-center gap-4">
 	<h1>Servers</h1>
 	<h2>

src/routes/team/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import SEO from '$lib/components/SEO.svelte';
+
 	interface TeamMember {
 		name: string;
 		role: string[];
@@ -33,6 +35,7 @@
 	];
 </script>
 
+<SEO title="Team" description="The team behind Bismuth" />
 <div class="p-8 flex flex-col items-center gap-4">
 	<h1>The Team</h1>
 	<h2>