feat: mobile view

src/app.css

@@ -5,6 +5,7 @@
     margin: 0;
     padding: 0;
     font-family: 'Manrope', sans-serif;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 html{
@@ -29,6 +30,7 @@ html, body{
 .wrapper{
     margin-inline: auto;
     width: min(87%, 100rem);
+    margin-top: 7rem;
 }
 
 :root {
@@ -97,12 +99,4 @@ h5{
 
 ::-webkit-scrollbar-thumb:hover{
     background-color: var(--grey-seven);
-}
-
-input,
-textarea,
-button,
-select,
-a {
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

src/lib/components/atoms/Button.svelte

@@ -8,16 +8,18 @@
 	function handleClick() {
 		location.href = href;
 	}
-
 </script>
 
-<button class={type} style="font-size: {fontsize};" on:click={handleClick}>
+<button 
+	class={type} 
+	style="font-size: {fontsize};" 
+	on:click={handleClick}
+>
 	<img src="icons/{icon}.svg" alt="{icon}"/>
-		<slot/>
+	<slot/>
 </button>
 
 <style>
-
 	button,
 	.button-secondary {
 		color: var(--white);
@@ -40,10 +42,6 @@
 		color: var(--grey-four)
 	}
 
-	.button-primary:hover {
-		box-shadow: 0px 0px 32px 1px var(--red-glow), 0px 0px 32px 1px var(--red-glow);
-	}
-
 	button:hover {
 		transform: translateY(-5%);
 	}
@@ -51,14 +49,15 @@
 		transform: scale(98%);
 	}
 
-	img {
+	button, 
-		height: 25px;
+	.button-secondary {
-	}
-
-	button, .button-secondary {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		gap: 0.5rem
 	}
+
+	img {
+		height: 25px;
+	}
 </style>

src/lib/components/atoms/HeroImage.svelte

@@ -1,9 +1,17 @@
 <script>
 </script>
 
-<div class="hero-img"><img height="100%" src="/manager.png" alt="Screenshot of ReVanced Manager" /></div>
+<div class="hero-img">
+	<img 
+		src="/manager.png" 
+		alt="Screenshot of ReVanced Manager" 
+	/>
+</div>
 
 <style>
+	img {
+		height: 100%;
+	}
 	.hero-img {
 		overflow: hidden;
 		height: 80vh;

src/lib/components/atoms/HeroTitle.svelte

@@ -0,0 +1,33 @@
+<h1>
+	<span class="redder">Re</span>Vanced
+</h1>
+
+<style>
+	.redder {
+		color: var(--red);
+	}
+
+	h1 {
+		color: var(--white);
+		font-weight: 700;
+		font-size: 5rem;
+		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: 4rem;
+		}
+	}
+</style>

src/lib/components/atoms/IndexHeroTitle.svelte

@@ -1,17 +0,0 @@
-<h1>
-	<span class="redder">Re</span>Vanced
-</h1>
-
-<style>
-	.redder {
-		color: var(--red);
-	}
-
-	h1 {
-		color: var(--white);
-		font-weight: 700;
-		font-size: 5rem;
-		letter-spacing: -0.04em;
-		line-height: 0.75em;
-	}
-</style>

src/lib/components/molecules/NavHost.svelte

@@ -17,44 +17,42 @@
 	});
 </script>
 
-<div class="nav-parent">
+<nav>
-	<nav>
+	<a href="/">
-		<a href="/">
+		<div class="logo">
-			<div class="logo">
+			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 
-				{#if $page.url.pathname !== '/'}
+			{#if $page.url.pathname !== '/'}
-					<h1><span>Re</span>Vanced</h1>
+				<h1><span>Re</span>Vanced</h1>
-				{/if}
+			{/if}
-			</div>
-		</a>
-		<ul>
-			<Navigation href="/">Home</Navigation>
-			<Navigation href="/download">Download</Navigation>
-			<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>
+	</a>
-</div>
+	<ul>
+		<Navigation href="/">Home</Navigation>
+		<Navigation href="/download">Download</Navigation>
+		<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>
 
 <style>
 
-	.nav-parent {
-		background-color: var(--grey-six);
-		padding: 0 5rem;
-		margin-bottom: 1rem;
-	}
 
 	nav {
+		padding: 0% 4% 0% 6%;
 		top: 0;
+		position: fixed;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		min-height: 70px;
+		height: 70px;
 		width: 100%;
+		background-color: var(--grey-six);
+		backdrop-filter: blur(15px);
+    	-webkit-backdrop-filter: blur(15px);
 	}
 
 	ul {

src/lib/components/organisms/Home.svelte

@@ -1,12 +1,12 @@
 <script>
 	import Button from '$lib/components/atoms/Button.svelte';
-	import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
+	import HeroTitle from '../atoms/HeroTitle.svelte';
 </script>
 
 <section class="hero">
 	<div class="hero-text">
 		<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
-		<IndexHeroTitle />
+		<HeroTitle />
 		<h2>
 			An extensible framework for building <br />application mods.
 		</h2>
@@ -23,23 +23,11 @@
 		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;
 	}
@@ -50,8 +38,24 @@
 		gap: 1rem;
 	}
 
-	.hero-text h1 {
+	@media (max-width: 768px) {
-		font-size: 6.5rem;
+		.hero {
-		letter-spacing: -0.04em;
+			padding-bottom: 0;
+			text-align: center;
+		}
+
+		h2 {
+			font-size: 1.5rem;
+		}
+
+		br {
+			content: ' ';
+		}
+		
+		.hero-buttons {
+			flex-direction: column;
+		}
+		
 	}
+	
 </style>

src/routes/+page.svelte

@@ -1,12 +1,12 @@
 <script>
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
-	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
+	import Home from '$lib/components/organisms/Home.svelte';
 	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
 </script>
 
 <div class="wrapper">
 	<div class="wrappezoid">
-		<IndexDescription />
+		<Home />
 		<div id="heroimg"><HeroImage /></div>
 	</div>
 </div>
@@ -14,7 +14,7 @@
 
 <style>
 	.wrappezoid {
-		height: calc(100vh - 90px);
+		height: calc(100vh - 120px);
 		display: flex;
 		flex-direction: row;
 		justify-content: center;
@@ -23,7 +23,7 @@
 	}
 	@media (max-width: 1700px) {
 		.wrappezoid {
-			justify-content: space-between;
+			justify-content: space-between;;
 		}
 	}
 	@media (max-width: 1052px) {
@@ -33,8 +33,10 @@
 	}
 	@media (max-width: 768px) {
 		.wrappezoid {
-			flex-direction: column;
+			display: flex;
-			height: auto;
+			justify-content: center;
+			align-items: center;
+			height: calc(65vh);
 		}
 	}
 </style>