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] 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;