flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use Heading component on Credits and Subscribe page

Browse Source 
Adapt the entering animation as well, SiteTitle was fading
This commit is contained in:
Félix Péault
2022-08-01 11:30:20 +02:00
parent d2100c7167
commit 01859031aa
5 changed files with 12 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/molecules/Heading.svelte
View File

@@ -11,7 +11,7 @@
<section class="heading"> <section class="heading">
<SiteTitle variant="inline" /> <SiteTitle variant="inline" />
<p class="text-medium"> <div class="text text-medium">
{@html text} {@html text}
</p> </div>
</section> </section>

15
src/routes/credits.svelte
View File

@@ -8,9 +8,9 @@
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte' import PageTransition from '$components/PageTransition.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Heading from '$components/molecules/Heading.svelte'
import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
export let data: any export let data: any
@@ -26,7 +26,7 @@
autoplay: false, autoplay: false,
}) })
anime.set('.credits__heading > *, .credits__category > ul > li', { anime.set('.heading .text, .credits__category > ul > li', {
opacity: 0, opacity: 0,
translateY: 24, translateY: 24,
}) })
@@ -36,7 +36,7 @@
// Elements // Elements
timeline.add({ timeline.add({
targets: '.credits__heading > *, .credits__category', targets: '.heading .text, .credits__category',
opacity: 1, opacity: 1,
translateY: 0, translateY: 0,
delay: anime.stagger(350), delay: anime.stagger(350),
@@ -63,10 +63,9 @@
<PageTransition name="credits"> <PageTransition name="credits">
<section class="credits__heading"> <Heading
<SiteTitle variant="inline" /> text={data.credits.text}
<p class="text-medium">{data.credits.text}</p> />
</section>
<section class="credits__list"> <section class="credits__list">
<div class="grid container"> <div class="grid container">

4
src/routes/subscribe.svelte
View File

@@ -29,14 +29,14 @@
autoplay: false, autoplay: false,
}) })
anime.set('.subscribe__top > *, .subscribe__issues', { anime.set('.heading .text, .subscribe__top .newsletter-form, .subscribe__issues', {
opacity: 0, opacity: 0,
translateY: 24, translateY: 24,
}) })
// Elements // Elements
timeline.add({ timeline.add({
targets: '.subscribe__top > *, .subscribe__issues', targets: '.heading .text, .subscribe__top .newsletter-form, .subscribe__issues',
opacity: 1, opacity: 1,
translateY: 0, translateY: 0,
delay: anime.stagger(200), delay: anime.stagger(200),

2
src/style/molecules/_heading.scss
View File

@@ -19,7 +19,7 @@
} }
// Text // Text
:global(p) { .text {
max-width: 300px; max-width: 300px;
margin: 40px auto 0; margin: 40px auto 0;
font-weight: 200; font-weight: 200;

23
src/style/pages/_credits.scss
View File

@@ -1,28 +1,5 @@
// Credits Page // Credits Page
.credits { .credits {
// Intro Section
&__heading {
margin: 56px 0 72px;
color: $color-tertiary;
text-align: center;
@include bp (md) {
margin: 160px 0;
}
// Text
p {
max-width: 320px;
margin: 50px auto 0;
font-weight: 200;
@include bp (sm) {
margin: 72px auto 0;
max-width: 450px;
}
}
}
// List // List
&__list { &__list {
padding-bottom: 96px; padding-bottom: 96px;