ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-26 20:31:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fix index page styling and overflows

Browse Source
This commit is contained in:
oSumAtrIX
2025-05-06 12:43:40 +02:00
parent b3883d2460
commit 13cda4b59f
9 changed files with 150 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/routes/+page.svelte
View File

@@ -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>