fix: misc fixes

src/app.css

@@ -42,7 +42,7 @@ body {
     --grey-one: #252b31;
     --grey-two: #28313b;
     --grey-three: #373e4d;
-    --grey-four: #1b1e29;
+    --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
     --grey-six: hsla(223, 14%, 15%, 0.655);
     --grey-seven: #535563;

src/lib/components/atoms/Spinner.svelte

@@ -14,8 +14,8 @@
 		content: '';
 		box-sizing: border-box;
 		position: fixed;
-		top: 48.25%;
+		top: 50%;
-		left: 48.25%;
+		left: 50%;
 		width: 50px;
 		height: 50px;
 		border-radius: 50%;

src/lib/components/molecules/Footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Contributor, Repository } from 'src/data/types';
+	import type { Repository } from 'src/data/types';
 
 	export let repositories: Repository[];
 </script>
@@ -24,10 +24,11 @@
 			<a href="/download"><h6>Download</h6></a>
 			<a href="/docs"><h6>Docs</h6></a>
 			<a href="/patches"><h6>Patches</h6></a>
-			<a href="/credits"><h6>Credits</h6></a>
+			<a href="/contributors"><h6>Contributors</h6></a>
 		</div>
-		<div class="link-column">
+		{#if repositories.length}
-			<h5>Repos</h5>
+			<div class="link-column">
+				<h5>Repos</h5>
 				{#each repositories as { name }}
 					<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
 						<div>
@@ -42,7 +43,8 @@
 						</div>
 					</a>
 				{/each}
-		</div>
+			</div>
+		{/if}
 		<div class="link-column">
 			<!-- to replace -->
 			<h5>Socials</h5>
@@ -57,8 +59,6 @@
 </footer>
 
 <style>
-
-
 	footer {
 		margin: 4rem 0 5rem 0;
 		margin-inline: auto;
@@ -95,7 +95,7 @@
 
 	.links-container {
 		display: flex;
-		gap: 5rem;
+		gap: 4rem;
 	}
 
 	.link-column {

src/lib/components/molecules/PatchCell.svelte

@@ -26,7 +26,8 @@
 					.replace(/Microg/g, 'MicroG')
 					.replace(/Hdr/g, 'HDR')
 					.replace(/Sponsorblock/g, 'SponsorBlock')
-					.replace(/Tiktok/g, 'TikTok')}
+					.replace(/Tiktok/g, 'TikTok')
+					.replace(/Vr/g, 'VR')}
 			</h1>
 		</div>
 

src/routes/+error.svelte

@@ -1,37 +1,35 @@
 <script lang="ts">
-  import Navigation from '$lib/components/atoms/NavButton.svelte';
+	import Navigation from '$lib/components/atoms/NavButton.svelte';
-  import { page } from '$app/stores';
+	import { page } from '$app/stores';
 
-  $: status = $page.status;
+	$: status = $page.status;
 </script>
 
 <section class="error">
-  <h1>{status}</h1>
+	<h1>{status}</h1>
-  {#if status == 500}
+	{#if status == 500}
-	  <p>
+		<p>
-      {$page.error.message}
+			{$page.error.message}
-    </p>
+		</p>
-  {:else if status == 404}
+	{:else if status == 404}
-    <p>
+		<p>That page received a cease and desist letter from a multi-billion dollar tech company.</p>
-      That page received a cease and desist letter from a multi-billion dollar tech company.
+		<br />
-    </p>
-    <br/>
 		<Navigation href="/" is_selected={() => true}>Home</Navigation>
-  {/if}
+	{/if}
 </section>
 
 <style>
-.error {
+	.error {
-  padding-top: 5rem;
+		padding-top: 5rem;
-  text-align: center;
+		text-align: center;
-}
+	}
 
-h1 {
+	h1 {
-  font-size: 10rem;
+		font-size: 10rem;
-  color: var(--accent-color);
+		color: var(--accent-color);
-}
+	}
-p {
+	p {
-  font-size: 5ch;
+		font-size: 5ch;
-  color: var(--white);
+		color: var(--white);
-}
+	}
 </style>

src/routes/+layout.svelte

@@ -38,7 +38,6 @@
 	<meta name="twitter:image" itemprop="image" content="/embed.png" />
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="theme-color" content="#0f111a" />
-	<title>ReVanced</title>
 </svelte:head>
 
 <NavHost />

src/routes/+page.svelte

@@ -5,6 +5,12 @@
 	import Wave from '$lib/components/atoms/Wave.svelte';
 </script>
 
+<svelte:head>
+	<title>ReVanced</title>
+	<meta content="ReVanced" name="og:title" />
+	<meta content="ReVanced" name="twitter:title" />
+</svelte:head>
+
 <main>
 	<div class="wrap">
 		<div class="wrappezoid">

src/routes/contributors/+page.svelte

@@ -12,6 +12,12 @@
   export let data: PageData;
 </script>
 
+<svelte:head>
+	<title>ReVanced | Contributors</title>
+	<meta content="ReVanced | Contributors" name="og:title" />
+	<meta content="ReVanced | Contributors" name="twitter:title" />
+</svelte:head>
+
 <main>
 	<div class="wrapper">
 		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>

src/routes/docs/+page.svelte

@@ -5,6 +5,12 @@
 	import Button from '$lib/components/atoms/Button.svelte';
 </script>
 
+<svelte:head>
+	<title>ReVanced | Docs</title>
+	<meta content="ReVanced | Docs" name="og:title" />
+	<meta content="ReVanced | Docs" name="twitter:title" />
+</svelte:head>
+
 <main in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
 	<div class="menu">
 		<div class="doc-section-selected">

src/routes/patches/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { PageData } from './$types';
+	import type { PageData } from './$types';
 
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
 	import type { CompatiblePackage } from 'src/data/types';
-  import { patches as api_patches } from '../../data/api';
+	import { patches as api_patches } from '../../data/api';
 
 	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
 	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
@@ -13,8 +13,8 @@
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
 	export let data: PageData;
-  // Needed when someone navigates directly to the page.
+	// Needed when someone navigates directly to the page.
-  api_patches.init(data);
+	api_patches.init(data);
 
 	$: ({ patches, packages } = $api_patches);
 
@@ -31,9 +31,9 @@
 </script>
 
 <svelte:head>
-	<title>Revanced - Patches</title>
+	<title>ReVanced | Patches</title>
-	<meta content="Revanced - Patches" name="og:title" />
+	<meta content="ReVanced | Patches" name="og:title" />
-	<meta content="Revanced - Patches" name="twitter:title" />
+	<meta content="ReVanced | Patches" name="twitter:title" />
 </svelte:head>
 
 <main>