fix: clean up random stuff man idk

src/app.css

@@ -13,19 +13,18 @@ html {
     padding: 0;
     font-size: 100%;
     box-sizing: border-box;
+    overflow-y: scroll;
 }
 
 body {
     margin: 0;
     padding: 0;
     background-color: var(--bg-color);
-    overflow: hidden;
 }
 
 html,
 body {
-    width: 100vw;
+    max-width: 100%;
-    overflow: auto;
 }
 
 .wrapper {
@@ -44,8 +43,8 @@ body {
     --grey-three: #373e4d;
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
-    --grey-six: hsla(220, 12%, 15%, 0.655);
+    --grey-six: #202126;
-    --grey-seven: #535563;
+    --grey-seven: #202126;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -67,7 +66,7 @@ h1 {
 h2 {
     color: var(--grey-five);
     font-weight: 400;
-    font-size: 1.2rem;
+    font-size: 1.3rem;
 }
 
 h3 {
@@ -98,13 +97,14 @@ h6 {
 }
 
 ::-webkit-scrollbar {
-    width: 11px;
+    width: 5px;
     background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--grey-two);
+    background-color: var(--grey-six);
     background-clip: content-box;
+    border-radius: 100px;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/lib/components/atoms/HeroImage.svelte

@@ -10,7 +10,7 @@
 <style>
   .hero-img :global(img) {
 	  height: 100%;
-	  border-radius: 2rem;
+	  border-radius: 1.75rem;
   }
 
 	.hero-img {
@@ -20,12 +20,9 @@
 		z-index: -1;
 		width: auto;
 		float: right;
-		padding: 0.75rem 0.75rem;
+		padding: 0.5rem 0.5rem;
-		border-radius: 2.5rem;
+		border-radius: 1.75rem;
-		background-color: var(--grey-two);
+		background-color: var(--grey-six);
-		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;
 		
 	}

src/lib/components/atoms/NavButton.svelte

@@ -46,4 +46,24 @@
 		background-color: var(--grey-two);
 		color: var(--accent-color);
 	}
+
+	@media (max-width: 768px) {
+		li {
+			padding: 1rem 1.5rem;
+			text-align: left;
+			justify-content: left;
+			border-radius: 16px;
+			font-size: 1.2rem;
+		}
+
+		li.selected {
+			background-color: var(--accent-color);
+		}
+
+		li.selected {
+			color: var(--grey-four)
+		}
+
+	}
+
 </style>

src/lib/components/atoms/TreeMenuButton.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	.package {
-		padding: 0.6rem;
+		padding: 0.6rem 1rem;
 		border-radius: 8px;
 		cursor: pointer;
 		display: flex;
@@ -23,23 +23,7 @@
 		gap: 0.6rem;
 		width: 100%;
 		user-select: none;
-		transition: all 0.4s var(--bezier-one);
+		transition: background-color 0.4s var(--bezier-one);
-	}
-
-	.package::before {
-		content: '';
-		height: 5px;
-		inline-size: 4px;
-		border-radius: 200px;
-		background-color: var(--accent-color);
-		transition: all 0.2s var(--bezier-one);
-		opacity: 0;
-	}
-
-	.selected::before {
-		height: 20px;
-		transition: all 0.3s var(--bezier-one);
-		opacity: 1;
 	}
 
 	h3 {
@@ -48,16 +32,18 @@
 
 	.package > h3 {
 		color: var(--grey-five);
-		transition: all 0.3s var(--bezier-one);
+		transition: color 0.3s var(--bezier-one);
 	}
 
 	.selected > h3 {
-		color: var(--accent-color);
+		color: var(--grey-four);
-		transition: all 0.3s var(--bezier-one);
+		transition: color 0.3s var(--bezier-one);
 	}
 
-	.package:hover,
 	.selected {
+		background-color: var(--accent-color);
+	}
+	.package:hover:not(.selected) {
 		background-color: var(--grey-six);
 	}
 

src/lib/components/molecules/MobileDropdown.svelte

@@ -10,16 +10,8 @@ import { slide } from 'svelte/transition';
   div {
     position: fixed;
     width: 100vw;
-    top: 75px;
+    top: 70px;
-
     z-index: 999;
-    /* background-color: var(--grey-six); guh @xafn */
+    background-color: var(--grey-seven);
-    background-color: hsla(220, 12%, 15%, 0.95);
-    border-style: solid;
-    border-color: var(--accent-color);
-
-    /* its rotated for some reason :skull: */
-    border-left: 0.5rem;
-    border-right: 0.5rem;
   }
 </style>

src/lib/components/molecules/NavHost.svelte

@@ -9,7 +9,7 @@
 	let menuOpen = false;
 
 	onMount(() => {
-    return RouterEvents.subscribe(event => {
+		return RouterEvents.subscribe((event) => {
 			if (event.navigating) {
 				menuOpen = false;
 			}
@@ -31,7 +31,9 @@
 				<Navigation href="/download">Download</Navigation>
 				<div hidden>
 					<!-- This is just temporary so the build doesn't fail -->
-			    <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
+					<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
+						>Docs</Navigation
+					>
 				</div>
 				<Navigation href="/patches">Patches</Navigation>
 			</span>
@@ -40,15 +42,21 @@
 		<div class="right-side">
 			<span class="desktop">
 				<Navigation href="/contributors/">
-			    <img src="/icons/contrib.svg" alt="Contributors"/>
+					<img src="/icons/contrib.svg" alt="Contributors" />
 				</Navigation>
 				<Navigation href="/api-settings/">
-			    <img src="/icons/settings.svg" alt="Settings"/>
+					<img src="/icons/settings.svg" alt="Settings" />
 				</Navigation>
 			</span>
 
 			<!-- Should probably be moved to its own component. -->
-	    <button class="menu-btn mobile" class:open={menuOpen} on:click={() => {menuOpen = !menuOpen}}>
+			<button
+				class="menu-btn mobile"
+				class:open={menuOpen}
+				on:click={() => {
+					menuOpen = !menuOpen;
+				}}
+			>
 				<span class="menu-btn__burger" />
 			</button>
 		</div>
@@ -58,11 +66,20 @@
 		{#if menuOpen}
 			<MobileDropdown>
 				<div class="mobile-menu">
+					<div>
 						<Navigation href="/">Home</Navigation>
 						<Navigation href="/download">Download</Navigation>
 						<Navigation href="/patches">Patches</Navigation>
-		      <Navigation href="/contributors">Contributors</Navigation>
+					</div>
-		      <Navigation href="/api-settings">Settings</Navigation>
+					
+					<div class="bottom-mobile-container">
+						<Navigation href="/contributors/">
+							<img src="/icons/contrib.svg" alt="Contributors" />
+						</Navigation>
+						<Navigation href="/api-settings/">
+							<img src="/icons/settings.svg" alt="Settings" />
+						</Navigation>
+					</div>
 				</div>
 			</MobileDropdown>
 		{/if}
@@ -76,19 +93,17 @@
 		top: 0;
 		left: 0;
 		z-index: 999;
+		border-bottom: 0.5px solid var(--grey-three);
 	}
 	.navbar {
 		padding: 0 1rem 0 2rem;
-
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		min-height: 70px;
 		width: 100%;
 		z-index: 999;
-	  background-color: var(--grey-six);
+		background-color: var(--grey-seven);
-	  backdrop-filter: blur(15px);
-	  -webkit-backdrop-filter: blur(15px);
 	}
 
 	.desktop {
@@ -98,12 +113,15 @@
 	}
 
 	.mobile-menu {
-    display: block;
+		display: flex;
-    width: 80vw;
+		flex-direction: column;
-    height: 100vh;
+		gap: 0.5rem;
+		width: 85vw;
+		height: calc(100vh - 70px);
 		white-space: pre;
+		padding: 2rem 0;
 		margin: 0 auto;
-    padding: 1ch 0;
+		justify-content: space-between;
 	}
 
 	a {
@@ -128,19 +146,29 @@
 		gap: 2.5rem;
 	}
 
-
 	img {
 		height: 20px;
 	}
 
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 768px) {
 		.desktop {
 			display: none;
 		}
+
+		img {
+			height: 25px;
+		}
+
+		
+	}
+
+	.bottom-mobile-container {
+		display: flex;
+		float: bottom;
 	}
 
 	/* Hamburger mmm yum */
-	@media screen and (min-width: 600px) {
+	@media screen and (min-width: 768px) {
 		.mobile {
 			display: none !important;
 		}

src/lib/components/molecules/PatchCell.svelte

@@ -127,7 +127,7 @@
 	}
 
 	.patch-container:active {
-		background-color: var(--grey-three);
+		filter: brightness(1.5);
 	}
 
 	.title {
@@ -171,4 +171,6 @@
 		display: flex;
 		flex-direction: column;
 	}
+
+
 </style>

src/lib/components/molecules/TreeMenu.svelte

@@ -12,13 +12,13 @@
 
 <style>
 	.menu {
-		height: calc(100vh - 7.5rem);
+		height: calc(100vh - 7rem);
 		width: 100%;
-		padding: 0px 10px 30px 10px;
+		padding: 0px 30px 30px 10px;
 		display: flex;
 		flex-direction: column;
 		position: sticky;
-		top: 7.5rem;
+		top: 7rem;
 		overflow-y: scroll;
 	}
 

src/lib/components/organisms/Home.svelte

@@ -5,7 +5,7 @@
 <section class="hero">
 	<div class="hero-text">
 		<h1>
-			Your favourite <br />apps, <span class="flicker">ad</span><span class="blue">vanced.</span>
+			<span>Re</span>Vanced
 		</h1>
 
 		<h2>
@@ -21,7 +21,7 @@
 
 <style>
 	h2 {
-		margin-top: 1.75\rem;
+		margin-top: 1rem;
 		margin-bottom: 2rem;
 	}
 
@@ -39,52 +39,13 @@
 		gap: 1rem;
 	}
 
-	.blue {
+	span {
 		color: var(--accent-color);
 	}
 
-	@keyframes flicker {
-		0% {
-			color: var(--grey-two);
-		}
-		10% {
-			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);
-		}
-	}
-
-	.flicker {
-		color: var(--accent-color);
-		/* animation: flicker 2s forwards;
-		animation-timing-function: var(--bezier-one);
-		animation-delay: 1.5s;
-		animation-iteration-count: 1; */
-	}
-
-
 	h1 {
 		line-height: 1em;
-		font-size: 4rem;
+		font-size: 5rem;
 	}
 
 	@media (max-width: 768px) {

src/routes/docs/+layout.svelte

@@ -13,22 +13,22 @@
 	<div class="menu">
 		<DocsNavTree tree={data.tree} />
 	</div>
-  <slot></slot>
+	<slot />
 </section>
 
 <style lang="scss">
-.menu {
+	.menu {
 		padding: 90px 15px 0px 15px;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
-}
+	}
 
-#doc-section-main {
+	#doc-section-main {
 		display: grid;
 		grid-template-columns: 300px 3fr;
 
 		height: 100vh;
 		width: 100%;
-}
+	}
 </style>

src/routes/patches/+page.svelte

@@ -31,7 +31,7 @@
 </svelte:head>
 
 <main>
-	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
 		<TreeMenu title="packages">
 			{#each packages as pkg}
 				<TreeMenuButton bind:current name={pkg} />
@@ -39,13 +39,15 @@
 		</TreeMenu>
 	</aside>
 
-	<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+	<div class="patches-container">
 		{#each patches as patch}
+			{#key current}
 				{#if search(current, patch.compatiblePackages) || !current}
-				<div>
+					<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
 						<PatchCell bind:current {patch} />
 					</div>
 				{/if}
+			{/key}
 		{/each}
 	</div>
 </main>
@@ -62,13 +64,13 @@
 	}
 
 	.patches-container {
-		margin-top: 7.5rem;
+		margin-top: 7rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 		width: 100%;
 		position: sticky;
 		z-index: 1;
-		min-height: calc(100vh - 7.5rem);
+		min-height: calc(100vh - 7rem);
 	}
 </style>