refactor: minor tweaks

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;

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>

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>

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

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>