From 72db85ede25f662a777d58090502e228c8e5f3d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 18 Oct 2021 16:19:04 +0200
Subject: [PATCH] Add hover effects on Footer links

---
 src/components/organisms/Footer.svelte | 13 ++++--
 src/style/organisms/_footer.scss       | 62 ++++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index a0925d5..c3b24c5 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
+    import SplitText from '$components/SplitText.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
 
     const { settings: { instagram, footer_links }}: any = getContext('global')
@@ -18,16 +19,20 @@
                 {#each footer_links as { title, slug }}
                     <li>
                         <a href="/{slug}" sveltekit:prefetch>
-                            {title}
+                            <SplitText text={title} clone={true} />
                         </a>
                     </li>
                 {/each}
                 <li class="instagram">
                     <a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external">
-                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M10 1.8c2.67 0 2.99.01 4.04.06.98.04 1.5.2 1.86.34a3.27 3.27 0 0 1 1.9 1.9c.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.04.98-.2 1.5-.34 1.86-.19.46-.4.8-.75 1.15a3.1 3.1 0 0 1-1.15.75c-.35.13-.88.3-1.86.34-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-.98-.04-1.5-.2-1.86-.34a3.1 3.1 0 0 1-1.15-.75 3.1 3.1 0 0 1-.75-1.15 5.6 5.6 0 0 1-.34-1.86A69.42 69.42 0 0 1 1.8 10c0-2.67.01-2.99.06-4.04.04-.98.2-1.5.34-1.86.19-.46.4-.8.75-1.15A3.1 3.1 0 0 1 4.1 2.2c.35-.13.88-.3 1.86-.34C7 1.81 7.33 1.8 10 1.8ZM10 0C7.28 0 6.94.01 5.88.06 4.8.11 4.08.28 3.45.52a4.9 4.9 0 0 0-1.77 1.16A4.9 4.9 0 0 0 .52 3.45a7.34 7.34 0 0 0-.46 2.43C.01 6.94 0 7.28 0 10s.01 3.06.06 4.12c.05 1.07.22 1.8.46 2.43.26.66.6 1.22 1.16 1.77.55.56 1.11.9 1.77 1.16a7.6 7.6 0 0 0 2.43.46c1.06.05 1.4.06 4.12.06s3.06-.01 4.12-.06a7.34 7.34 0 0 0 2.43-.46 4.9 4.9 0 0 0 1.77-1.16 4.9 4.9 0 0 0 1.16-1.77 7.6 7.6 0 0 0 .46-2.43c.05-1.06.06-1.4.06-4.12s-.01-3.06-.06-4.12a7.34 7.34 0 0 0-.46-2.43 4.9 4.9 0 0 0-1.16-1.77A4.9 4.9 0 0 0 16.55.52a7.34 7.34 0 0 0-2.43-.46C13.06.01 12.72 0 10 0Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm5.34-7.47a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" />
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.8c2.67 0 2.99.01 4.04.06.98.04 1.5.2 1.86.34a3.27 3.27 0 0 1 1.9 1.9c.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.04.98-.2 1.5-.34 1.86-.19.46-.4.8-.75 1.15a3.1 3.1 0 0 1-1.15.75c-.35.13-.88.3-1.86.34-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-.98-.04-1.5-.2-1.86-.34a3.1 3.1 0 0 1-1.15-.75 3.1 3.1 0 0 1-.75-1.15 5.6 5.6 0 0 1-.34-1.86A69.42 69.42 0 0 1 1.8 10c0-2.67.01-2.99.06-4.04.04-.98.2-1.5.34-1.86.19-.46.4-.8.75-1.15A3.1 3.1 0 0 1 4.1 2.2c.35-.13.88-.3 1.86-.34C7 1.81 7.33 1.8 10 1.8ZM10 0C7.28 0 6.94.01 5.88.06 4.8.11 4.08.28 3.45.52a4.9 4.9 0 0 0-1.77 1.16A4.9 4.9 0 0 0 .52 3.45a7.34 7.34 0 0 0-.46 2.43C.01 6.94 0 7.28 0 10s.01 3.06.06 4.12c.05 1.07.22 1.8.46 2.43.26.66.6 1.22 1.16 1.77.55.56 1.11.9 1.77 1.16a7.6 7.6 0 0 0 2.43.46c1.06.05 1.4.06 4.12.06s3.06-.01 4.12-.06a7.34 7.34 0 0 0 2.43-.46 4.9 4.9 0 0 0 1.77-1.16 4.9 4.9 0 0 0 1.16-1.77 7.6 7.6 0 0 0 .46-2.43c.05-1.06.06-1.4.06-4.12s-.01-3.06-.06-4.12a7.34 7.34 0 0 0-.46-2.43 4.9 4.9 0 0 0-1.16-1.77A4.9 4.9 0 0 0 16.55.52a7.34 7.34 0 0 0-2.43-.46C13.06.01 12.72 0 10 0Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm5.34-7.47a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" />
                         </svg>
-                        <span>Instagram</span>
+                        <SplitText
+                            class="instagram__text"
+                            text="Instagram"
+                            clone={true}
+                        />
                     </a>
                 </li>
             </ul>
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index cc67429..61ff2ef 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -19,6 +19,7 @@
     &__title {
         grid-column: span var(--columns);
         grid-row: 1;
+        display: block;
         margin-bottom: 40px;
         text-decoration: none;
 
@@ -27,6 +28,13 @@
             grid-row: 1;
             margin: auto 0;
         }
+
+        // hover
+        .site-title:hover {
+            strong, span {
+                color: #fff;
+            }
+        }
     }
 
     // Links
@@ -48,6 +56,7 @@
         li {
             display: block;
             margin-bottom: 16px;
+            overflow: hidden;
 
             @include bp (sm) {
                 margin: 0 12px;
@@ -61,7 +70,9 @@
             }
         }
         a {
-            display: block;
+            position: relative;
+            display: flex;
+            align-items: center;
             color: #fff;
             text-decoration: none;
             font-size: rem(14px);
@@ -71,12 +82,57 @@
             @include bp (md) {
                 font-size: rem(16px);
             }
+
+            // Hover effect
+            .text-split__line {
+                &:last-child {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    color: $color-secondary;
+                    transform: translate3d(0, 100%, 0);
+                    opacity: 0;
+                    transition-delay: calc(var(--i-w) * 100ms);
+                }
+            }
+            &:hover {
+                .text-split__line {
+                    &:first-child {
+                        opacity: 0;
+                        transform: translate3d(0, -25%, 0);
+                        transition-duration: 0.5s;
+                    }
+                    &:last-child {
+                        opacity: 1;
+                        transform: translate3d(0, 0, 0);
+                    }
+                }
+            }
         }
         svg {
-            margin-right: 12px;
+            margin-right: 8px;
 
             @include bp (md) {
-                margin-right: 16px;
+                margin-right: 12px;
+            }
+        }
+
+        // Instagram link
+        .instagram {
+            &__text {
+                position: relative;
+            }
+            svg {
+                transition: color 0.35s;
+            }
+
+            // Hover
+            a:hover {
+                svg {
+                    color: $color-secondary;
+                }
             }
         }
     }