From f3e74ec3ba122c7a56b609be8b184132a7840e14 Mon Sep 17 00:00:00 2001
From: afn <47723802+afnzmn@users.noreply.github.com>
Date: Wed, 12 Oct 2022 02:56:42 -0400
Subject: [PATCH] refactor: minor tweaks

---
 src/lib/components/atoms/Button.svelte        |  46 ++++----
 src/lib/components/atoms/Navigation.svelte    |   5 +-
 src/lib/components/atoms/SocialButton.svelte  |   5 +-
 src/lib/components/molecules/NavHost.svelte   |  26 ++++-
 .../components/molecules/SocialHost.svelte    |   8 +-
 src/routes/docs/+page.svelte                  | 108 ++++++++++++++++--
 6 files changed, 146 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index b83720e..478eda1 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -4,52 +4,48 @@
 	export let href = '#';
 	export let fontsize = '1.2rem';
 	export let icon = "";
-
-	function handleClick() {
-		location.href = href;
-	}
 </script>
 
-<button 
-	class={type} 
-	style="font-size: {fontsize};" 
-	on:click={handleClick}
->
-	<img src="icons/{icon}.svg" alt="{icon}"/>
-	<slot/>
-</button>
+<a href={href}>
+	<div 
+		class={type} 
+		style="font-size: {fontsize};" 
+	>
+		<img src="icons/{icon}.svg" alt="{icon}"/>
+		<slot/>
+	</div>
+</a>
 
 <style>
-	button,
-	.button-secondary {
-		color: var(--white);
+	a {
 		text-decoration: none;
+		border-radius: 16px;
+	}
+	div, .button-secondary {
+		color: var(--white);
 		font-weight: 600;
 		border: none;
 		border-radius: 16px;
-		padding: 12px 40px;
+		padding: 16px 40px;
 		display: block;
 		cursor: pointer;
 		background-color: var(--grey-two);
-		transition: transform 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one);
+		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;
 	}
 
 	.button-primary {
-		border: 3px solid var(--red);
 		background-color: var(--red);
 		box-shadow: 0px 0px 32px 1px var(--red-glow);
 		color: var(--grey-four)
 	}
 
-	button:hover {
-		transform: translateY(-5%);
+	div:hover {
+		transform: translateY(-4%);
+		filter: brightness(90%)
 	}
-	button:active {
-		transform: scale(98%);
-	}
-
-	button, 
+	
+	div, 
 	.button-secondary {
 		display: flex;
 		justify-content: center;
diff --git a/src/lib/components/atoms/Navigation.svelte b/src/lib/components/atoms/Navigation.svelte
index dba6b4e..a5eb535 100644
--- a/src/lib/components/atoms/Navigation.svelte
+++ b/src/lib/components/atoms/Navigation.svelte
@@ -18,11 +18,12 @@
 		display: inline-block;
 		position: relative;
 		font-weight: 500;
+		font-size: 0.9rem;
 		align-items: center;
 		border: var(--grey-six);
 		transition-timing-function: var(--bezier-one);
 		transition-duration: 0.25s;
-		padding: 11px 30px;
+		padding: 10px 25px;
 		border-radius: 200px;
 	}
 
@@ -40,6 +41,6 @@
 
 	li.selected	 {
 		background-color: var(--grey-three);
-		color: var(--red)
+		color: var(--white)
 	}
 </style>
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte
index ed44736..c2e8ed1 100644
--- a/src/lib/components/atoms/SocialButton.svelte
+++ b/src/lib/components/atoms/SocialButton.svelte
@@ -1,13 +1,12 @@
 <script>
-	export let src = 'socials/github.svg';
-	export let alt = 'GitHub';
+	export let src = 'github';
 	export let href = '#';
 </script>
 
 <div>
 	<button>
 		<a {href}>
-			<img {src} {alt} />
+			<img src='socials/{src}.svg' alt={src} />
 		</a>
 	</button>
 </div>
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
index 99e28b7..af16a82 100644
--- a/src/lib/components/molecules/NavHost.svelte
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import Navigation from '../atoms/Navigation.svelte';
+	import { fly } from 'svelte/transition';
+	import {quintOut} from 'svelte/easing';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	
 	let menuBtn: HTMLElement;
 	let menuOpen = false;
 	onMount(() => {
@@ -23,7 +26,12 @@
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 
 			{#if $page.url.pathname !== '/'}
-				<h1><span>Re</span>Vanced</h1>
+				<h1 
+				in:fly="{{ y: 10, easing: quintOut, duration: 700 }}"
+				out:fly="{{ y: 10, easing: quintOut, duration: 500 }}"
+				>
+					<span>Re</span>Vanced
+				</h1>
 			{/if}
 		</div>
 	</a>
@@ -42,7 +50,7 @@
 
 
 	nav {
-		padding: 0% 4% 0% 6%;
+		padding: 0% 1rem 0% 2rem;
 		top: 0;
 		position: fixed;
 		display: flex;
@@ -50,6 +58,7 @@
 		justify-content: space-between;
 		height: 70px;
 		width: 100%;
+		z-index: 999;
 		background-color: var(--grey-six);
 		backdrop-filter: blur(15px);
     	-webkit-backdrop-filter: blur(15px);
@@ -66,15 +75,20 @@
 		text-decoration: none;
 	}
 	.logo-image {
-		width: 2.4rem;
-		height: auto;
+		height: 1.75rem;
+		width: auto;
 		cursor: pointer;
 	}
 
+	.logo {
+		display:flex;
+		align-items: center;
+	}
+
 	h1 {
 		display: inline-block;
 		margin-left: 1rem;
-		font-size: 2.4rem;
+		font-size: 1.75rem;
 		letter-spacing: -0.04em;
 		height: 90%;
 	}
@@ -83,7 +97,7 @@
 		color: var(--red);
 	}
 
-	@media screen and (max-width: 1052px) {
+	@media screen and (max-width: 400px) {
 		h1 {
 			display: none;
 		}
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/lib/components/molecules/SocialHost.svelte
index 3dff5d7..613758a 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/lib/components/molecules/SocialHost.svelte
@@ -3,10 +3,10 @@
 </script>
 
 <div class="social-host">
-	<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" />
+	<SocialButton src="github" href="https://revanced.app/github" />
+	<SocialButton src="discord" href="http://revanced.app/discord" />
+	<SocialButton src="reddit" href="https://revanced.app/reddit" />
+	<SocialButton src="telegram" href="https://revanced.app/telegram" />
 </div>
 
 <style>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index a331ca9..0eacf97 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,21 +1,105 @@
 <script>
-
+    import Button from "$lib/components/atoms/Button.svelte";
+    import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 </script>
 
-<div>
-    <img src="https://cataas.com/cat/says/you%20are%20too%20early" alt="you are early"/>
-</div>
+<section in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
+    <div class="menu">
+        <div class="doc-section-selected">
+            <h3>Prerequisites</h3>
+        </div>
+        <div class="doc-section">
+            <h3>Using ReVanced CLI and installiing ReVanced</h3>
+        </div>
+    </div>
+    <div class="content">
+        <h6>docs/prerequisites</h6>
+        <br/>
+        <h4>Requirements</h4>
+        <h5>
+            <ul>
+                <li>ADB</li>
+                <li>x86/x86_64 host architecture</li>
+                <li>Zulu JDK 17</li>
+                <li>Latest Android SDK if you plan to build the integrations from the source</li>
+                <li>The APK file you want to patch (e.g. YouTube v17.36.37 or YouTube Music v5.23.50). If you want to mount patched applications as root, make sure the same version is installed on your device.</li>
+                <li>You can continue by either building everything from source or downloading the prebuilt packages.</li>
+            </ul>
+            <br/>
+            You can continue by either <a href="https://github.com/revanced/revanced-documentation/wiki/Building-from-source">building everything from source</a> or <a href="https://github.com/revanced/revanced-documentation/wiki/Downloading-prebuilt-packages">downloading the prebuilt packages</a>.
+        </h5>
+        <br/>
+        <br/>
+        <div class="button-wrapper">
+            <Button kind="secondary" fontsize="1rem">Using ReVanced CLI and installing ReVanced -></Button>
+        </div>
+    </div>
+</section>
 
 <style>
-    img {
-        
-        height:85vh;
-        width:auto;
+    section {
+        display:grid;
+        grid-template-columns: 300px 3fr;
     }
 
-    div {
-        display:flex;
-        justify-content: center;
-        align-items: center;
+    a {
+        text-decoration: none;
+        color: var(--white);
+        border-bottom: 1.5px solid var(--red);
+        padding: 0px 5px;
+        transition: all 0.4s var(--bezier-one);
+    }
+
+    a:hover {
+        background-color: var(--red);
+        border-radius: 6px;
+        color: var(--grey-four)
+    }
+
+    .menu, .content {
+        height: 100vh;
+        width:100%;
+    }
+
+    .menu {
+        padding: 90px 15px 0px 15px;
+        background-color: var(--grey-six);
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .content {
+        padding: 100px 30px 0px 30px;
+        background-color: var(--grey-one);
+    }
+
+    .doc-section {
+        background-color: var(--grey-one);
+        border-radius: 12px;
+        padding: 15px 20px;
+    }
+
+    .doc-section-selected {
+        background-color: var(--grey-three);
+        border-radius: 12px;
+        padding: 15px 20px;
+    }
+
+    .doc-section-selected > h3 {
+        color: var(--white);
+    }
+
+    .button-wrapper {
+        width:30rem;
+    }
+
+    ul {
+        padding-left: 2rem;
+    }
+
+    h4 {
+        margin-bottom: 0.5rem;
     }
 </style>
\ No newline at end of file