ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add the footer to the homepage (#273)

Browse Source
This commit is contained in:
Ushie 2025-02-04 02:49:32 +03:00 committed by GitHub
parent 2ef9fbc00f
commit 87ce20ff56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/Footer/FooterHost.svelte
View File

@ -11,6 +11,8 @@
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;
@ -22,14 +24,15 @@
</script>
<!-- squiggly divider line -->
<svg
{#if showDivider}
<svg
aria-hidden="true"
width="100%"
height="8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
in:fly={{ y: 10, easing: quintOut, duration: 750 }}
>
>
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
<path
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
@ -37,7 +40,8 @@
/>
</pattern>
<rect width="100%" height="100%" fill="url(#a)" />
</svg>
</svg>
{/if}
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<div class="footer-top">
<section class="main-content">

2
src/layout/Hero/HeroImage.svelte
View File

@ -27,7 +27,7 @@
}
@media (max-width: 1700px) {
.hero-img {
position: fixed;
position: absolute;
height: 100vh;
top: 115px;
right: 6rem;

2
src/lib/components/Wave.svelte
View File

@ -4,7 +4,7 @@
<style>
svg {
position: fixed;
position: absolute;
z-index: -999;
bottom: 0;
height: 35vh;

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

45
src/routes/+page.svelte
View File

@ -3,9 +3,17 @@
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';
let scrollY = 0;
let footerVisible = false;
$: footerVisible = scrollY >= 10;
</script>
<svelte:window bind:scrollY />
<Head
schemas={[
{
@ -117,22 +125,45 @@
]}
/>
<main>
<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
<div class="wrap">
<div class="wrappezoid">
<Home />
<div id="heroimg"><HeroImage /></div>
</div>
</div>
<div class="hide-on-scroll" class:hidden={footerVisible}>
<Wave />
<SocialHost />
</div>
</main>
<Wave />
<div class="footer">
<Footer showDivider={footerVisible ? true : false} />
</div>
<style>
<style lang="scss">
.hide-on-scroll {
transition: opacity 0.5s var(--bezier-one);
z-index: -999;
&.hidden {
height: 0;
opacity: 0;
}
}
main {
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;
@ -142,11 +173,15 @@
.wrappezoid {
height: calc(100vh - 225px);
display: flex;
flex-direction: row;
justify-content: center;
gap: 22rem;
align-items: center;
gap: 22rem;
}
.footer {
background-color: var(--background-one);
}
@media (max-width: 1700px) {
.wrappezoid {
justify-content: space-between;