ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 14:44:28 +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

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

@ -11,6 +11,8 @@
import { RV_DMCA_GUID } from '$env/static/public'; import { RV_DMCA_GUID } from '$env/static/public';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let showDivider = true;
const aboutQuery = createQuery(['about'], queries.about); const aboutQuery = createQuery(['about'], queries.about);
let location: string; let location: string;
@ -22,22 +24,24 @@
</script> </script>
<!-- squiggly divider line --> <!-- squiggly divider line -->
<svg {#if showDivider}
aria-hidden="true" <svg
width="100%" aria-hidden="true"
height="8" width="100%"
fill="none" height="8"
xmlns="http://www.w3.org/2000/svg" fill="none"
in:fly={{ y: 10, easing: quintOut, duration: 750 }} 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 <pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
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" <path
stroke-linecap="square" 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"
/> stroke-linecap="square"
</pattern> />
<rect width="100%" height="100%" fill="url(#a)" /> </pattern>
</svg> <rect width="100%" height="100%" fill="url(#a)" />
</svg>
{/if}
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<div class="footer-top"> <div class="footer-top">
<section class="main-content"> <section class="main-content">

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

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

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

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

47
src/routes/+page.svelte
View File

@ -3,9 +3,17 @@
import Home from '$layout/Hero/HeroSection.svelte'; import Home from '$layout/Hero/HeroSection.svelte';
import SocialHost from '$layout/Hero/SocialHost.svelte'; import SocialHost from '$layout/Hero/SocialHost.svelte';
import Wave from '$lib/components/Wave.svelte'; import Wave from '$lib/components/Wave.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Head from '$lib/components/Head.svelte'; import Head from '$lib/components/Head.svelte';
let scrollY = 0;
let footerVisible = false;
$: footerVisible = scrollY >= 10;
</script> </script>
<svelte:window bind:scrollY />
<Head <Head
schemas={[ schemas={[
{ {
@ -117,22 +125,45 @@
]} ]}
/> />
<main> <main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
<div class="wrap"> <div class="wrap">
<div class="wrappezoid"> <div class="wrappezoid">
<Home /> <Home />
<div id="heroimg"><HeroImage /></div> <div id="heroimg"><HeroImage /></div>
</div> </div>
</div> </div>
<SocialHost /> <div class="hide-on-scroll" class:hidden={footerVisible}>
<Wave />
<SocialHost />
</div>
</main> </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 { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; 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 { .wrap {
margin-inline: auto; margin-inline: auto;
@ -142,11 +173,15 @@
.wrappezoid { .wrappezoid {
height: calc(100vh - 225px); height: calc(100vh - 225px);
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
gap: 22rem;
align-items: center; align-items: center;
gap: 22rem;
} }
.footer {
background-color: var(--background-one);
}
@media (max-width: 1700px) { @media (max-width: 1700px) {
.wrappezoid { .wrappezoid {
justify-content: space-between; justify-content: space-between;