From e30d596dd407fba43e9688718648a7ccb5ccb0a7 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 18:49:54 -0400
Subject: [PATCH 1/9] scrollbar ting

---
 .../molecules/ContributorHost.svelte          | 26 -----------
 src/routes/__layout.svelte                    | 45 ++++++++++---------
 2 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index d9926c4..264a4d4 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -4,35 +4,9 @@
 
 <div class="social-host">
     <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>    
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
 </div>
 
 <style>
-
     .social-host {
         width: 100;
         gap:2rem;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 39c3a2c..ada817e 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,11 +1,9 @@
 <script>
-
-import Button from "$lib/components/atoms/Button.svelte";
-import NavHost from "$lib/components/molecules/NavHost.svelte";
-import SocialButton from "$lib/components/atoms/SocialButton.svelte";
-import SocialHost from "$lib/components/molecules/SocialHost.svelte";
-import Wave from '$lib/components/atoms/Wave.svelte';
-
+	import Button from '$lib/components/atoms/Button.svelte';
+	import NavHost from '$lib/components/molecules/NavHost.svelte';
+	import SocialButton from '$lib/components/atoms/SocialButton.svelte';
+	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
+	import Wave from '$lib/components/atoms/Wave.svelte';
 </script>
 
 <svelte:head>
@@ -18,16 +16,19 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 		href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
 		rel="stylesheet"
 	/>
-	<meta name="og:title" content="ReVanced"/>
-	<meta name="og:image" itemprop="image" content="/embed.png">
-	<meta property="og:description" content="An extensible framework for building application mods.">
-	<meta name="twitter:image" itemprop="image" content="/embed.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="theme-color" content="#0f111a">
+	<meta name="og:title" content="ReVanced" />
+	<meta name="og:image" itemprop="image" content="/embed.png" />
+	<meta
+		property="og:description"
+		content="An extensible framework for building application mods."
+	/>
+	<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></NavHost>
+<NavHost />
 <slot />
 <Wave />
 
@@ -54,7 +55,7 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	:global(.wrapper) {
 		margin-inline: auto;
 		width: min(87%, 100rem);
-		margin-top: 1.5%
+		margin-top: 1.5%;
 	}
 
 	:root {
@@ -64,8 +65,8 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 		--grey-one: #1c1e29;
 		--grey-two: #2b2d3a;
 		--grey-three: #3e404f;
-		--grey-four: #1B1E29;
-		--grey-five: #D0D0D0;
+		--grey-four: #1b1e29;
+		--grey-five: #d0d0d0;
 		--grey-six: #a19e9e;
 		--grey-seven: #535563;
 		--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94)
@@ -110,14 +111,16 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	/*-----scrollbar-----*/
 
 	:global(::-webkit-scrollbar) {
-		width: 20px;
+		width: 16px;
 		background-color: transparent;
 	}
 
 	:global(::-webkit-scrollbar-thumb) {
-		background-color: var(--grey-three);
-		border-radius: 20px;
-		border: 6px solid transparent;
+		background-color: var(--grey-two); /* color of the scroll thumb */
+		border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+		border-bottom: 0.25rem solid transparent; /* creates padding around scroll thumb */
+		border-left: 0.25rem solid transparent; /* creates padding around scroll thumb */
+		border-top: 0.25rem solid transparent; /* creates padding around scroll thumb */
 		background-clip: content-box;
 	}
 

From 9d367ff31ffd06c47023968542db3874d48f83e0 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 18:59:45 -0400
Subject: [PATCH 2/9] fix: wave ting scrollin

---
 src/lib/components/atoms/Wave.svelte | 2 +-
 src/routes/__layout.svelte           | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/atoms/Wave.svelte b/src/lib/components/atoms/Wave.svelte
index 6b3a6d1..5620a98 100644
--- a/src/lib/components/atoms/Wave.svelte
+++ b/src/lib/components/atoms/Wave.svelte
@@ -9,7 +9,7 @@
 
 <style>
   svg {
-    position: absolute;
+    position: fixed;
     z-index: -2;
     bottom:0;
     transform: translateY(20%);
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index ada817e..0bc8514 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -41,6 +41,8 @@
 	}
 
 	:global(html) {
+		margin: 0;
+		padding: 0;
 		font-size: 100%;
 		box-sizing: border-box;
 	}

From d1f19bf1a8db3688c87411efaf16774057a9a0af Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 21:05:48 -0400
Subject: [PATCH 3/9] fix: i am not the only contributor, jumping scrollbar
 fixed

---
 .../components/atoms/ContributorButton.svelte    | 16 ++++++++--------
 .../components/molecules/ContributorHost.svelte  | 11 +++++++----
 src/routes/__layout.svelte                       |  1 +
 src/routes/credits.svelte                        | 10 ++++++++--
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/atoms/ContributorButton.svelte b/src/lib/components/atoms/ContributorButton.svelte
index 91bd169..957ed7c 100644
--- a/src/lib/components/atoms/ContributorButton.svelte
+++ b/src/lib/components/atoms/ContributorButton.svelte
@@ -1,8 +1,8 @@
-<script>
-	export const username = "afnzmn"
-	export const href = `https://github.com/${username}`
-	export const src = `https://github.com/${username}.png`
-	export const alt = `${username}'s contributor profile picture`
+<script lang="ts">
+	export let username: String;
+	let href = `https://github.com/${username}`
+	let src = `https://github.com/${username}.png`
+	let alt = `${username}'s contributor profile picture`
 </script>
 
 <a {href}>
@@ -30,13 +30,13 @@
         max-width: 86px;
 		cursor: pointer;
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
 		transition: transform 0.4s var(--bezier-one);
+		margin-bottom: 1rem;
 		user-select: none;
 	}
 
-	button:hover {
-		transform: translate(0%, -5%);
+	a:hover > button {
+		transform: translateY(-5%);
 	}
 
 	img {
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 264a4d4..ce4da9c 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
     import ContributorButton from "../atoms/ContributorButton.svelte";
+    export let peoples: Array<String>;
 </script>
 
 <div class="social-host">
-    <ContributorButton></ContributorButton>
+    {#each peoples as person}
+        <ContributorButton username={person}></ContributorButton>
+    {/each}
 </div>
 
 <style>
     .social-host {
+        gap: 2rem;
         width: 100;
-        gap:2rem;
-		align-items: center;
         display: grid;
+		align-items: center;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 0bc8514..bd13ae0 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -45,6 +45,7 @@
 		padding: 0;
 		font-size: 100%;
 		box-sizing: border-box;
+		overflow-y: scroll;
 	}
 
 	:global(body) {
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index cbc0ff4..47900b2 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,7 +1,13 @@
 <script>
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-    </script>
+    let peoples = [
+        "Ushie",
+        "afnzmn",
+        "baiorett",
+        "PickleNik",
+    ]
+</script>
 
 <div class="wrapper">
-    <ContributorHost></ContributorHost>
+    <ContributorHost {peoples}></ContributorHost>
 </div>
\ No newline at end of file

From f9dd8054940d916a67a51bb95d496d7cd7c77fb6 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 21:35:38 -0400
Subject: [PATCH 4/9] fix: social button hover glitch, cleanup: contrib button

---
 .../components/atoms/ContributorButton.svelte |  8 ++--
 src/lib/components/atoms/SocialButton.svelte  | 46 +++++++++++--------
 .../components/molecules/SocialHost.svelte    |  3 +-
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/atoms/ContributorButton.svelte b/src/lib/components/atoms/ContributorButton.svelte
index 957ed7c..8a9accb 100644
--- a/src/lib/components/atoms/ContributorButton.svelte
+++ b/src/lib/components/atoms/ContributorButton.svelte
@@ -22,6 +22,7 @@
 	button {
 		color: var(--white);
 		border-radius: 200px;
+		overflow: hidden;
         border: 0;
 		/* padding: 5px 5px; */
         width:86px;
@@ -40,10 +41,7 @@
 	}
 
 	img {
-		/* margin: 0;
-		padding: 0; */
-		border-radius: 50%;
-        max-height: 86px;
-        max-width: 86px;
+		height: 100%;
+		width: 100%;
 	}
 </style>
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte
index a602b98..4211890 100644
--- a/src/lib/components/atoms/SocialButton.svelte
+++ b/src/lib/components/atoms/SocialButton.svelte
@@ -1,38 +1,44 @@
 <script>
 	export let src = 'socials/github.svg';
-    export let alt = 'GitHub';
-    export let href = '#';
+	export let alt = 'GitHub';
+	export let href = '#';
 </script>
 
-<button>
-    <a {href}>
-        <img {src} {alt}>
-    </a>
-</button>
+<div>
+	<button>
+		<a {href}>
+			<img {src} {alt} />
+		</a>
+	</button>
+</div>
 
 <style>
 	button {
-		color: var(--white);
-		border-radius: 200px;
-        border: 0;
+		border: 0;
+		width: 60px;
+		height: 60px;
 		padding: 14px;
-        width:60px;
-        height:60px;
 		cursor: pointer;
+		border-radius: 200px;
+		transition: transform 0.4s var(--bezier-one);
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
-		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
+		color: var(--white);
 		user-select: none;
-        margin-right:0.5rem;
+		margin-right: 0.5rem;
 		margin-left: 0.5rem;
 	}
 
-    img {
-        width:30px;
-    }
+	div {
+		display: inline-block;
+	}
 
-	button:hover {
-		transform: translate(0%, -5%);
+	img {
+		transition: filter 0.4s var(--bezier-one);
+		width: 30px;
+	}
+
+	div:hover > button {
+		transform: translateY(-5%);
 	}
 
 	button:hover img {
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/lib/components/molecules/SocialHost.svelte
index 72dbf9f..de9e05b 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/lib/components/molecules/SocialHost.svelte
@@ -12,11 +12,10 @@
 <style>
     .social-host {
         justify-content: space-between;
-        position: absolute;
 		align-items: center;
+        position: fixed;
         bottom: 3rem;
         left: 5.5rem;
-        user-select: none;
     }
 
     @media screen and (max-width: 1052px) {

From a1e8911933b6611cbaa812f3925192aaa7b2f666 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 21:50:16 -0400
Subject: [PATCH 5/9] heroimage height & shadow

---
 src/lib/components/atoms/HeroImage.svelte     |  5 +++--
 .../organisms/IndexDescription.svelte         | 20 +++++++++----------
 src/routes/index.svelte                       |  2 +-
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 88163dd..3f578eb 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -5,12 +5,13 @@
 
 <style>
 	.hero-img {
-		height: 40rem;
+		height: 80vh;
 		z-index: -1;
 		width: auto;
 		float: right;
-		border-radius: 20px;
+		border-radius: 2rem;
 		transform: rotate(3.7deg) translateY(2%) translateX(-15%);
+		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
 </style>
diff --git a/src/lib/components/organisms/IndexDescription.svelte b/src/lib/components/organisms/IndexDescription.svelte
index 37c361f..48b0a84 100644
--- a/src/lib/components/organisms/IndexDescription.svelte
+++ b/src/lib/components/organisms/IndexDescription.svelte
@@ -1,33 +1,32 @@
 <script>
 	import Button from '$lib/components/atoms/Button.svelte';
-    import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
-
+	import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
 </script>
 
 <section class="hero">
-    <div class="hero-text">
-        <!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
-        <IndexHeroTitle></IndexHeroTitle>
-        <h2>
+	<div class="hero-text">
+		<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
+		<IndexHeroTitle />
+		<h2>
 			An extensible framework for<br />
 			building application mods.
 		</h2>
-		
+
 		<div class="hero-buttons">
 			<Button kind="primary" href="/download" fontsize="1.3rem">Download</Button>
 			<Button href="/docs" fontsize="1.3rem">Read The Docs</Button>
 		</div>
-    </div>
+	</div>
 </section>
 
 <style>
 	.hero-text {
 		align-items: center;
 	}
-	
+
 	.hero-buttons {
 		display: flex;
-		gap:1rem;
+		gap: 1rem;
 		user-select: none;
 		transform: translateX(-3px);
 	}
@@ -36,5 +35,4 @@
 		font-size: 6.5rem;
 		letter-spacing: -0.04em;
 	}
-
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index ca4ec1c..2845099 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,7 +6,7 @@
 
 <div class="wrapper">
 
-	<HeroImage></HeroImage>
+	<HeroImage />
 	<IndexDescription />
 	<SocialHost />
 

From c27a2f46e9a4268eb362f62e1bca75c2a9df6551 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 23:08:41 -0400
Subject: [PATCH 6/9] homepage revamped

---
 src/lib/components/atoms/Button.svelte        |  7 +++++-
 src/lib/components/atoms/HeroImage.svelte     | 14 ++++++++++--
 .../organisms/IndexDescription.svelte         | 11 +++++++---
 src/routes/__layout.svelte                    |  2 +-
 src/routes/index.svelte                       | 22 ++++++++++++++-----
 5 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 2567afc..5359fc4 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -22,7 +22,7 @@
 	.button-secondary {
 		font-weight: 600;
 		color: var(--white);
-		border: 3px solid var(--red);
+		border: 3px solid var(--grey-three);
 		border-radius: 200px;
 		padding: 12px 40px;
 		cursor: pointer;
@@ -33,6 +33,7 @@
 	}
 
 	.button-primary {
+		border: 3px solid var(--red);
 		background-color: var(--red);
 		box-shadow: 0px 0px 32px 1px var(--red-glow);
 	}
@@ -44,4 +45,8 @@
 	button:hover {
 		transform: translate(0%, -5%);
 	}
+	button:active {
+		transition-duration: 0.1s;
+		transform: translate(0);
+	}
 </style>
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 3f578eb..310f9ab 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -1,17 +1,27 @@
 <script>
 </script>
 
-<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" />
+<div class="hero-img"><img height="100%" src="/manager.png" alt="Screenshot of ReVanced Manager" /></div>
 
 <style>
 	.hero-img {
+		overflow: hidden;
 		height: 80vh;
 		z-index: -1;
 		width: auto;
 		float: right;
 		border-radius: 2rem;
-		transform: rotate(3.7deg) translateY(2%) translateX(-15%);
+		transform: rotate(3.7deg) translateY(2%);
 		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
+	.hero-img::after{
+		box-shadow: inset 2rem 2rem 5rem -3rem var(--grey-two), inset -2rem -2rem 5rem -3rem var(--grey-one);
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 </style>
diff --git a/src/lib/components/organisms/IndexDescription.svelte b/src/lib/components/organisms/IndexDescription.svelte
index 48b0a84..df848f6 100644
--- a/src/lib/components/organisms/IndexDescription.svelte
+++ b/src/lib/components/organisms/IndexDescription.svelte
@@ -20,15 +20,20 @@
 </section>
 
 <style>
-	.hero-text {
+	h2 {
+		margin-top: 1rem;
+	}
+	.hero {
+		padding-bottom: 10rem;
+	}
+	.hero-text { 
 		align-items: center;
 	}
 
 	.hero-buttons {
-		display: flex;
 		gap: 1rem;
+		display: flex;
 		user-select: none;
-		transform: translateX(-3px);
 	}
 
 	.hero-text h1 {
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index bd13ae0..0d81557 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -62,7 +62,7 @@
 	}
 
 	:root {
-		--white: #ffe1e1;
+		--white: #fff;
 		--red: #ff4151;		
 		--red-glow: #ff838d40;
 		--grey-one: #1c1e29;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2845099..198ea88 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,11 +5,23 @@
 </script>
 
 <div class="wrapper">
-
-	<HeroImage />
-	<IndexDescription />
+	<div class="wrappezoid">
+		<IndexDescription />
+		<HeroImage />
+	</div>
 	<SocialHost />
-
 </div>
 
-
+<style>
+	.wrappezoid {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+	}
+	@media (max-width: 768px) {
+		.wrappezoid {
+			flex-direction: column;
+		}
+	}
+</style>
\ No newline at end of file

From 30849593eda94b16f023876175a31f6e71c60f9d Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 16 Aug 2022 01:52:00 -0400
Subject: [PATCH 7/9] mobile nav & hero page adjustments

---
 src/lib/components/atoms/Button.svelte        |   1 -
 src/lib/components/atoms/HeroImage.svelte     |  14 ++-
 .../components/atoms/IndexHeroTitle.svelte    |  18 ++-
 src/lib/components/atoms/SocialButton.svelte  |   2 -
 src/lib/components/atoms/Wave.svelte          |   5 +-
 src/lib/components/molecules/NavHost.svelte   | 104 ++++++++++++++----
 .../components/molecules/SocialHost.svelte    |  43 +++++---
 .../organisms/IndexDescription.svelte         |  17 ++-
 src/routes/__layout.svelte                    |   1 -
 src/routes/index.svelte                       |  13 ++-
 10 files changed, 170 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 5359fc4..1129cd9 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -27,7 +27,6 @@
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
-		margin-top: 45px;
 		transition: transform 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one);
 		user-select: none;
 	}
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 310f9ab..60b62ae 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -7,14 +7,24 @@
 	.hero-img {
 		overflow: hidden;
 		height: 80vh;
+		max-height: 80rem;
 		z-index: -1;
 		width: auto;
 		float: right;
-		border-radius: 2rem;
-		transform: rotate(3.7deg) translateY(2%);
+		border-radius: 1.5rem;
+		transform: rotate(3.7deg);
 		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
+	@media (max-width: 1919px) {
+		.hero-img {
+			position: absolute;
+			height: 90vh;
+			top: 90px;
+			right: 7.5%;
+			transform: rotate(3.7deg) translateY(10%);
+		}
+	}
 	.hero-img::after{
 		box-shadow: inset 2rem 2rem 5rem -3rem var(--grey-two), inset -2rem -2rem 5rem -3rem var(--grey-one);
 		content: "";
diff --git a/src/lib/components/atoms/IndexHeroTitle.svelte b/src/lib/components/atoms/IndexHeroTitle.svelte
index ec16383..32e53a9 100644
--- a/src/lib/components/atoms/IndexHeroTitle.svelte
+++ b/src/lib/components/atoms/IndexHeroTitle.svelte
@@ -10,7 +10,23 @@
 	h1 {
 		color: var(--white);
 		font-weight: 800;
-        font-size: 6rem;
+		font-size: 6rem;
 		letter-spacing: -0.04em;
+		line-height: 0.75em;
+	}
+	@media screen and (max-width: 1919px) {
+		h1 {
+			font-size: 5rem;
+		}
+	}
+	@media screen and (max-width: 1052px) {
+		h1 {
+			font-size: 4.5rem;
+		}
+	}
+	@media screen and (max-width: 768px) {
+		h1 {
+			font-size: 3rem;
+		}
 	}
 </style>
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte
index 4211890..0695454 100644
--- a/src/lib/components/atoms/SocialButton.svelte
+++ b/src/lib/components/atoms/SocialButton.svelte
@@ -24,8 +24,6 @@
 		background-color: var(--grey-four);
 		color: var(--white);
 		user-select: none;
-		margin-right: 0.5rem;
-		margin-left: 0.5rem;
 	}
 
 	div {
diff --git a/src/lib/components/atoms/Wave.svelte b/src/lib/components/atoms/Wave.svelte
index 5620a98..f1ba28d 100644
--- a/src/lib/components/atoms/Wave.svelte
+++ b/src/lib/components/atoms/Wave.svelte
@@ -11,8 +11,9 @@
   svg {
     position: fixed;
     z-index: -2;
-    bottom:0;
-    transform: translateY(20%);
+    bottom: 0;
+    height: 35vh;
+    width: 100%;
   }
 
   .wave {
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
index e4c169a..0c97995 100644
--- a/src/lib/components/molecules/NavHost.svelte
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -1,14 +1,28 @@
-<script>
+<script lang="ts">
 	import Navigation from '../atoms/Navigation.svelte';
+	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	let menuBtn: HTMLElement;
+	let menuOpen = false;
+	onMount(() => {
+		menuBtn.addEventListener('click', () => {
+			if (!menuOpen) {
+				menuBtn.classList.add('open');
+				menuOpen = true;
+			} else {
+				menuBtn.classList.remove('open');
+				menuOpen = false;
+			}
+		});
+	});
 </script>
 
-<div>
+<div class="wrapper">
 	<nav>
 		<a href="/">
 			<div class="logo">
 				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-	
+
 				{#if $page.url.pathname !== '/'}
 					<h1><span>Re</span>Vanced</h1>
 				{/if}
@@ -20,23 +34,22 @@
 			<Navigation href="/docs">Docs</Navigation>
 			<Navigation href="/credits">Credits</Navigation>
 		</ul>
+		<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
+			<div class="menu-btn__burger" />
+		</div>
 	</nav>
 </div>
 
 <style>
 	nav {
-		width: 100%;
- 		top: 0;
+		top: 0;
 		display: flex;
-		padding-top: 0.75rem;
-		padding-right: 3rem;
-		padding-left: 6rem;
-		justify-content: space-between;
 		align-items: center;
+		justify-content: space-between;
 		min-height: 90px;
+		width: 100%;
 	}
 
-
 	.logo {
 		display: inline-block;
 	}
@@ -46,7 +59,7 @@
 		cursor: pointer;
 		transform: translateY(5%);
 	}
-	
+
 	h1 {
 		display: inline-block;
 		margin-left: 1rem;
@@ -58,22 +71,75 @@
 		color: var(--red);
 	}
 
-
 	@media screen and (max-width: 1052px) {
-
 		h1 {
 			display: none;
 		}
-
-		nav {
-			padding-left: 7%;
-			padding-right: 1%;
-		}
 	}
 
 	@media screen and (max-width: 768px) {
 		nav {
-			background-color: purple;
+			/* background-color: purple; */
+		}
+		ul {
+			display: none;
 		}
 	}
+
+	/* Hamburger mmm yum */
+	@media screen and (min-width: 768px) {
+		.menu-btn {
+			display: none !important;
+		}
+	}
+	.menu-btn {
+		user-select: none;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 80px;
+		height: 60px;
+		cursor: pointer;
+		transition: all 0.5s ease-in-out;
+		background: var(--grey-one);
+		border-radius: 3rem;
+	}
+	.menu-btn__burger {
+		width: 30px;
+		height: 3px;
+		background: #fff;
+		border-radius: 5px;
+		box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
+		transition: all 0.5s ease-in-out;
+	}
+	.menu-btn__burger::before,
+	.menu-btn__burger::after {
+		content: '';
+		position: absolute;
+		width: 30px;
+		height: 3px;
+		background: #fff;
+		border-radius: 5px;
+		box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
+		transition: all 0.5s ease-in-out;
+	}
+	.menu-btn__burger::before {
+		transform: translateY(-8px);
+	}
+	.menu-btn__burger::after {
+		transform: translateY(8px);
+	}
+	/* ANIMATION */
+	.menu-btn.open .menu-btn__burger {
+		transform: translateX(-50px);
+		background: transparent;
+		box-shadow: none;
+	}
+	.menu-btn.open .menu-btn__burger::before {
+		transform: rotate(45deg) translate(35px, -35px);
+	}
+	.menu-btn.open .menu-btn__burger::after {
+		transform: rotate(-45deg) translate(35px, 35px);
+	}
 </style>
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/lib/components/molecules/SocialHost.svelte
index de9e05b..abe7684 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/lib/components/molecules/SocialHost.svelte
@@ -1,27 +1,34 @@
 <script>
-    import SocialButton from "../atoms/SocialButton.svelte";
+	import SocialButton from '../atoms/SocialButton.svelte';
 </script>
 
 <div class="social-host">
-    <SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github"></SocialButton>
-    <SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord"></SocialButton>
-    <SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit"></SocialButton>
-    <SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram"></SocialButton>
+	<SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github" />
+	<SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord" />
+	<SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit" />
+	<SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram" />
 </div>
 
 <style>
-    .social-host {
-        justify-content: space-between;
+	.social-host {
+		width: min(87%, 100rem);
+        /* same as margin-inline: auto on .wrapper */
+        padding: 0 max(6.5%, calc(50vw - 50rem));
 		align-items: center;
-        position: fixed;
-        bottom: 3rem;
-        left: 5.5rem;
-    }
+		user-select: none;
+		position: absolute;
+		display: flex;
+		bottom: 3rem;
+        gap: 1.5rem;
+		left: 0;
+	}
 
-    @media screen and (max-width: 1052px) {
-        .social-host {
-            left: 6%;
-        }
-
-    }
-</style>
\ No newline at end of file
+	@media screen and (max-width: 768px) {
+		.social-host {
+			left: 0;
+			width: 100%;
+            display: flex;
+			justify-content: center;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/IndexDescription.svelte b/src/lib/components/organisms/IndexDescription.svelte
index df848f6..cd93292 100644
--- a/src/lib/components/organisms/IndexDescription.svelte
+++ b/src/lib/components/organisms/IndexDescription.svelte
@@ -21,11 +21,26 @@
 
 <style>
 	h2 {
-		margin-top: 1rem;
+		margin-top: 1.75rem;
+		margin-bottom: 2rem;
 	}
 	.hero {
 		padding-bottom: 10rem;
 	}
+	@media (max-width: 768px) {
+		.hero {
+			padding-top: 10rem;
+			padding-bottom: 0;
+			text-align: center;
+		}
+		h2 {
+			font-size: 1.5rem;
+		}
+		.hero-buttons {
+			flex-direction: column;
+			gap: 0;
+		}
+	}
 	.hero-text { 
 		align-items: center;
 	}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 0d81557..1a277df 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -58,7 +58,6 @@
 	:global(.wrapper) {
 		margin-inline: auto;
 		width: min(87%, 100rem);
-		margin-top: 1.5%;
 	}
 
 	:root {
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 198ea88..2b46ff7 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -7,18 +7,29 @@
 <div class="wrapper">
 	<div class="wrappezoid">
 		<IndexDescription />
-		<HeroImage />
+		<div id="heroimg"><HeroImage /></div>
 	</div>
 	<SocialHost />
 </div>
 
 <style>
 	.wrappezoid {
+		height: calc(100vh - 90px);
 		display: flex;
 		flex-direction: row;
 		justify-content: space-around;
 		align-items: center;
 	}
+	@media (max-width: 1919px) {
+		.wrappezoid {
+			justify-content: space-between;
+		}
+	}
+	@media (max-width: 1052px) {
+		#heroimg {
+			display: none;
+		}
+	}
 	@media (max-width: 768px) {
 		.wrappezoid {
 			flex-direction: column;

From e024deac54d352889adbf197395fc1e61a417e0f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 16 Aug 2022 01:53:14 -0400
Subject: [PATCH 8/9] Revert "scrollbar ting"

This reverts commit e30d596dd407fba43e9688718648a7ccb5ccb0a7.
---
 .../molecules/ContributorHost.svelte          |  1 +
 src/routes/__layout.svelte                    | 43 +++++++++----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index ce4da9c..319dd29 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -10,6 +10,7 @@
 </div>
 
 <style>
+
     .social-host {
         gap: 2rem;
         width: 100;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 1a277df..69c5635 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,9 +1,11 @@
 <script>
-	import Button from '$lib/components/atoms/Button.svelte';
-	import NavHost from '$lib/components/molecules/NavHost.svelte';
-	import SocialButton from '$lib/components/atoms/SocialButton.svelte';
-	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
-	import Wave from '$lib/components/atoms/Wave.svelte';
+
+import Button from "$lib/components/atoms/Button.svelte";
+import NavHost from "$lib/components/molecules/NavHost.svelte";
+import SocialButton from "$lib/components/atoms/SocialButton.svelte";
+import SocialHost from "$lib/components/molecules/SocialHost.svelte";
+import Wave from '$lib/components/atoms/Wave.svelte';
+
 </script>
 
 <svelte:head>
@@ -16,19 +18,16 @@
 		href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
 		rel="stylesheet"
 	/>
-	<meta name="og:title" content="ReVanced" />
-	<meta name="og:image" itemprop="image" content="/embed.png" />
-	<meta
-		property="og:description"
-		content="An extensible framework for building application mods."
-	/>
-	<meta name="twitter:image" itemprop="image" content="/embed.png" />
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="theme-color" content="#0f111a" />
+	<meta name="og:title" content="ReVanced"/>
+	<meta name="og:image" itemprop="image" content="/embed.png">
+	<meta property="og:description" content="An extensible framework for building application mods.">
+	<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 />
+<NavHost></NavHost>
 <slot />
 <Wave />
 
@@ -67,8 +66,8 @@
 		--grey-one: #1c1e29;
 		--grey-two: #2b2d3a;
 		--grey-three: #3e404f;
-		--grey-four: #1b1e29;
-		--grey-five: #d0d0d0;
+		--grey-four: #1B1E29;
+		--grey-five: #D0D0D0;
 		--grey-six: #a19e9e;
 		--grey-seven: #535563;
 		--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94)
@@ -113,16 +112,14 @@
 	/*-----scrollbar-----*/
 
 	:global(::-webkit-scrollbar) {
-		width: 16px;
+		width: 20px;
 		background-color: transparent;
 	}
 
 	:global(::-webkit-scrollbar-thumb) {
-		background-color: var(--grey-two); /* color of the scroll thumb */
-		border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
-		border-bottom: 0.25rem solid transparent; /* creates padding around scroll thumb */
-		border-left: 0.25rem solid transparent; /* creates padding around scroll thumb */
-		border-top: 0.25rem solid transparent; /* creates padding around scroll thumb */
+		background-color: var(--grey-three);
+		border-radius: 20px;
+		border: 6px solid transparent;
 		background-clip: content-box;
 	}
 

From e913c17145887b95f7ab755d0cf4c996da3b6f0f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 16 Aug 2022 01:55:26 -0400
Subject: [PATCH 9/9] minor inconvenience

---
 src/lib/components/atoms/HeroImage.svelte           | 2 +-
 src/lib/components/molecules/ContributorHost.svelte | 1 -
 src/routes/__layout.svelte                          | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 60b62ae..4ab1dba 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -18,7 +18,7 @@
 	}
 	@media (max-width: 1919px) {
 		.hero-img {
-			position: absolute;
+			position: fixed;
 			height: 90vh;
 			top: 90px;
 			right: 7.5%;
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 319dd29..ce4da9c 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -10,7 +10,6 @@
 </div>
 
 <style>
-
     .social-host {
         gap: 2rem;
         width: 100;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 69c5635..45d45b6 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -110,7 +110,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
     }
 
 	/*-----scrollbar-----*/
-
 	:global(::-webkit-scrollbar) {
 		width: 20px;
 		background-color: transparent;