From c60a0a77315f0ef669dff121f2204c735a0f9936 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Sun, 25 Dec 2022 01:46:45 -0500
Subject: [PATCH] refactor: restructure folder layout

---
 src/{app.css => app.scss}                     |  51 ++-
 src/data/api/index.ts                         |   2 +-
 .../atoms => layout/Hero}/HeroImage.svelte    |   2 +-
 .../atoms => layout/Hero}/SocialButton.svelte |   0
 .../Hero}/SocialHost.svelte                   |   2 +-
 .../atoms => layout/Navbar}/NavButton.svelte  |  41 +--
 src/layout/Navbar/NavHost.svelte              | 332 ++++++++++++++++++
 src/lib/components/{atoms => }/Picture.svelte |   4 +-
 src/lib/components/{atoms => }/Spinner.svelte |   0
 src/lib/components/{atoms => }/Svg.svelte     |   0
 .../{molecules => TreeView}/TreeMenu.svelte   |   0
 src/lib/components/{atoms => }/Wave.svelte    |   0
 .../molecules/MobileDropdown.svelte           |  17 -
 src/lib/components/molecules/NavHost.svelte   | 159 ---------
 src/lib/components/organisms/Hero.svelte      |  77 ----
 src/{data => lib}/types.ts                    |   0
 src/lib/utils.ts                              |  60 +++-
 src/routes/+error.svelte                      |   2 +-
 src/routes/+layout.svelte                     |  39 +-
 src/routes/+layout.ts                         |  16 +-
 src/routes/+page.svelte                       |   8 +-
 src/routes/contributors/+page.svelte          |  35 +-
 src/routes/contributors/+page.ts              |   3 +-
 src/routes/docs/+layout.server.ts             |   2 +-
 src/routes/docs/+layout.svelte                |   4 +-
 .../atoms => routes/docs}/DocsNavNode.svelte  |   2 +-
 .../docs}/DocsNavTree.svelte                  |   6 +-
 src/routes/docs/[...slug]/+page.server.ts     |  16 +-
 src/routes/docs/[...slug]/+page.svelte        |  15 +-
 src/{lib => routes/docs}/documentation.scss   |   1 -
 .../docs}/documentation.server.ts             |   1 -
 .../docs}/documentation.shared.ts             |   0
 src/routes/download/+page.svelte              |  34 +-
 src/routes/download/+page.ts                  |   4 +-
 src/routes/patches/+page.svelte               |  20 +-
 src/routes/patches/+page.ts                   |   3 +-
 svelte.config.js                              |   9 +-
 tsconfig.json                                 |   9 +-
 vite.config.js                                |  12 +-
 39 files changed, 578 insertions(+), 410 deletions(-)
 rename src/{app.css => app.scss} (74%)
 rename src/{lib/components/atoms => layout/Hero}/HeroImage.svelte (92%)
 rename src/{lib/components/atoms => layout/Hero}/SocialButton.svelte (100%)
 rename src/{lib/components/molecules => layout/Hero}/SocialHost.svelte (92%)
 rename src/{lib/components/atoms => layout/Navbar}/NavButton.svelte (58%)
 create mode 100644 src/layout/Navbar/NavHost.svelte
 rename src/lib/components/{atoms => }/Picture.svelte (88%)
 rename src/lib/components/{atoms => }/Spinner.svelte (100%)
 rename src/lib/components/{atoms => }/Svg.svelte (100%)
 rename src/lib/components/{molecules => TreeView}/TreeMenu.svelte (100%)
 rename src/lib/components/{atoms => }/Wave.svelte (100%)
 delete mode 100644 src/lib/components/molecules/MobileDropdown.svelte
 delete mode 100644 src/lib/components/molecules/NavHost.svelte
 delete mode 100644 src/lib/components/organisms/Hero.svelte
 rename src/{data => lib}/types.ts (100%)
 rename src/{lib/components/atoms => routes/docs}/DocsNavNode.svelte (93%)
 rename src/{lib/components/molecules => routes/docs}/DocsNavTree.svelte (78%)
 rename src/{lib => routes/docs}/documentation.scss (99%)
 rename src/{lib => routes/docs}/documentation.server.ts (99%)
 rename src/{lib => routes/docs}/documentation.shared.ts (100%)

diff --git a/src/app.css b/src/app.scss
similarity index 74%
rename from src/app.css
rename to src/app.scss
index 15766a6..275d04e 100644
--- a/src/app.css
+++ b/src/app.scss
@@ -4,7 +4,7 @@
     box-sizing: inherit;
     margin: 0;
     padding: 0;
-    font-family: "Manrope", sans-serif;
+    font-family: var(--main-font);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
@@ -29,7 +29,7 @@ body {
 
 .wrapper {
     margin-inline: auto;
-    width: min(95%, 80rem);
+    width: min(90%, 80rem);
     margin-top: 7rem;
 }
 
@@ -37,18 +37,20 @@ body {
     --main-font: "Manrope", sans-serif;
     --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
     --white: hsl(206, 100%, 94%);
-    --accent-color: #9fd5ff;
-    --accent-color-two: hsl(208, 29%, 82%);
-    --accent-low-opacity: #9ed7ff50;
+    --accent-color: hsl(206, 100%, 81%);
+    --accent-color-two: hsl(208, 28%, 82%);
+    --accent-low-opacity: hsla(205, 100%, 81%, 0.1);
     --bg-color: hsl(252, 10%, 11%);
-    --grey-one: #252b31;
-    --grey-two: #28313b;
-    --grey-three: #373e4d;
-    --grey-four: #182244;
+    --grey-one: hsl(210, 14%, 17%);
+    --grey-two: hsl(212, 19%, 19%);
+    --grey-three: hsl(221, 17%, 26%);
+    --grey-four: hsl(226, 48%, 18%);
     --grey-five: hsl(208, 30%, 75%);
-    --grey-six: #202126;
+    --grey-six: hsl(230, 7%, 13%);
     --grey-seven: hsl(240, 9%, 13.5%);
     --grey-eight: hsla(207, 30%, 75%, 0.577);
+    --grey-nine: hsla(240, 6%, 7%, 0.3);
+    --grey-ten: hsl(230, 9.5%, 17%);
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -63,14 +65,13 @@ h1 {
     line-height: 4rem;
     font-size: 3.5rem;
     font-weight: 700;
-    letter-spacing: -0.03em;
+    letter-spacing: -0.025em;
 }
 
 h2 {
     color: var(--grey-five);
-
-    font-size: 2.25rem;
-    letter-spacing: -0.05rem;
+    font-size: 2.5rem;
+    letter-spacing: -0.04rem;
     font-weight: 600;
 }
 
@@ -104,7 +105,24 @@ h6 {
 p {
     color: var(--grey-five);
     font-weight: 400;
-    font-size: 1rem;
+    font-size: 0.95rem;
+    letter-spacing: 0.02rem;
+    line-height: 1.875rem;
+}
+
+@media screen and (max-width: 768px) {
+    h1 {
+        font-size: 2.6rem;
+        line-height: 3.75rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+    }
+
+    p {
+        font-size: 0.875rem;
+    }
 }
 
 /*---------------*/
@@ -139,7 +157,6 @@ input {
     color: var(--accent-color-two);
 }
 
-
 input:focus {
     outline: 1px solid var(--accent-color);
-}
\ No newline at end of file
+}
diff --git a/src/data/api/index.ts b/src/data/api/index.ts
index 9a47ae9..ea640e1 100644
--- a/src/data/api/index.ts
+++ b/src/data/api/index.ts
@@ -97,7 +97,7 @@ export class API<T> implements Readable<T> {
 }
 
 // API Endpoints
-import type { Patch, Repository, Tool } from '../types';
+import type { Patch, Repository, Tool } from '../../utils/types';
 import { dev_log } from '$lib/utils';
 
 export type ReposData = Repository[];
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/layout/Hero/HeroImage.svelte
similarity index 92%
rename from src/lib/components/atoms/HeroImage.svelte
rename to src/layout/Hero/HeroImage.svelte
index 2c810b7..d1f3e02 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/layout/Hero/HeroImage.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Picture from './Picture.svelte';
+  import Picture from '$lib/components/Picture.svelte';
   import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
 </script>
 
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/layout/Hero/SocialButton.svelte
similarity index 100%
rename from src/lib/components/atoms/SocialButton.svelte
rename to src/layout/Hero/SocialButton.svelte
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/layout/Hero/SocialHost.svelte
similarity index 92%
rename from src/lib/components/molecules/SocialHost.svelte
rename to src/layout/Hero/SocialHost.svelte
index baecf40..c6074df 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/layout/Hero/SocialHost.svelte
@@ -1,5 +1,5 @@
 <script>
-	import SocialButton from '../atoms/SocialButton.svelte';
+	import SocialButton from './SocialButton.svelte';
 </script>
 
 <div class="social-host">
diff --git a/src/lib/components/atoms/NavButton.svelte b/src/layout/Navbar/NavButton.svelte
similarity index 58%
rename from src/lib/components/atoms/NavButton.svelte
rename to src/layout/Navbar/NavButton.svelte
index 4c29a7c..851df0c 100644
--- a/src/lib/components/atoms/NavButton.svelte
+++ b/src/layout/Navbar/NavButton.svelte
@@ -1,14 +1,12 @@
-<script>
-	import RouterEvents from '../../../data/RouterEvents';
-	export let href = '/';
-	export let is_selected = (target_url) => href === target_url;
+<script lang="ts">
+	import { page } from '$app/stores';
+	export let href: string;
 </script>
 
-<a data-sveltekit-prefetch {href}>
-	<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
-		<h5>
-			<slot />
-		</h5>
+<a data-sveltekit-preload-data {href}>
+	<!-- Check if href is equal to the first path -->
+	<li class:selected={href === '/' + $page.url.pathname.split('/')[1]}>
+		<span><slot /></span>
 	</li>
 </a>
 
@@ -38,35 +36,38 @@
 		border-radius: 10px;
 	}
 
+	span {
+		font-weight: 400;
+		font-size: 0.9rem;
+		letter-spacing: 0.02rem;
+		color: var(--grey-five);
+	}
+
 	li:hover {
 		color: var(--white);
 		background-color: var(--grey-one);
 	}
 
 	li.selected {
-		background-color: var(--grey-one);
+		background-color: var(--accent-low-opacity);
 		color: var(--accent-color);
 	}
 
-	li.selected h5 {
+	li.selected span {
 		color: var(--accent-color);
 	}
 
 	@media (max-width: 768px) {
 		li {
-			padding: 1rem 1.5rem;
+			padding: 1rem 1.25rem;
 			text-align: left;
 			justify-content: left;
-			border-radius: 16px;
-			font-size: 1.2rem;
+			border-radius: 100px;
 		}
 
-		li.selected {
-			background-color: var(--accent-color);
-		}
-
-		li.selected h5 {
-			color: var(--grey-four);
+		span {
+			font-size: 1rem;
+			font-weight: 500;
 		}
 	}
 </style>
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
new file mode 100644
index 0000000..a2ceb18
--- /dev/null
+++ b/src/layout/Navbar/NavHost.svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { horizontalSlide } from '$lib/utils';
+	import { fade } from 'svelte/transition';
+	import { expoOut } from 'svelte/easing';
+
+	import Navigation from './NavButton.svelte';
+	import Svg from '$lib/components/Svg.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import Button from '$lib/components/Button.svelte';
+
+	import { clear_and_reload } from '$data/api/cache';
+	import * as settings from '$data/api/settings';
+	import RouterEvents from '$data/RouterEvents';
+
+	let url = settings.api_base_url();
+
+	function save() {
+		settings.set_api_base_url(url);
+		clear_and_reload();
+	}
+
+	function reset() {
+		url = settings.default_base_url;
+	}
+
+	let menuOpen = false;
+	let modalOpen = false;
+	let y: number;
+
+	onMount(() => {
+		return RouterEvents.subscribe((event) => {
+			if (event.navigating) {
+				menuOpen = false;
+			}
+		});
+	});
+</script>
+
+<svelte:window bind:scrollY={y} />
+
+<nav class:scrolled={y > 10}>
+	<button class="menu-btn mobile" on:click={() => (menuOpen = !menuOpen)} class:open={menuOpen}>
+		<span class="menu-btn__burger" />
+	</button>
+	<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
+
+	<div class="desktop">
+		<div id="main-navigation">
+			<div class="nav-buttons">
+				<Navigation href="/">Home</Navigation>
+				<Navigation href="/download">Download</Navigation>
+				<Navigation href="/patches">Patches</Navigation>
+				<div hidden>
+					<!-- This is just temporary so the build doesn't fail -->
+					<Navigation href="/docs">Docs</Navigation>
+				</div>
+				<Navigation href="/contributors">Contributors</Navigation>
+			</div>
+		</div>
+		<div id="secondary">
+			<button on:click={() => (modalOpen = !modalOpen)}>
+				<Svg viewBoxHeight={24} svgHeight={20}>
+					<path
+						d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+					/>
+				</Svg>
+			</button>
+		</div>
+	</div>
+
+	{#if menuOpen}
+		<div class="mobile">
+			<div
+				class="nav-wrapper"
+				transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
+			>
+				<div id="main-navigation">
+					<div class="nav-buttons">
+						<Navigation href="/">Home</Navigation>
+						<Navigation href="/download">Download</Navigation>
+						<Navigation href="/patches">Patches</Navigation>
+						<div hidden>
+							<!-- This is just temporary so the build doesn't fail -->
+							<Navigation href="/docs">Docs</Navigation>
+						</div>
+						<Navigation href="/contributors">Contributors</Navigation>
+					</div>
+				</div>
+				<div id="secondary-navigation">
+					<button on:click={() => (modalOpen = !modalOpen)}>
+						<Svg viewBoxHeight={24} svgHeight={20}>
+							<path
+								d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+							/>
+						</Svg>
+					</button>
+				</div>
+			</div>
+			<div class="overlay" transition:fade={{ duration: 350 }} />
+		</div>
+	{/if}
+</nav>
+
+<!-- settings -->
+<Modal bind:modalOpen>
+	<div class="settings-menu">
+		<h3>Settings</h3>
+		<p>Configure the website's API. Defaults to ReVanced.</p>
+		<div id="settings-content">
+			<div class="input-wrapper">
+				<input name="api-url" type="text" bind:value={url} />
+				<button id="button-reset" on:click={reset}>
+					<Svg viewBoxHeight={48} svgHeight={24}>
+						<path
+							d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
+						/>
+					</Svg>
+				</button>
+			</div>
+			<div class="buttons">
+				<Button kind="tertiary" on:click={clear_and_reload}>Clear cache</Button>
+				<Button kind="tertiary" on:click={save}>Save</Button>
+			</div>
+		</div>
+	</div>
+</Modal>
+
+<style>
+	path {
+		fill: var(--grey-five);
+	}
+
+	button:hover path {
+		fill: var(--accent-color-two);
+	}
+
+	button {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.settings-menu h3 {
+		text-align: center;
+		margin-bottom: 1rem;
+	}
+	.settings-menu p {
+		margin-bottom: 1.25rem;
+	}
+
+	.input-wrapper {
+		margin-bottom: 0.75rem;
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+	}
+
+	.buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 2rem;
+		margin-top: 2rem;
+	}
+
+	input {
+		width: 100%;
+		padding-right: 3rem;
+	}
+
+	#button-reset {
+		position: absolute;
+		right: 12px;
+		top: 14px;
+	}
+
+	nav {
+		position: fixed;
+		top: 0;
+		display: flex;
+		gap: 2rem;
+		justify-content: space-between;
+		align-items: center;
+		padding: 1rem 2rem;
+		z-index: 666;
+		height: 70px;
+		background-color: var(--grey-seven);
+		width: 100%;
+	}
+
+	.nav-wrapper {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	#main-navigation,
+	#secondary-navigation {
+		align-items: center;
+		display: flex;
+		gap: 2rem;
+	}
+
+	a {
+		display: flex;
+	}
+	
+	img {
+		height: 22px;
+	}
+
+	.nav-buttons {
+		display: flex;
+		gap: 1rem;
+	}
+
+	.scrolled {
+		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+	}
+
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.3);
+		z-index: 88;
+	}
+
+	.desktop {
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+		display: flex;
+	}
+
+	@media (max-width: 768px) {
+		.desktop {
+			display: none;
+		}
+
+		nav {
+			justify-content: normal;
+		}
+
+		.nav-wrapper {
+			flex-direction: column;
+			gap: 0.5rem;
+			height: 100vh;
+			margin: 0 auto;
+			position: fixed;
+			width: 20rem;
+			top: 0px;
+			border-radius: 0px 24px 24px 0px;
+			left: 0px;
+			background-color: var(--grey-seven);
+			padding: 1rem;
+			padding-top: 6rem;
+			z-index: 100;
+		}
+
+		.nav-buttons {
+			flex-direction: column;
+			gap: 0.5rem;
+			width: 100%;
+		}
+
+		#secondary-navigation {
+			z-index: 100;
+			padding: 16px;
+		}
+	}
+
+	/* Hamburger mmm yum */
+	@media screen and (min-width: 768px) {
+		.mobile {
+			display: none !important;
+		}
+	}
+	.menu-btn {
+		user-select: none;
+		position: relative;
+		display: flex;
+		height: 50px;
+		z-index: 999;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+	.menu-btn__burger {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.menu-btn__burger,
+	.menu-btn__burger::before,
+	.menu-btn__burger::after {
+		width: 24px;
+		height: 2px;
+		background: var(--grey-five);
+		transition: all 0.3s var(--bezier-one);
+	}
+
+	.menu-btn__burger::before,
+	.menu-btn__burger::after {
+		content: '';
+		position: absolute;
+	}
+	.menu-btn__burger::before {
+		transform: translateY(-6.5px);
+	}
+	.menu-btn__burger::after {
+		transform: translateY(6.5px);
+	}
+	/* ANIMATION */
+	.menu-btn.open .menu-btn__burger {
+		transform: translateX(-10px);
+		background: transparent;
+		box-shadow: none;
+	}
+	.menu-btn.open .menu-btn__burger::before {
+		transform: rotate(45deg) translate(10px, -10px);
+	}
+	.menu-btn.open .menu-btn__burger::after {
+		transform: rotate(-45deg) translate(10px, 10px);
+	}
+</style>
diff --git a/src/lib/components/atoms/Picture.svelte b/src/lib/components/Picture.svelte
similarity index 88%
rename from src/lib/components/atoms/Picture.svelte
rename to src/lib/components/Picture.svelte
index a7631fa..ceb97b0 100644
--- a/src/lib/components/atoms/Picture.svelte
+++ b/src/lib/components/Picture.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   // See: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#picture
   export let data;
-  export let alt;
+  export let alt: string;
 </script>
 
 <picture>
diff --git a/src/lib/components/atoms/Spinner.svelte b/src/lib/components/Spinner.svelte
similarity index 100%
rename from src/lib/components/atoms/Spinner.svelte
rename to src/lib/components/Spinner.svelte
diff --git a/src/lib/components/atoms/Svg.svelte b/src/lib/components/Svg.svelte
similarity index 100%
rename from src/lib/components/atoms/Svg.svelte
rename to src/lib/components/Svg.svelte
diff --git a/src/lib/components/molecules/TreeMenu.svelte b/src/lib/components/TreeView/TreeMenu.svelte
similarity index 100%
rename from src/lib/components/molecules/TreeMenu.svelte
rename to src/lib/components/TreeView/TreeMenu.svelte
diff --git a/src/lib/components/atoms/Wave.svelte b/src/lib/components/Wave.svelte
similarity index 100%
rename from src/lib/components/atoms/Wave.svelte
rename to src/lib/components/Wave.svelte
diff --git a/src/lib/components/molecules/MobileDropdown.svelte b/src/lib/components/molecules/MobileDropdown.svelte
deleted file mode 100644
index a0f5ded..0000000
--- a/src/lib/components/molecules/MobileDropdown.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-import { slide } from 'svelte/transition';
-</script>
-
-<div transition:slide>
-  <slot />
-</div>
-
-<style>
-  div {
-    position: fixed;
-    width: 100vw;
-    top: 70px;
-    z-index: 999;
-    background-color: var(--grey-seven);
-  }
-</style>
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
deleted file mode 100644
index b10c5c5..0000000
--- a/src/lib/components/molecules/NavHost.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script lang="ts">
-	import Navigation from '../atoms/NavButton.svelte';
-	import { onMount } from 'svelte';
-	import RouterEvents from '../../../data/RouterEvents';
-	import Svg from '../atoms/Svg.svelte';
-	import Modal from '../atoms/Modal.svelte';
-
-	import * as settings from '../../../data/api/settings';
-	import { clear_and_reload } from '../../../data/api/cache';
-	import Button from '../atoms/Button.svelte';
-
-	let url = settings.api_base_url();
-
-	function save() {
-		settings.set_api_base_url(url);
-		clear_and_reload();
-	}
-
-	function reset() {
-		url = settings.default_base_url;
-	}
-
-	let menuOpen = false;
-	let modalOpen = false;
-	let y: number;
-
-	onMount(() => {
-		return RouterEvents.subscribe((event) => {
-			if (event.navigating) {
-				menuOpen = false;
-			}
-		});
-	});
-</script>
-
-<!-- give me a bit, ill add back mobile nav -->
-<nav class:scrolled={y > 10}>
-	<div id="left-side">
-		<img src="/logo.svg" id="logo" alt="ReVanced Logo" />
-		<div class="nav-buttons">
-			<Navigation href="/">Home</Navigation>
-			<Navigation href="/download">Download</Navigation>
-			<Navigation href="/patches">Patches</Navigation>
-			<div hidden>
-				<!-- This is just temporary so the build doesn't fail -->
-				<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
-					>Docs</Navigation
-				>
-			</div>
-			<Navigation href="/contributors">Contributors</Navigation>
-		</div>
-	</div>
-	<div id="right-side">
-		<button on:click={() => (modalOpen = !modalOpen)}>
-			<Svg viewBoxHeight={24} svgHeight={20}>
-				<path
-					d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-				/>
-			</Svg>
-		</button>
-	</div>
-</nav>
-
-<!-- settings -->
-<Modal bind:modalOpen>
-	<div class="settings-menu">
-		<h3>Backend</h3>
-		<h6>API URL</h6>
-		<div id="content">
-			<div class="input-wrapper">
-				<input name="api-url" type="text" bind:value={url} />
-				<button class="button-reset" on:click={reset}>
-					<Svg viewBoxHeight={48} svgHeight={24}>
-						<path
-							d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
-						/>
-					</Svg>
-				</button>
-			</div>
-			<div class="buttons">
-				<Button kind="primary" on:click={save}>Save</Button>
-				<Button on:click={clear_and_reload}>Clear Cache</Button>
-			</div>
-		</div>
-	</div>
-</Modal>
-
-<svelte:window bind:scrollY={y} />
-
-<style>
-	path {
-		fill: var(--grey-five);
-	}
-	button:hover path {
-		fill: var(--accent-color-two);
-	}
-
-	button {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.settings-menu h3 {
-		margin-bottom: 0.75rem;
-	}
-	.settings-menu h6 {
-		margin-bottom: 0.5rem;
-	}
-
-	.input-wrapper {
-		margin-bottom: 0.75rem;
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.buttons {
-		display: flex;
-		gap: 0.75rem;
-	}
-	input {
-		width: 90%;
-	}
-	nav {
-		position: fixed;
-		top: 0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1rem 2rem;
-		z-index: 666;
-		height: 70px;
-		background-color: var(--grey-seven);
-		width: 100%;
-	}
-
-	#left-side,
-	#right-side {
-		align-items: center;
-		display: flex;
-		gap: 2rem;
-	}
-
-	img {
-		height: 24px;
-	}
-	.nav-buttons {
-		display: flex;
-		gap: 1rem;
-	}
-
-	.scrolled {
-		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-	}
-</style>
diff --git a/src/lib/components/organisms/Hero.svelte b/src/lib/components/organisms/Hero.svelte
deleted file mode 100644
index 27f4878..0000000
--- a/src/lib/components/organisms/Hero.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-	import Button from '$lib/components/atoms/Button.svelte';
-</script>
-
-<section class="hero">
-	<div class="hero-text">
-		<h5>ANDROID APP PATCHER</h5>
-		<h1>
-			Continuing the <br />legacy of <span>Vanced.</span>
-		</h1>
-		<h4>
-			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
-		</h4>
-
-		<div class="hero-buttons">
-			<Button icon="download" kind="primary" capitalize href="download">Download Manager</Button>
-			<Button icon="docs" href="patches" capitalize>View patches</Button>
-		</div>
-	</div>
-</section>
-
-<style>
-	h1 {
-		color: var(--white);
-		font-weight: 700;
-		margin-bottom: 1.5rem;
-	}
-
-	h5 {
-		margin-bottom: 0.5rem;
-	}
-	h4 {
-		margin-bottom: 2rem;
-	}
-
-	.hero {
-		padding-bottom: 9rem;
-	}
-
-	.hero-text {
-		align-items: center;
-	}
-
-	.hero-buttons {
-		display: flex;
-		user-select: none;
-		gap: 1rem;
-	}
-
-	span {
-		color: var(--accent-color);
-	}
-
-	@media (max-width: 768px) {
-		.hero {
-			padding-bottom: 0;
-		}
-
-		h1 {
-			font-size: clamp(3rem, 10vw, 3rem);
-		}
-
-		h4 {
-			font-size: clamp(1rem, 1.2rem, 1.5rem);
-		}
-
-		br {
-			content: ' ';
-		}
-	}
-
-	@media screen and (max-width: 600px) {
-		.hero-buttons {
-			flex-direction: column;
-		}
-	}
-</style>
diff --git a/src/data/types.ts b/src/lib/types.ts
similarity index 100%
rename from src/data/types.ts
rename to src/lib/types.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8ac5bb5..f330e49 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,8 +1,60 @@
-import { dev } from "$app/environment";
+import { dev } from '$app/environment';
+import { cubicOut } from 'svelte/easing';
 
 // console.log, but only if in dev environment.
 export function dev_log(part: string, ...args) {
-  if (dev) {
-    console.log(`[${part}]:`, ...args);
-  }
+	if (dev) {
+		console.log(`[${part}]:`, ...args);
+	}
+}
+
+export function friendlyName(text: string): string {
+	return text
+		.replace(/-/g, ' ')
+		.replace(/revanced\/revanced/g, '')
+		.replace(/revanced/g, 'ReVanced')
+		.replace(/\bcli\b/g, 'CLI')
+		.replace(/api/g, 'API')
+		.replace(/microg/g, 'MicroG')
+		.replace(/hdr/g, 'HDR')
+		.replace(/sponsorblock/g, 'SponsorBlock')
+		.replace(/tiktok/g, 'TikTok')
+		.replace(/vr/g, 'VR')
+		.replace(/(?:^|\s)\S/g, (x: string) => x.toUpperCase());
+}
+
+// stolen from https://svelte.dev/repl/6d5239f09b0b4dc6aafeb70606a0fe94?version=3.46.4
+// please add this svelte thanks ily <3
+export function horizontalSlide(
+	node,
+	{ delay = 0, duration = 400, easing = cubicOut, direction = 'block' } = {}
+) {
+	const style = getComputedStyle(node);
+	const opacity = +style.opacity;
+	const capitalized_logical_property = `${direction[0].toUpperCase()}${direction.slice(1)}`;
+	const size_value = parseFloat(style[`${direction}Size`]);
+	const padding_start_value = parseFloat(style[`padding${capitalized_logical_property}Start`]);
+	const padding_end_value = parseFloat(style[`padding${capitalized_logical_property}End`]);
+	const margin_start_value = parseFloat(style[`margin${capitalized_logical_property}Start`]);
+	const margin_end_value = parseFloat(style[`margin${capitalized_logical_property}End`]);
+	const border_width_start_value = parseFloat(
+		style[`border${capitalized_logical_property}StartWidth`]
+	);
+	const border_width_end_value = parseFloat(style[`border${capitalized_logical_property}EndWidth`]);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (t) =>
+			'overflow: hidden;' +
+			`opacity: ${Math.min(t * 20, 1) * opacity};` +
+			`${direction}-size: ${t * size_value}px;` +
+			`padding-${direction}-start: ${t * padding_start_value}px;` +
+			`padding-${direction}-end: ${t * padding_end_value}px;` +
+			`margin-${direction}-start: ${t * margin_start_value}px;` +
+			`margin-${direction}-end: ${t * margin_end_value}px;` +
+			`border-${direction}-start-width: ${t * border_width_start_value}px;` +
+			`border-${direction}-start-width: ${t * border_width_end_value}px;`
+	};
 }
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 699d399..b6e7c87 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Navigation from '$lib/components/atoms/NavButton.svelte';
+	import Navigation from '$layout/Navbar/NavButton.svelte';
 	import { page } from '$app/stores';
 
 	$: status = $page.status;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 72348be..3d4ef7f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
-  import { derived } from "svelte/store";
+	import { derived } from 'svelte/store';
 
-	import NavHost from "$lib/components/molecules/NavHost.svelte";
-  import Spinner from '$lib/components/atoms/Spinner.svelte';
-  import RouterEvents from '../data/RouterEvents';
-	import '../app.css';
+	import NavHost from '$layout/Navbar/NavHost.svelte';
+	import Spinner from '$lib/components/Spinner.svelte';
+	import RouterEvents from '$data/RouterEvents';
 
-  // Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
-  const show_loading_animation = derived(RouterEvents, ($event, set) => {
-    if ($event.navigating) {
-      // Wait 250 ms before showing the animation.
-      const timeout = setTimeout(() => set(true), 250);
-      return () => clearTimeout(timeout);
-    } else {
-      set(false)
-    }
-  }, false);
+	// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
+	const show_loading_animation = derived(
+		RouterEvents,
+		($event, set) => {
+			if ($event.navigating) {
+				// Wait 250 ms before showing the animation.
+				const timeout = setTimeout(() => set(true), 250);
+				return () => clearTimeout(timeout);
+			} else {
+				set(false);
+			}
+		},
+		false
+	);
 </script>
 
 <svelte:head>
@@ -35,8 +38,12 @@
 {#if $show_loading_animation}
 	<Spinner />
 {:else}
-  <slot />
+	<slot />
 {/if}
 <!--
      afn if you are moving the footer here, please make it not use the repositories store directly and instead use component props :) -->
 <!-- <Footer repos={$repositories}> -->
+
+<style lang="scss" global>
+	@import '../app.scss';
+</style>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 7b3b74d..1810e4c 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,14 +1,14 @@
 import type { PageLoad } from './$types';
-
-import { repositories } from '../data/api';
-
+import { repositories } from '$data/api';
 export const prerender = true;
 
 const base = repositories.page_load_impl();
 
 export const load: PageLoad = async ({ fetch }) => {
-  // The entire site may softlock if the user sets a bad API url if we don't do this.
-  try {
-    return await base({ fetch });
-  } catch(_) { }
-}
+	// The entire site may softlock if the user sets a bad API url if we don't do this.
+	try {
+		return await base({ fetch });
+	} catch (err) {
+		console.log(err);
+	}
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6fd34cd..86fb57f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
-	import Home from '$lib/components/organisms/Hero.svelte';
-	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
-	import Wave from '$lib/components/atoms/Wave.svelte';
+	import HeroImage from '$layout/Hero/HeroImage.svelte';
+	import Home from '$layout/Hero/HeroSection.svelte';
+	import SocialHost from '$layout/Hero/SocialHost.svelte';
+	import Wave from '$lib/components/Wave.svelte';
 </script>
 
 <svelte:head>
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte
index ec857c8..ad05596 100644
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@@ -2,10 +2,10 @@
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
+	import { repositories } from '$data/api';
 
-  import { repositories } from '../../data/api';
+	import ContributorHost from './ContributorSection.svelte';
+	import Footer from '$layout/Footer.svelte';
 </script>
 
 <svelte:head>
@@ -18,9 +18,15 @@
 	<div class="wrapper">
 		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 			<h2>Made possible by the community.</h2>
-			<h4>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h4>
+			<h4>
+				Want to show up here? <span
+					><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
+						>Become a contributor</a
+					></span
+				>
+			</h4>
 		</div>
-		<div class="contrib-grid">
+		<div class="repos">
 			{#each $repositories as { contributors, name: repo }}
 				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 					<ContributorHost {contributors} {repo} />
@@ -33,11 +39,11 @@
 <Footer />
 
 <style>
-	.contrib-grid {
+	.repos {
 		display: flex;
 		flex-direction: column;
-		gap: 3rem;
-		margin-bottom: 3rem;
+		gap: 2rem;
+		margin-bottom: 4rem;
 	}
 
 	h2 {
@@ -45,10 +51,10 @@
 		color: var(--grey-four);
 		margin-bottom: 0.3rem;
 	}
-	
+
 	h4 {
-		color: var(--grey-four);
 		text-align: center;
+		color: var(--grey-four);
 	}
 
 	.text-container {
@@ -57,8 +63,8 @@
 		flex-direction: column;
 		margin-bottom: 2rem;
 		background-color: var(--accent-color);
-		padding: 2.4rem;
-		border-radius: 8px;
+		padding: 2.5rem 1.75rem;
+		border-radius: 20px;
 	}
 
 	a {
@@ -76,10 +82,9 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
-
 	@media screen and (max-width: 768px) {
-		h1 {
-			font-size: 2rem;
+		.text-container {
+			margin-bottom: 2rem;
 		}
 	}
 </style>
diff --git a/src/routes/contributors/+page.ts b/src/routes/contributors/+page.ts
index 7f9ba3a..be95321 100644
--- a/src/routes/contributors/+page.ts
+++ b/src/routes/contributors/+page.ts
@@ -1,5 +1,4 @@
+import { repositories } from '$data/api';
 import type { PageLoad } from './$types';
 
-import { repositories } from '../../data/api';
-
 export const load: PageLoad = repositories.page_load_impl();
diff --git a/src/routes/docs/+layout.server.ts b/src/routes/docs/+layout.server.ts
index 448fea8..bc6427d 100644
--- a/src/routes/docs/+layout.server.ts
+++ b/src/routes/docs/+layout.server.ts
@@ -1,6 +1,6 @@
 import type { PageServerLoad } from './$types';
 
-import { index_content } from '$lib/documentation.server';
+import { index_content } from './documentation.server';
 
 // The load function here used to get data from a json file created by a (prerendered) server route.
 // This was because we could not prerender the documentation route before.
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index 82a38f6..da5ac91 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 
-	import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
+	import DocsNavTree from './DocsNavTree.svelte';
 
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import Footer from '$lib/components/molecules/Footer.svelte';
+	import Footer from '$layout/Footer.svelte';
 
 	export let data: PageData;
 </script>
diff --git a/src/lib/components/atoms/DocsNavNode.svelte b/src/routes/docs/DocsNavNode.svelte
similarity index 93%
rename from src/lib/components/atoms/DocsNavNode.svelte
rename to src/routes/docs/DocsNavNode.svelte
index 6e07b2b..0bfc72d 100644
--- a/src/lib/components/atoms/DocsNavNode.svelte
+++ b/src/routes/docs/DocsNavNode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DocumentInfo } from '$lib/documentation.shared';
+	import type { DocumentInfo } from './documentation.shared';
 	export let info: DocumentInfo;
 	import { page } from '$app/stores';
 </script>
diff --git a/src/lib/components/molecules/DocsNavTree.svelte b/src/routes/docs/DocsNavTree.svelte
similarity index 78%
rename from src/lib/components/molecules/DocsNavTree.svelte
rename to src/routes/docs/DocsNavTree.svelte
index 1e347c8..6d3ac02 100644
--- a/src/lib/components/molecules/DocsNavTree.svelte
+++ b/src/routes/docs/DocsNavTree.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { is_tree } from '$lib/documentation.shared';
-	import type { DocsTree } from '$lib/documentation.shared';
+	import { is_tree } from './documentation.shared';
+	import type { DocsTree } from './documentation.shared';
 
-	import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
+	import DocsNavNode from './DocsNavNode.svelte';
 
 	export let tree: DocsTree;
 	// How deeply nested this is.
diff --git a/src/routes/docs/[...slug]/+page.server.ts b/src/routes/docs/[...slug]/+page.server.ts
index 0c80286..9c44db9 100644
--- a/src/routes/docs/[...slug]/+page.server.ts
+++ b/src/routes/docs/[...slug]/+page.server.ts
@@ -1,17 +1,17 @@
 import type { PageServerLoad } from './$types';
 import { error } from '@sveltejs/kit';
 
-import { get } from '$lib/documentation.server';
+import { get } from '../documentation.server';
 
 // See also: ../+layout.server.ts
 export const prerender = true;
 
 export const load: PageServerLoad = ({ params }) => {
-  const document = get(params.slug);
-  if (document === null) {
-    error
-    throw error(404);
-  }
+	const document = get(params.slug);
+	if (document === null) {
+		error;
+		throw error(404);
+	}
 
-  return document;
-}
+	return document;
+};
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index 7fbc9b3..6e1b844 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-  import type { PageData } from './$types';
+	import type { PageData } from './$types';
 
-  import '$lib/documentation.scss';
+	import '../documentation.scss';
 
-
-  // Data here comes from a trusted source.
-  // CSS comes from the layout.
-  export let data: PageData;
+	// Data here comes from a trusted source.
+	// CSS comes from the layout.
+	export let data: PageData;
 </script>
 
 <svelte:head>
@@ -16,6 +15,6 @@
 </svelte:head>
 
 <div id="markup-content">
-  <h1 class="title">{data.title}</h1>
-  {@html data.content}
+	<h1 class="title">{data.title}</h1>
+	{@html data.content}
 </div>
diff --git a/src/lib/documentation.scss b/src/routes/docs/documentation.scss
similarity index 99%
rename from src/lib/documentation.scss
rename to src/routes/docs/documentation.scss
index 75df594..4265879 100644
--- a/src/lib/documentation.scss
+++ b/src/routes/docs/documentation.scss
@@ -8,7 +8,6 @@
 
 
 
-
     a {
         text-decoration: none;
         color: var(--accent-color);
diff --git a/src/lib/documentation.server.ts b/src/routes/docs/documentation.server.ts
similarity index 99%
rename from src/lib/documentation.server.ts
rename to src/routes/docs/documentation.server.ts
index 76525dd..b4f9895 100644
--- a/src/lib/documentation.server.ts
+++ b/src/routes/docs/documentation.server.ts
@@ -6,7 +6,6 @@ import { browser, prerendering } from '$app/environment';
 import fs, { existsSync as exists } from 'fs';
 import path from 'path';
 
-
 import { parse as parse_md } from 'marked';
 import AsciiDocProcessor from 'asciidoctor'
 
diff --git a/src/lib/documentation.shared.ts b/src/routes/docs/documentation.shared.ts
similarity index 100%
rename from src/lib/documentation.shared.ts
rename to src/routes/docs/documentation.shared.ts
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index f9da2e3..56c5730 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { tools } from '../../data/api';
+	import { tools } from '$data/api';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	
+	import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
 
-	import Button from '$lib/components/atoms/Button.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
-  import Picture from '$lib/components/atoms/Picture.svelte';
-
-  import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
+	import Button from '$lib/components/Button.svelte';
+	import Footer from '$layout/Footer.svelte';
+	import Picture from '$lib/components/Picture.svelte';
 
 	$: manager = $tools['revanced/revanced-manager'];
 </script>
 
-<div class="wrapper center">
-	<h1>ReVanced <span>Manager</span></h1>
+<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+	<h2>ReVanced <span>Manager</span></h2>
 	<h4>Patch your favourite apps, right on your device.</h4>
 	<div class="buttons">
-		<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">{manager.version}</Button>
+		<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
+			{manager.version}
+		</Button>
 		<Button href="https://github.com/revanced/revanced-manager" target="_blank">View Source</Button>
 	</div>
-  <div class="screenshot">
-    <Picture data={manager_screenshot} alt="Manager Screenshot" />
-  </div>
+	<div class="screenshot">
+		<Picture data={manager_screenshot} alt="Manager Screenshot" />
+	</div>
 </div>
 
 <Footer />
@@ -31,10 +35,9 @@
 		align-items: center;
 	}
 
-	h1 {
+	h2 {
 		text-align: center;
 		color: var(--white);
-
 	}
 
 	h4 {
@@ -58,8 +61,7 @@
 		gap: 1rem;
 	}
 
-	
 	span {
-		color: var(--accent-color)
+		color: var(--accent-color);
 	}
 </style>
diff --git a/src/routes/download/+page.ts b/src/routes/download/+page.ts
index 90b6a54..06a84f9 100644
--- a/src/routes/download/+page.ts
+++ b/src/routes/download/+page.ts
@@ -1,5 +1,5 @@
 import type { PageLoad } from './$types';
 
-import { tools } from '../../data/api';
+import { tools } from '$data/api';
 
-export const load: PageLoad = tools.page_load_impl();
\ No newline at end of file
+export const load: PageLoad = tools.page_load_impl();
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 492c423..8240a78 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -2,14 +2,14 @@
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { Patch } from 'src/data/types';
-	import { patches as api_patches } from '../../data/api';
+	import type { Patch } from '$lib/types';
+	import { patches as api_patches } from '$data/api';
 
-	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
-	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
-	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
-	import Search from '$lib/components/atoms/Search.svelte';
+	import TreeMenu from '$lib/components/TreeView/TreeMenu.svelte';
+	import TreeMenuButton from '$lib/components/TreeView/TreeMenuButton.svelte';
+	import PatchItem from './PatchItem.svelte';
+	import Footer from '$layout/Footer.svelte';
+	import Search from '$lib/components/Search.svelte';
 
 	$: ({ patches, packages } = $api_patches);
 
@@ -64,7 +64,7 @@
 </svelte:head>
 
 <main>
-	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
+	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<TreeMenu>
 			<!-- Must bind both variables: we get searchTerm from the text input, -->
 			<!-- and searchTermFiltered gets cleared with the clear button -->
@@ -85,8 +85,8 @@
 				{#if filterByPackage(selectedPkg, patch.compatiblePackages) || !selectedPkg}
 					<!-- ...same with search -->
 					{#if search(patch) || !searchTermFiltered}
-						<div in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
-							<PatchCell {patch} />
+						<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+							<PatchItem {patch} />
 						</div>
 					{/if}
 				{/if}
diff --git a/src/routes/patches/+page.ts b/src/routes/patches/+page.ts
index 5b3dda9..b623a24 100644
--- a/src/routes/patches/+page.ts
+++ b/src/routes/patches/+page.ts
@@ -1,5 +1,4 @@
+import { patches } from '$data/api';
 import type { PageLoad } from './$types';
 
-import { patches } from '../../data/api';
-
 export const load: PageLoad = patches.page_load_impl();
diff --git a/svelte.config.js b/svelte.config.js
index c5d6ea0..23cde93 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
+import path from 'path';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,12 +12,12 @@ const config = {
 		// adapter-static has vercel detection, but that does not let you set a custom 404 page easily.
 		// Instead, we have to use a wrapper that generates a vercel config if on vercel...
 		adapter: adapter({
-			pages: "public",
-			fallback: "404.html"
+			pages: 'public',
+			fallback: '404.html'
 		}),
 		env: {
-			publicPrefix: "RV"
-		}
+			publicPrefix: 'RV'
+		},
 	}
 };
 
diff --git a/tsconfig.json b/tsconfig.json
index 0f47472..e2c0ba3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,13 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"types": ["node"],
+		"paths": {
+			"$data/*": ["./src/data/*"],
+			"$lib/*": ["./src/lib/*"],
+			"$layout/*": ["./src/layout/*"],
+			"$images/*": ["./images/*"],
+		},
 	}
 }
diff --git a/vite.config.js b/vite.config.js
index 57c210f..2b0e051 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,16 +1,18 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { imagetools } from 'vite-imagetools'
+import { imagetools } from 'vite-imagetools';
 
 import path from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
 	plugins: [sveltekit(), imagetools()],
-  resolve: {
+  	resolve: {
     alias: {
-      '$images': path.resolve('./images'),
-    },
-  },
+			$images: path.resolve('./images'),
+			$data: path.resolve('./src/data'),
+			$layout: path.resolve('./src/layout')
+		}
+	}
 };
 
 export default config;