Skip to content

Commit 87ce20f

Browse files
UshieUshie
authored
feat: Add the footer to the homepage (#273)
1 parent 2ef9fbc commit 87ce20f

File tree

4 files changed

+63
-24
lines changed

4 files changed

+63
-24
lines changed

‎src/layout/Footer/FooterHost.svelte

+20-16
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
import { RV_DMCA_GUID } from '$env/static/public';
1212
import { onMount } from 'svelte';
1313
14+
export let showDivider = true;
15+
1416
const aboutQuery = createQuery(['about'], queries.about);
1517
1618
let location: string;
@@ -22,22 +24,24 @@
2224
</script>
2325

2426
<!-- squiggly divider line -->
25-
<svg
26-
aria-hidden="true"
27-
width="100%"
28-
height="8"
29-
fill="none"
30-
xmlns="http://www.w3.org/2000/svg"
31-
in:fly={{ y: 10, easing: quintOut, duration: 750 }}
32-
>
33-
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
34-
<path
35-
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"
36-
stroke-linecap="square"
37-
/>
38-
</pattern>
39-
<rect width="100%" height="100%" fill="url(#a)" />
40-
</svg>
27+
{#if showDivider}
28+
<svg
29+
aria-hidden="true"
30+
width="100%"
31+
height="8"
32+
fill="none"
33+
xmlns="http://www.w3.org/2000/svg"
34+
in:fly={{ y: 10, easing: quintOut, duration: 750 }}
35+
>
36+
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
37+
<path
38+
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"
39+
stroke-linecap="square"
40+
/>
41+
</pattern>
42+
<rect width="100%" height="100%" fill="url(#a)" />
43+
</svg>
44+
{/if}
4145
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
4246
<div class="footer-top">
4347
<section class="main-content">

‎src/layout/Hero/HeroImage.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828
@media (max-width: 1700px) {
2929
.hero-img {
30-
position: fixed;
30+
position: absolute;
3131
height: 100vh;
3232
top: 115px;
3333
right: 6rem;

‎src/lib/components/Wave.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<style>
66
svg {
7-
position: fixed;
7+
position: absolute;
88
z-index: -999;
99
bottom: 0;
1010
height: 35vh;

‎src/routes/+page.svelte

+41-6
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,17 @@
33
import Home from '$layout/Hero/HeroSection.svelte';
44
import SocialHost from '$layout/Hero/SocialHost.svelte';
55
import Wave from '$lib/components/Wave.svelte';
6+
import Footer from '$layout/Footer/FooterHost.svelte';
67
import Head from '$lib/components/Head.svelte';
8+
9+
let scrollY = 0;
10+
let footerVisible = false;
11+
12+
$: footerVisible = scrollY >= 10;
713
</script>
814

15+
<svelte:window bind:scrollY />
16+
917
<Head
1018
schemas={[
1119
{
@@ -117,22 +125,45 @@
117125
]}
118126
/>
119127

120-
<main>
128+
<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
121129
<div class="wrap">
122130
<div class="wrappezoid">
123131
<Home />
124132
<div id="heroimg"><HeroImage /></div>
125133
</div>
126134
</div>
127-
<SocialHost />
135+
<div class="hide-on-scroll" class:hidden={footerVisible}>
136+
<Wave />
137+
<SocialHost />
138+
</div>
128139
</main>
129-
<Wave />
140+
<div class="footer">
141+
<Footer showDivider={footerVisible ? true : false} />
142+
</div>
130143

131-
<style>
144+
<style lang="scss">
145+
.hide-on-scroll {
146+
transition: opacity 0.5s var(--bezier-one);
147+
z-index: -999;
148+
149+
&.hidden {
150+
height: 0;
151+
opacity: 0;
152+
}
153+
}
132154
main {
133155
display: flex;
134156
flex-direction: column;
135157
gap: 1.5rem;
158+
margin-bottom: 3rem;
159+
transition:
160+
gap 0.5s var(--bezier-one),
161+
margin-bottom 0.5s var(--bezier-one);
162+
163+
&.hidden {
164+
gap: 0rem;
165+
margin-bottom: 0rem;
166+
}
136167
}
137168
.wrap {
138169
margin-inline: auto;
@@ -142,11 +173,15 @@
142173
.wrappezoid {
143174
height: calc(100vh - 225px);
144175
display: flex;
145-
flex-direction: row;
146176
justify-content: center;
147-
gap: 22rem;
148177
align-items: center;
178+
gap: 22rem;
149179
}
180+
181+
.footer {
182+
background-color: var(--background-one);
183+
}
184+
150185
@media (max-width: 1700px) {
151186
.wrappezoid {
152187
justify-content: space-between;

0 commit comments

Comments
 (0)