opengraph,custom colr, hatchets

src/lib/components/Footer.svelte

@@ -21,7 +21,7 @@
 			</div>
 		</div>
 		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
-			<div class="mx-auto w-5 h-5 hover:text-[#c4bef3] transition-colors">
+			<div class="mx-auto w-5 h-5 transition-colors hover:text-cirro">
 				<Heart></Heart>
 			</div>
 		</div>

src/lib/components/Header.svelte

@@ -17,4 +17,4 @@
 		</div>
 	</div>
 </div>
-<div class="w-full h-0.5 bg-[#c4bef3]"></div>
+<div class="w-full h-0.5 bg-cirro"></div>

src/routes/+layout.svelte

@@ -18,9 +18,14 @@
 	/>
 	<meta property="og:title" content={$page.data.discord.username} />
 	<meta property="og:url" content={$page.url.toString()} />
-	<meta property="og:image" content="{$page.url.toString()}background.jpg" />
-	<meta property="og:description" content="meow" />
-	<meta name="theme-color" content="#fefefe" />
+	<meta
+		property="og:image"
+		content="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
+			.avatar}.png"
+	/>
+	<meta property="og:description" content="snow leopard that likes computers." />
+	<meta property="og:site_name" content={$page.url.hostname} />
+	<meta name="theme-color" content="#c4bef3" />
 </svelte:head>
 
 <div class="w-screen h-[3.125rem]">

tailwind.config.js

@@ -5,6 +5,9 @@ export default {
 		extend: {
 			container: {
 				center: true
+			},
+			colors: {
+				cirro: '#c4bef3'
 			}
 		},
 		container: {