From 01859031aadc06fe70271c3a3f633de02da47545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 1 Aug 2022 11:30:20 +0200
Subject: [PATCH] Use Heading component on Credits and Subscribe page

Adapt the entering animation as well, SiteTitle was fading
---
 src/components/molecules/Heading.svelte |  4 ++--
 src/routes/credits.svelte               | 15 +++++++--------
 src/routes/subscribe.svelte             |  4 ++--
 src/style/molecules/_heading.scss       |  2 +-
 src/style/pages/_credits.scss           | 23 -----------------------
 5 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/src/components/molecules/Heading.svelte b/src/components/molecules/Heading.svelte
index 4abb740..c1b0d1b 100644
--- a/src/components/molecules/Heading.svelte
+++ b/src/components/molecules/Heading.svelte
@@ -11,7 +11,7 @@
 <section class="heading">
     <SiteTitle variant="inline" />
 
-    <p class="text-medium">
+    <div class="text text-medium">
         {@html text}
-    </p>
+    </div>
 </section>
\ No newline at end of file
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index d918b29..44b434f 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -8,9 +8,9 @@
     // Components
     import Metas from '$components/Metas.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 Heading from '$components/molecules/Heading.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
 
     export let data: any
 
@@ -26,7 +26,7 @@
             autoplay: false,
         })
 
-        anime.set('.credits__heading > *, .credits__category > ul > li', {
+        anime.set('.heading .text, .credits__category > ul > li', {
             opacity: 0,
             translateY: 24,
         })
@@ -36,7 +36,7 @@
 
         // Elements
         timeline.add({
-            targets: '.credits__heading > *, .credits__category',
+            targets: '.heading .text, .credits__category',
             opacity: 1,
             translateY: 0,
             delay: anime.stagger(350),
@@ -63,10 +63,9 @@
 
 
 <PageTransition name="credits">
-    <section class="credits__heading">
-        <SiteTitle variant="inline" />
-        <p class="text-medium">{data.credits.text}</p>
-    </section>
+    <Heading
+        text={data.credits.text}
+    />
 
     <section class="credits__list">
         <div class="grid container">
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index fac07bc..e8ec5fd 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -29,14 +29,14 @@
             autoplay: false,
         })
 
-        anime.set('.subscribe__top > *, .subscribe__issues', {
+        anime.set('.heading .text, .subscribe__top .newsletter-form, .subscribe__issues', {
             opacity: 0,
             translateY: 24,
         })
 
         // Elements
         timeline.add({
-            targets: '.subscribe__top > *, .subscribe__issues',
+            targets: '.heading .text, .subscribe__top .newsletter-form, .subscribe__issues',
             opacity: 1,
             translateY: 0,
             delay: anime.stagger(200),
diff --git a/src/style/molecules/_heading.scss b/src/style/molecules/_heading.scss
index 30809f6..7866279 100644
--- a/src/style/molecules/_heading.scss
+++ b/src/style/molecules/_heading.scss
@@ -19,7 +19,7 @@
     }
 
     // Text
-    :global(p) {
+    .text {
         max-width: 300px;
         margin: 40px auto 0;
         font-weight: 200;
diff --git a/src/style/pages/_credits.scss b/src/style/pages/_credits.scss
index 9b5b647..c974544 100644
--- a/src/style/pages/_credits.scss
+++ b/src/style/pages/_credits.scss
@@ -1,28 +1,5 @@
 // Credits Page
 .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 {
         padding-bottom: 96px;