From 68236bf39e58ad65bbeb797612b9068e1f39eb10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 13:40:13 +0100
Subject: [PATCH] Reveal inline SiteTitle

---
 src/components/atoms/SiteTitle.svelte | 29 +++++++++++++++++++++++----
 src/style/atoms/_site-title.scss      | 11 +++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte
index ef064fa..8afc426 100644
--- a/src/components/atoms/SiteTitle.svelte
+++ b/src/components/atoms/SiteTitle.svelte
@@ -1,13 +1,34 @@
 <script lang="ts">
+    import SplitText from '$components/SplitText.svelte'
+    import { reveal, fly } from '$animations/index'
+
     export let variant: string = 'lines'
     export let tag: string = 'h1'
 </script>
 
 {#if tag === 'h1'}
-    <h1 class="site-title site-title--{variant}">
-        <strong>Houses</strong>
-        <span>Of The</span>
-        <strong>World</strong>
+    <h1 class="site-title site-title--{variant}"
+        use:reveal={{
+            animation: fly,
+            options: {
+                children: '.char',
+                stagger: 40,
+                duration: 1000,
+                from: '110%',
+                opacity: false,
+            },
+            threshold: 0,
+        }}
+    >
+        <strong class="mask">
+            <SplitText text="Houses" mode="chars" />
+        </strong>
+        <span class="mask">
+            <SplitText text="Of The" mode="chars" />
+        </span>
+        <strong class="mask">
+            <SplitText text="World" mode="chars" />
+        </strong>
     </h1>
 {:else}
     <div class="site-title site-title--{variant}">
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
index 261b469..43e44ee 100644
--- a/src/style/atoms/_site-title.scss
+++ b/src/style/atoms/_site-title.scss
@@ -1,10 +1,10 @@
 .site-title {
     font-family: $font-serif;
 
-    strong {
+    & > strong {
         font-weight: 300;
     }
-    span {
+    & > span {
         position: relative;
         top: -4px;
         font-weight: 600;
@@ -63,12 +63,11 @@
             font-size: rem(96px);
         }
 
-        strong {
+        & > strong {
             color: $color-secondary;
         }
-
-        span {
-            display: block;
+        & > span {
+            // display: block;
             top: 0;
             margin: 10px 0;
             font-size: 0.3125em;