fix: more mobile responsive, tweaked ui

src/app.css

@@ -19,7 +19,6 @@ html {
 body {
     margin: 0;
     padding: 0;
-    line-height: 1.4;
     background-color: var(--bg-color);
 }
 
@@ -38,20 +37,19 @@ body {
     --white: #fff;
     --accent-color: #9fd5ff;
     --accent-color-two: hsl(207, 65%, 90%);
-    --bg-color: hsl(240, 5%, 11%);
+    --bg-color: hsl(240, 2%, 11%);
     --grey-one: #252b31;
     --grey-two: #28313b;
     --grey-three: #373e4d;
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
-    --grey-six: hsla(223, 14%, 15%, 0.655);
+    --grey-six: hsla(220, 12%, 15%, 0.655);
     --grey-seven: #535563;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 ::selection {
     background: var(--grey-six);
-    color: var(--white);
 }
 
 /*-----headings-----*/
@@ -59,14 +57,16 @@ body {
 h1 {
     color: var(--white);
     font-weight: 700;
-
     font-size: 1.5rem;
+    color: var(--white);
+    font-weight: 700;
+    letter-spacing: -0.04em;
 }
 
 h2 {
     color: var(--grey-five);
     font-weight: 400;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
 }
 
 h3 {

src/lib/components/atoms/Button.svelte

@@ -4,9 +4,10 @@
 	export let href = '#';
 	export let maxWidth = false;
 	export let icon = '';
+	export let target = '';
 </script>
 
-<a {href} rel="noreferrer">
+<a {href} {target}>
 	<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
 		<img src="../icons/{icon}.svg" alt={icon} />
 		<slot />
@@ -21,13 +22,13 @@
 
 	div,
 	.button-secondary {
-		font-size: 1.1rem;
+		min-width: max-content;
-		height: 60px;
+		font-size: 1rem;
 		color: var(--white);
 		font-weight: 600;
 		border: none;
-		border-radius: 16px;
+		border-radius: 12px;
-		padding: 16px 40px;
+		padding: 1rem 1.75rem;
 		display: block;
 		cursor: pointer;
 		background-color: var(--grey-two);
@@ -42,10 +43,11 @@
 	}
 
 	div:hover {
-		transform: translateY(-4%);
+		filter: brightness(85%);
-		filter: brightness(90%);
 	}
 
+
+
 	div,
 	.button-secondary {
 		display: flex;

src/lib/components/atoms/HeroImage.svelte

@@ -2,12 +2,14 @@
 </script>
 
 <div class="hero-img">
-	<img src="/manager.png" alt="Screenshot of ReVanced Manager" />
+	<img src="/manager_two.png" alt="Screenshot of ReVanced Manager" />
 </div>
 
 <style>
 	img {
 		height: 100%;
+		border-radius: 2rem;
+
 	}
 	.hero-img {
 		overflow: hidden;
@@ -16,19 +18,21 @@
 		z-index: -1;
 		width: auto;
 		float: right;
-		border-radius: 2rem;
+		padding: 0.75rem 0.75rem;
-		transform: rotate(3.7deg);
+		border-radius: 2.5rem;
-		box-shadow: 0 1rem 5rem 0 #0f111ad4;
+		background-color: var(--grey-two);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
+		box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
 		user-select: none;
+		
 	}
 	@media (max-width: 1700px) {
 		.hero-img {
-			border-radius: 3vh;
 			position: fixed;
-			height: 90vh;
+			height: 100vh;
-			top: 90px;
+			top: 115px;
-			right: 7.5%;
+			right: 6rem;
-			transform: rotate(3.7deg) translateY(5%);
 		}
 	}
 </style>

src/lib/components/atoms/TerminalWindow.svelte

@@ -0,0 +1,29 @@
+<div class="terminal-container">
+hhh
+</div>
+
+<style>
+    .terminal-container {
+        padding: 1rem;
+        height: 500px;
+        width: 700px;
+        background-color: var(--grey-six);
+        position: fixed;
+        z-index: -2;
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);    
+        right: 100px;
+        border-radius: 1rem;
+        border: 1px solid var(--grey-three)
+    }
+
+    @media (max-width: 1700px) {
+		.terminal-container {
+			position: fixed;
+			height: 100vh;
+            overflow: hidden;
+			top: 115px;
+			right: 6rem;
+		}
+	}
+</style>

src/lib/components/atoms/Wave.svelte

@@ -9,7 +9,7 @@
 <style>
 	svg {
 		position: fixed;
-		z-index: -2;
+		z-index: -999;
 		bottom: 0;
 		height: 35vh;
 		width: 100%;

src/lib/components/molecules/Footer.svelte

@@ -11,7 +11,7 @@ import { repositories } from "../../../data/api";
 			<h1>
 				<span>Re</span>Vanced
 			</h1>
-			<h6>Copyright © 2022, we are very legal</h6>
+			<h6>Copyright © 2022</h6>
 		</div>
 	</section>
 
@@ -20,7 +20,7 @@ import { repositories } from "../../../data/api";
 			<h5>Pages</h5>
 			<a href="/"><h6>Home</h6></a>
 			<a href="/download"><h6>Download</h6></a>
-			<a href="/docs"><h6>Docs</h6></a>
+			<!-- <a href="/docs"><h6>Docs</h6></a> -->
 			<a href="/patches"><h6>Patches</h6></a>
 			<a href="/contributors"><h6>Contributors</h6></a>
 		</div>
@@ -44,7 +44,7 @@ import { repositories } from "../../../data/api";
 		<div class="link-column">
 			<!-- to replace -->
 			<h5>Socials</h5>
-			<a href="/"><h6>Github</h6></a>
+			<a href="/"><h6>GitHub</h6></a>
 			<a href="/"><h6>Discord</h6></a>
 			<a href="/"><h6>Reddit</h6></a>
 			<a href="/"><h6>Twitter</h6></a>
@@ -59,6 +59,7 @@ import { repositories } from "../../../data/api";
 		margin: 4rem 0 5rem 0;
 		margin-inline: auto;
 		display: flex;
+		gap: 2rem;
 		justify-content: space-between;
 		width: min(85%, 90rem);
 	}
@@ -91,7 +92,8 @@ import { repositories } from "../../../data/api";
 
 	.links-container {
 		display: flex;
-		gap: 4rem;
+		gap: 5rem;
+
 	}
 
 	.link-column {
@@ -99,4 +101,19 @@ import { repositories } from "../../../data/api";
 		gap: 0.5rem;
 		flex-direction: column;
 	}
+
+
+	@media screen and (max-width: 700px) {
+		footer {
+			flex-direction: column;
+		}
+
+		.links-container {
+			display: grid;
+			gap: 3rem;
+			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+
+		}
+
+	}
 </style>

src/lib/components/molecules/NavHost.svelte

@@ -29,7 +29,7 @@
 		<ul>
 			<Navigation href="/">Home</Navigation>
 			<Navigation href="/download">Download</Navigation>
-			<Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
+			<!-- <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation> -->
 			<Navigation href="/patches">Patches</Navigation>
 		</ul>
 	</div>
@@ -116,26 +116,24 @@
 		width: 80px;
 		height: 60px;
 		cursor: pointer;
-		transition: all 0.5s ease-in-out;
+		transition: all 0.5s var(--bezier-one);
-		background: var(--grey-one);
-		border-radius: 3rem;
 	}
 	.menu-btn__burger {
-		width: 30px;
+		width: 25px;
-		height: 3px;
+		height: 2px;
-		background: #fff;
+		border-radius: 50px;
-		border-radius: 5px;
+		background: var(--grey-five);
-		transition: all 0.5s ease-in-out;
+		transition: all 0.5s var(--bezier-one);
 	}
 	.menu-btn__burger::before,
 	.menu-btn__burger::after {
 		content: '';
 		position: absolute;
-		width: 30px;
+		width: 25px;
-		height: 3px;
+		height: 2px;
-		background: #fff;
+		border-radius: 50px;
-		border-radius: 5px;
+		background: var(--grey-five);
-		transition: all 0.5s ease-in-out;
+		transition: all 0.5s var(--bezier-one);
 	}
 	.menu-btn__burger::before {
 		transform: translateY(-8px);
@@ -145,14 +143,14 @@
 	}
 	/* ANIMATION */
 	.menu-btn.open .menu-btn__burger {
-		transform: translateX(-50px);
+		transform: translateX(-20px);
 		background: transparent;
 		box-shadow: none;
 	}
 	.menu-btn.open .menu-btn__burger::before {
-		transform: rotate(45deg) translate(35px, -35px);
+		transform: rotate(45deg) translate(15px, -15px);
 	}
 	.menu-btn.open .menu-btn__burger::after {
-		transform: rotate(-45deg) translate(35px, 35px);
+		transform: rotate(-45deg) translate(15px, 15px);
 	}
 </style>

src/lib/components/molecules/PatchCell.svelte

@@ -4,7 +4,7 @@
 	import type { CompatiblePackage, Patch } from 'src/data/types';
 
 	export let patch: Patch;
-	export let current: boolean;
+	export let current;
 	const hasPatchOptions = !!patch.options.length;
 	let expanded: boolean = false;
 </script>
@@ -38,15 +38,13 @@
 
 	<div class="info-container">
 		{#each patch.compatiblePackages as pkg, i}
-			{#if current === false}
+			<a
-				<a
+				href="https://play.google.com/store/apps/details?id={pkg.name}"
-					href="https://play.google.com/store/apps/details?id={pkg.name}"
+				target="_blank"
-					target="_blank"
+				rel="noreferrer"
-					rel="noreferrer"
+			>
-				>
+				<h2>📦 {pkg.name}</h2>
-					<h2>📦 {pkg.name}</h2>
+			</a>
-				</a>
-			{/if}
 		{/each}
 		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
 		{#if patch.compatiblePackages[0].versions.length}
@@ -83,6 +81,7 @@
 		margin-right: 0.5rem;
 		font-size: 1.25rem;
 		color: var(--accent-color-two);
+		letter-spacing: normal;
 	}
 
 	h2 {
@@ -103,9 +102,7 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.25rem;
-		margin-bottom: 0.5rem;
+		margin: 0.3rem 0rem;
-		margin-left: -0.2rem;
-		margin-top: 0.5rem;
 		width: 100%;
 	}
 
@@ -125,7 +122,7 @@
 	.patch-container {
 		transition: all 2s var(--bezier-one);
 		background-color: var(--grey-six);
-		padding: 1.5rem;
+		padding: 1.25rem;
 		border-radius: 8px;
 	}
 
@@ -161,6 +158,7 @@
 		padding: 1rem;
 	}
 
+	/* thanks piknik */
 	.option + .option {
 		border-top: 1px solid var(--grey-three);
 	}

src/lib/components/molecules/TreeMenu.svelte

@@ -38,7 +38,4 @@
 		word-break: break-all;
 	}
 
-	/* .package-list:has(.loading) {
-        padding-top: 7.5rem;
-    } */
 </style>

src/lib/components/organisms/Home.svelte

@@ -5,28 +5,28 @@
 <section class="hero">
 	<div class="hero-text">
 		<h1>
-			<span>Re</span>Vanced
+			Your favourite <br />apps, <span class="flicker">ad</span><span class="blue">vanced.</span>
 		</h1>
 
 		<h2>
-			An extensible framework for building <br />application mods.
+			ReVanced is an extensible framework for building <br /> Android application mods.
 		</h2>
 
 		<div class="hero-buttons">
-			<Button icon="download" href="download" maxWidth="true" kind="primary">Download</Button>
+			<Button icon="download" href="download" kind="primary">Download Manager</Button>
-			<Button icon="docs" href="docs" maxWidth="true">Read The Docs</Button>
+			<Button icon="docs" href="patches">View Patches</Button>
 		</div>
 	</div>
 </section>
 
 <style>
 	h2 {
-		margin-top: 1.75rem;
+		margin-top: 1.75\rem;
 		margin-bottom: 2rem;
 	}
 
 	.hero {
-		padding-bottom: 10rem;
+		padding-bottom: 9rem;
 	}
 
 	.hero-text {
@@ -39,32 +39,52 @@
 		gap: 1rem;
 	}
 
-	span {
+	.blue {
 		color: var(--accent-color);
 	}
 
-	h1 {
+	@keyframes flicker {
-		color: var(--white);
+		0% {
-		font-weight: 700;
+			color: var(--grey-two);
-		font-size: 5rem;
+		}
-		letter-spacing: -0.04em;
+		10% {
-		line-height: 0.75em;
+			color: var(--accent-color);
+		}
+		15% {
+			color: var(--grey-two);
+		}
+		35% {
+			color: var(--accent-color);
+		}
+		45% {
+			color: var(--accent-color);
+		}
+		50% {
+			color: var(--grey-two);
+		}
+		52.5% {
+			color: var(--accent-color);
+		}
+		85% {
+			color: var(--accent-color);
+		}
+		100% {
+			color: var(--grey-two);
+		}
 	}
 
-	@media screen and (max-width: 1919px) {
+	.flicker {
-		h1 {
+		color: var(--accent-color);
-			font-size: 5rem;
+		/* animation: flicker 2s forwards;
-		}
+		animation-timing-function: var(--bezier-one);
+		animation-delay: 1.5s;
+		animation-iteration-count: 1; */
 	}
-	@media screen and (max-width: 1052px) {
+
-		h1 {
+
-			font-size: 4.5rem;
+	h1 {
-		}
+		line-height: 1em;
-	}
+		font-size: 4rem;
-	@media screen and (max-width: 768px) {
-		h1 {
-			font-size: 4rem;
-		}
 	}
 
 	@media (max-width: 768px) {
@@ -73,16 +93,27 @@
 			text-align: center;
 		}
 
+		h1 {
+			font-size: clamp(2.9rem, 10vw, 4rem);
+		}
+
 		h2 {
-			font-size: 1.5rem;
+			font-size: 1.2rem;
 		}
 
 		br {
 			content: ' ';
 		}
 
+		.hero-buttons {
+			justify-content: center;
+		}
+	}
+
+	@media screen and (max-width: 600px) {
 		.hero-buttons {
 			flex-direction: column;
+			align-items: center;
 		}
 	}
 </style>

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import Home from '$lib/components/organisms/Home.svelte';
 	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
 	import Wave from '$lib/components/atoms/Wave.svelte';
+	import TerminalWindow from '$lib/components/atoms/TerminalWindow.svelte';
 </script>
 
 <svelte:head>
@@ -16,6 +17,7 @@
 		<div class="wrappezoid">
 			<Home />
 			<div id="heroimg"><HeroImage /></div>
+			<!-- <TerminalWindow/> -->
 		</div>
 	</div>
 	<SocialHost />

src/routes/contributors/+page.svelte

@@ -49,6 +49,7 @@
 	h2 {
 		font-size: 1rem;
 		color: var(--grey-four);
+		text-align: center;
 	}
 
 	.text-container {
@@ -77,4 +78,10 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
+
+	@media screen and (max-width: 768px) {
+		h1 {
+			font-size: 2rem;
+		}
+	}
 </style>

src/routes/download/+page.svelte

@@ -3,30 +3,29 @@
 	import Button from '$lib/components/atoms/Button.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-  $: manager = $tools["revanced/revanced-manager"];
+	$: manager = $tools['revanced/revanced-manager'];
 </script>
 
 <div class="wrapper">
-	<h1>ReVanced Manager</h1>
+	<h1>ReVanced <span>Manager</span></h1>
 	<h6>Patch your favourite apps, on-device.</h6>
-	<Button kind="primary" icon="download" href={manager.assets[0].url}>{manager.version}</Button>
+	<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
-	<img src="../manager_two.png" alt="Manager Screenshot"/>
+	<img src="../manager_two.png" alt="Manager Screenshot" />
 </div>
 
 <Footer />
 
 <style>
-
 	div {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}
 	h1 {
-		font-size: 2.25rem;
+		font-size: 3rem;
-		font-weight: 600;
 		text-align: center;
-		color: var(--accent-color);
+		color: var(--white);
+
 	}
 
 	h6 {
@@ -37,6 +36,16 @@
 	img {
 		margin-top: 2.5rem;
 		margin-bottom: 2.5rem;
-		width: 25rem;
+		height: 50rem;
+		width: auto;
+		padding: 0.75rem 0.75rem;
+		border-radius: 2.5rem;
+		background-color: var(--grey-two);
+		box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
+		user-select: none;
+	}
+
+	span {
+		color: var(--accent-color)
 	}
 </style>

src/routes/patches/+page.svelte

@@ -14,7 +14,7 @@
 
 	let current: boolean = false;
 
-	function search(findTerm: string | boolean, array: CompatiblePackage[]) {
+	function search(findTerm: string | boolean, array: any) {
 		for (let i = 0; i < array.length; i++) {
 			if (array[i].name === findTerm) {
 				return true;
@@ -39,10 +39,10 @@
 		</TreeMenu>
 	</aside>
 
-	<div class="patches-container">
+	<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		{#each patches as patch, i}
+		{#each patches as patch}
 			{#if search(current, patch.compatiblePackages) || !current}
-				<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
+				<div>
 					<PatchCell bind:current {patch} />
 				</div>
 			{/if}
@@ -54,7 +54,7 @@
 <style>
 	main {
 		margin-inline: auto;
-		width: min(95%, 100rem);
+		padding: 0 2rem;
 		display: grid;
 		grid-template-columns: 300px 3fr;
 		gap: 1.5rem;