fix: Fix index page styling and overflows

src/app.scss

@@ -77,7 +77,7 @@ body {
 
 	--yellow-one: hsl(59, 100%, 72%);
 
-	--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--bezier-one: ease-out;
 	--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
 		0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 }

src/layout/Footer/FooterHost.svelte

@@ -10,9 +10,6 @@
 
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
-
-	export let showDivider = true;
-
 	const aboutQuery = createQuery(['about'], queries.about);
 
 	let location: string;
@@ -23,8 +20,7 @@
 	});
 </script>
 
-<!-- squiggly divider line -->
+<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-{#if showDivider}
 	<svg
 		aria-hidden="true"
 		width="100%"
@@ -41,8 +37,7 @@
 		</pattern>
 		<rect width="100%" height="100%" fill="url(#a)" />
 	</svg>
-{/if}
+	<div class="footer-wrapper">
-<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<div class="footer-top">
 			<section class="main-content">
 				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
@@ -98,14 +93,18 @@
 				/></a
 			>
 		</div>
+	</div>
 </footer>
 
 <style>
 	footer {
-		margin: 4rem 0 5rem 0;
+		background-color: var(--background-one);
-		margin-inline: auto;
+	}
-		padding-bottom: 1rem;
+
-		width: min(87%, 80rem);
+	.footer-wrapper {
+		max-width: min(87%, 100rem);
+		padding: 5rem 0rem;
+		margin: 0 auto;
 	}
 
 	.footer-top {

src/layout/Hero/HeroImage.svelte

@@ -14,12 +14,7 @@
 	}
 
 	.hero-img {
-		overflow: hidden;
 		height: 70vh;
-		max-height: 70rem;
-		z-index: -1;
-		width: auto;
-		float: right;
 		padding: 0.5rem 0.5rem;
 		border-radius: 1.75rem;
 		background-color: var(--surface-seven);
@@ -27,9 +22,7 @@
 	}
 	@media (max-width: 1700px) {
 		.hero-img {
-			position: absolute;
 			height: 100vh;
-			top: 115px;
 			right: 6rem;
 		}
 	}

src/layout/Hero/HeroSection.svelte

@@ -1,60 +1,88 @@
 <script>
-	import Button from '$lib/components/Button.svelte';
+	import { queries } from '$data/api';
-
+	import { createQuery } from '@tanstack/svelte-query';
+	import Query from '$lib/components/Query.svelte';
 	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
 	import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import SocialButton from './SocialButton.svelte';
+
+	const aboutQuery = createQuery(['about'], queries.about);
+
+	export let socialsVisibility = true;
 </script>
 
 <section class="hero">
-	<div class="hero-text">
 	<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
 	<p>
 		Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 	</p>
-		<div class="hero-buttons">
+	<div class="hero-buttons-container">
+		<div class="hero-buttons internal-buttons">
 			<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
 			<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
 		</div>
+		<div class="hero-buttons social-buttons" style:opacity={socialsVisibility ? '100%' : '0'}>
+			<Query query={aboutQuery} let:data>
+				{#if data}
+					{#each data.about.socials.filter((s) => s.name != 'Website') as social}
+						<SocialButton {social} />
+					{/each}
+				{/if}
+			</Query>
+		</div>
 	</div>
 </section>
 
 <style>
 	h1 {
 		color: var(--text-one);
-		margin-bottom: 1.5rem;
 	}
 
-	p {
+	.hero-buttons-container {
-		margin-bottom: 2rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
 	}
 
-	.hero-text {
+	.social-buttons {
-		align-items: center;
+		justify-content: center;
+		position: absolute;
+		bottom: 1rem;
+		z-index: 1;
+		transition: opacity 0.1s var(--bezier-one);
 	}
 
 	.hero-buttons {
+		flex-wrap: wrap;
 		display: flex;
 		user-select: none;
 		gap: 1rem;
 	}
 
+	.hero {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
 	span {
 		color: var(--primary);
 	}
-
+	@media (max-width: 1700px) {
-	@media (max-width: 767px) {
 		.hero {
-			padding-bottom: 0;
+			height: 80vh;
-		}
-
-		br {
-			content: ' ';
 		}
 	}
 
 	@media screen and (max-width: 450px) {
-		.hero-buttons {
+		.internal-buttons {
 			flex-direction: column;
+			gap: 1rem;
+		}
+
+		.hero {
+			height: initial;
 		}
 	}
 </style>

src/layout/Hero/SocialButton.svelte

@@ -4,13 +4,11 @@
 </script>
 
 <a href={social.url} rel="noreferrer" target="_blank">
-	<div>
 	<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
-	</div>
 </a>
 
 <style>
-	div {
+	a {
 		border: 0;
 		width: 60px;
 		height: 60px;
@@ -23,7 +21,7 @@
 		user-select: none;
 	}
 
-	div {
+	a {
 		display: flex;
 		justify-content: center;
 	}
@@ -33,11 +31,11 @@
 		width: 30px;
 	}
 
-	div:hover {
+	a:hover {
 		transform: translateY(-5%);
 	}
 
-	div:hover img {
+	a:hover img {
 		filter: brightness(1.2);
 	}
 </style>

src/layout/Hero/SocialHost.svelte

@@ -1,38 +0,0 @@
-<script>
-	import SocialButton from './SocialButton.svelte';
-	import { queries } from '$data/api';
-	import { createQuery } from '@tanstack/svelte-query';
-	import Query from '$lib/components/Query.svelte';
-
-	const aboutQuery = createQuery(['about'], queries.about);
-</script>
-
-<div class="social-host">
-	<Query query={aboutQuery} let:data>
-		{#if data}
-			{#each data.about.socials.filter((s) => s.name != 'Website') as social}
-				<SocialButton {social} />
-			{/each}
-		{/if}
-	</Query>
-</div>
-
-<style>
-	.social-host {
-		width: min(87%, 100rem);
-		padding: 0 max(6.5%, calc(50vw - 50rem));
-		align-items: center;
-		user-select: none;
-		display: flex;
-		gap: 1rem;
-	}
-
-	@media screen and (max-width: 767px) {
-		.social-host {
-			width: 100%;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-		}
-	}
-</style>

src/layout/Navbar/NavHost.svelte

@@ -204,7 +204,6 @@
 	#nav-container {
 		top: 0;
 		position: sticky;
-		z-index: 666;
 		width: 100%;
 	}
 

src/lib/components/Wave.svelte

@@ -1,27 +1,29 @@
 <script>
-	export let bottom = 0;
+	export let visibility = true;
 </script>
 
 <svg
+	class="wave"
 	viewBox="0 0 1440 500"
 	xmlns="http://www.w3.org/2000/svg"
 	preserveAspectRatio="none"
-	style="bottom: {-bottom}; height: {bottom / 5 + 35}vh"
+	style="opacity: {visibility ? '100%' : '0'}"
 >
 	<path class="wave" />
 </svg>
 
 <style>
 	svg {
-		transition: height 1s var(--bezier-one);
+		transition: opacity 0.1s var(--bezier-one);
 		position: absolute;
-		z-index: -999;
+		bottom: 0rem;
 		width: 100%;
+		height: 40vh;
 	}
 
 	.wave {
-		animation: wave-anim 40s;
+		animation: wave-anim 30s;
-		animation-timing-function: linear;
+		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 		animation-iteration-count: infinite;
 		fill: var(--primary);
 	}

src/routes/+page.svelte

@@ -1,32 +1,23 @@
 <script>
 	import HeroImage from '$layout/Hero/HeroImage.svelte';
 	import Home from '$layout/Hero/HeroSection.svelte';
-	import SocialHost from '$layout/Hero/SocialHost.svelte';
-	import Wave from '$lib/components/Wave.svelte';
 	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Head from '$lib/components/Head.svelte';
+	import Wave from '$lib/components/Wave.svelte';
 	import { onMount } from 'svelte';
 
-	let scrollY = 0;
+	let bottomVisibility = true;
-	let footerVisible = false;
-
-	// temporary fix until rewrite is out
-	function checkVisibility() {
-		if (scrollY === 0) return (footerVisible = false);
-
-		const el = document.querySelector('#skiptab > main > div.hide-on-scroll.s-y_bCXRrkrYfP > div');
-		const buffer = 24; // 1.5rem gap
-
-		if (!el) return (footerVisible = scrollY >= 24);
-
-		const rect = el.getBoundingClientRect();
-		footerVisible = rect.bottom + buffer <= window.innerHeight;
-	}
 
 	onMount(() => {
+		const checkVisibility = () => {
+			const wave = document.querySelector('.wave');
+			bottomVisibility = !(wave && wave.getBoundingClientRect().bottom < window.innerHeight);
+		};
+
 		window.addEventListener('scroll', checkVisibility, { passive: true });
 		window.addEventListener('resize', checkVisibility);
 
+		checkVisibility(); // Initial check
 		return () => {
 			window.removeEventListener('scroll', checkVisibility);
 			window.removeEventListener('resize', checkVisibility);
@@ -34,8 +25,6 @@
 	});
 </script>
 
-<svelte:window bind:scrollY />
-
 <Head
 	schemas={[
 		{
@@ -147,75 +136,41 @@
 	]}
 />
 
-<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
+<main>
-	<div class="wrap">
+	<div class="content">
-		<div class="wrappezoid">
+		<Home socialsVisibility={bottomVisibility} />
-			<Home />
+		<div class="hero-img-container">
-			<div id="heroimg"><HeroImage /></div>
+			<HeroImage />
 		</div>
 	</div>
-	<div class="hide-on-scroll" class:hidden={footerVisible}>
-		<Wave bottom={scrollY} />
-		<SocialHost />
-	</div>
 </main>
-<div class="footer">
+<Wave visibility={bottomVisibility} />
-	<Footer showDivider={footerVisible ? true : false} />
+<Footer />
-</div>
 
 <style lang="scss">
-	.hide-on-scroll.hidden {
+	.content {
-		z-index: -2;
-		height: 0;
-		opacity: 0;
-		overflow: hidden;
-	}
-
-	main {
-		padding-block: 2rem;
 		display: flex;
-		flex-direction: column;
+		align-items: center;
-		gap: 1.5rem;
+		justify-content: space-evenly;
-		margin-bottom: 3rem;
-		transition:
-			gap 0.5s var(--bezier-one),
-			margin-bottom 0.5s var(--bezier-one);
-
-		&.hidden {
-			gap: 0rem;
-			margin-bottom: 0rem;
-		}
-	}
-	.wrap {
-		margin-inline: auto;
 		width: min(87%, 100rem);
 	}
-	.wrappezoid {
+	main {
-		height: calc(100vh - 225px);
+		overflow: hidden;
+		padding: 5rem 0;
+		// Instead of 100vh because of header.
+		height: 93vh;
 		display: flex;
-		justify-content: center;
+		flex-direction: column;
 		align-items: center;
-		gap: 22rem;
 	}
 
-	.footer {
+	.hero-img-container {
-		background-color: var(--background-one);
+		z-index: 1;
 	}
 
-	@media (max-width: 1700px) {
+	@media (max-width: 1100px) {
-		.wrappezoid {
+		.hero-img-container {
-			justify-content: space-between;
-		}
-	}
-	@media (max-width: 1052px) {
-		#heroimg {
 			display: none;
 		}
 	}
-	@media (max-width: 767px) {
-		.wrappezoid {
-			justify-content: center;
-			height: calc(65vh);
-		}
-	}
 </style>