From 13cda4b59f04d4bbe704102703523e530ea3dafb Mon Sep 17 00:00:00 2001
From: oSumAtrIX <johan.melkonyan1@web.de>
Date: Tue, 6 May 2025 12:43:40 +0200
Subject: [PATCH] fix: Fix index page styling and overflows

---
 src/app.scss                        |   2 +-
 src/layout/Footer/FooterHost.svelte | 119 ++++++++++++++--------------
 src/layout/Hero/HeroImage.svelte    |   7 --
 src/layout/Hero/HeroSection.svelte  |  70 +++++++++++-----
 src/layout/Hero/SocialButton.svelte |  12 ++-
 src/layout/Hero/SocialHost.svelte   |  38 ---------
 src/layout/Navbar/NavHost.svelte    |   1 -
 src/lib/components/Wave.svelte      |  14 ++--
 src/routes/+page.svelte             | 101 +++++++----------------
 9 files changed, 150 insertions(+), 214 deletions(-)
 delete mode 100644 src/layout/Hero/SocialHost.svelte

diff --git a/src/app.scss b/src/app.scss
index e21302c..abc8a45 100644
--- a/src/app.scss
+++ b/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);
 }
diff --git a/src/layout/Footer/FooterHost.svelte b/src/layout/Footer/FooterHost.svelte
index 94a5d41..3551ef6 100644
--- a/src/layout/Footer/FooterHost.svelte
+++ b/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 -->
-{#if showDivider}
+<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<svg
 		aria-hidden="true"
 		width="100%"
@@ -41,71 +37,74 @@
 		</pattern>
 		<rect width="100%" height="100%" fill="url(#a)" />
 	</svg>
-{/if}
-<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" />
-			<Query query={aboutQuery} let:data>
-				{#if data}
-					<div>
-						<p>
-							{data.about.about}
-						</p>
-					</div>
-				{/if}
-			</Query>
-		</section>
+	<div class="footer-wrapper">
+		<div class="footer-top">
+			<section class="main-content">
+				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+				<Query query={aboutQuery} let:data>
+					{#if data}
+						<div>
+							<p>
+								{data.about.about}
+							</p>
+						</div>
+					{/if}
+				</Query>
+			</section>
 
-		<section class="links-container">
-			<FooterSection title="Pages">
-				<li><a href="/">Home</a></li>
-				<li><a href="/download">Download</a></li>
-				<li><a href="/patches">Patches</a></li>
-				<li><a href="/contributors">Contributors</a></li>
-				<li><a href="/donate">Donate</a></li>
-			</FooterSection>
+			<section class="links-container">
+				<FooterSection title="Pages">
+					<li><a href="/">Home</a></li>
+					<li><a href="/download">Download</a></li>
+					<li><a href="/patches">Patches</a></li>
+					<li><a href="/contributors">Contributors</a></li>
+					<li><a href="/donate">Donate</a></li>
+				</FooterSection>
+				<Query query={aboutQuery} let:data>
+					{#if data}
+						<FooterSection title="Socials">
+							{#each data.about.socials as { name, url }}
+								<li>
+									<a href={url} target="_blank" rel="noreferrer">{name}</a>
+								</li>
+							{/each}
+						</FooterSection>
+					{/if}
+				</Query>
+			</section>
+		</div>
+		<div class="footer-bottom">
+			<div id="logo-name"><span>Re</span>Vanced</div>
+			<a href="/donate"><div>Donate</div></a>
 			<Query query={aboutQuery} let:data>
 				{#if data}
-					<FooterSection title="Socials">
-						{#each data.about.socials as { name, url }}
-							<li>
-								<a href={url} target="_blank" rel="noreferrer">{name}</a>
-							</li>
-						{/each}
-					</FooterSection>
+					<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
 				{/if}
 			</Query>
-		</section>
-	</div>
-	<div class="footer-bottom">
-		<div id="logo-name"><span>Re</span>Vanced</div>
-		<a href="/donate"><div>Donate</div></a>
-		<Query query={aboutQuery} let:data>
-			{#if data}
-				<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
-			{/if}
-		</Query>
-		<!-- DMCA Protection Badge -->
-		<a
-			href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
-			title="DMCA.com Protection Status"
-			class="dmca-badge"
-		>
-			<img
-				src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
-				alt="DMCA.com Protection Status"
-			/></a
-		>
+			<!-- DMCA Protection Badge -->
+			<a
+				href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
+				title="DMCA.com Protection Status"
+				class="dmca-badge"
+			>
+				<img
+					src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
+					alt="DMCA.com Protection Status"
+				/></a
+			>
+		</div>
 	</div>
 </footer>
 
 <style>
 	footer {
-		margin: 4rem 0 5rem 0;
-		margin-inline: auto;
-		padding-bottom: 1rem;
-		width: min(87%, 80rem);
+		background-color: var(--background-one);
+	}
+
+	.footer-wrapper {
+		max-width: min(87%, 100rem);
+		padding: 5rem 0rem;
+		margin: 0 auto;
 	}
 
 	.footer-top {
diff --git a/src/layout/Hero/HeroImage.svelte b/src/layout/Hero/HeroImage.svelte
index 3cb4e15..9633671 100644
--- a/src/layout/Hero/HeroImage.svelte
+++ b/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;
 		}
 	}
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
index 1e74a19..6c83b1f 100644
--- a/src/layout/Hero/HeroSection.svelte
+++ b/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">
+	<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-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 {
-		margin-bottom: 2rem;
+	.hero-buttons-container {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
 	}
 
-	.hero-text {
-		align-items: center;
+	.social-buttons {
+		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: 767px) {
+	@media (max-width: 1700px) {
 		.hero {
-			padding-bottom: 0;
-		}
-
-		br {
-			content: ' ';
+			height: 80vh;
 		}
 	}
 
 	@media screen and (max-width: 450px) {
-		.hero-buttons {
+		.internal-buttons {
 			flex-direction: column;
+			gap: 1rem;
+		}
+
+		.hero {
+			height: initial;
 		}
 	}
 </style>
diff --git a/src/layout/Hero/SocialButton.svelte b/src/layout/Hero/SocialButton.svelte
index 0142c27..a97f645 100644
--- a/src/layout/Hero/SocialButton.svelte
+++ b/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>
+	<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
 </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>
diff --git a/src/layout/Hero/SocialHost.svelte b/src/layout/Hero/SocialHost.svelte
deleted file mode 100644
index c848fed..0000000
--- a/src/layout/Hero/SocialHost.svelte
+++ /dev/null
@@ -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>
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index 7289098..4073874 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -204,7 +204,6 @@
 	#nav-container {
 		top: 0;
 		position: sticky;
-		z-index: 666;
 		width: 100%;
 	}
 
diff --git a/src/lib/components/Wave.svelte b/src/lib/components/Wave.svelte
index 175b58f..43d60c7 100644
--- a/src/lib/components/Wave.svelte
+++ b/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-timing-function: linear;
+		animation: wave-anim 30s;
+		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 		animation-iteration-count: infinite;
 		fill: var(--primary);
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e74c6a2..ece99d8 100644
--- a/src/routes/+page.svelte
+++ b/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 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;
-	}
+	let bottomVisibility = true;
 
 	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}>
-	<div class="wrap">
-		<div class="wrappezoid">
-			<Home />
-			<div id="heroimg"><HeroImage /></div>
+<main>
+	<div class="content">
+		<Home socialsVisibility={bottomVisibility} />
+		<div class="hero-img-container">
+			<HeroImage />
 		</div>
 	</div>
-	<div class="hide-on-scroll" class:hidden={footerVisible}>
-		<Wave bottom={scrollY} />
-		<SocialHost />
-	</div>
 </main>
-<div class="footer">
-	<Footer showDivider={footerVisible ? true : false} />
-</div>
+<Wave visibility={bottomVisibility} />
+<Footer />
 
 <style lang="scss">
-	.hide-on-scroll.hidden {
-		z-index: -2;
-		height: 0;
-		opacity: 0;
-		overflow: hidden;
-	}
-
-	main {
-		padding-block: 2rem;
+	.content {
 		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-		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;
+		align-items: center;
+		justify-content: space-evenly;
 		width: min(87%, 100rem);
 	}
-	.wrappezoid {
-		height: calc(100vh - 225px);
+	main {
+		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 {
-		background-color: var(--background-one);
+	.hero-img-container {
+		z-index: 1;
 	}
 
-	@media (max-width: 1700px) {
-		.wrappezoid {
-			justify-content: space-between;
-		}
-	}
-	@media (max-width: 1052px) {
-		#heroimg {
+	@media (max-width: 1100px) {
+		.hero-img-container {
 			display: none;
 		}
 	}
-	@media (max-width: 767px) {
-		.wrappezoid {
-			justify-content: center;
-			height: calc(65vh);
-		}
-	}
 </style>