From ea567693c24e327aed906d37769215125f2c30dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Oct 2021 16:10:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Add=20hover=20effect=20on=20butt?=
 =?UTF-8?q?ons=20and=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Button.svelte     |  8 +++--
 src/components/organisms/Footer.svelte |  4 +--
 src/style/_base.scss                   |  1 +
 src/style/_effects.scss                | 48 ++++++++++++++++++++++++--
 src/style/atoms/_button.scss           | 33 ++++++++++++++++++
 src/style/organisms/_footer.scss       | 29 ----------------
 src/style/pages/_homepage.scss         | 25 +++++++++++++-
 7 files changed, 111 insertions(+), 37 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 19c37e6..89c51ca 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+    import SplitText from '$components/SplitText.svelte'
+
     export let text: string
     export let tag: string = 'a'
+    export let effect: string = 'link-3d'
     export let url: string = undefined
     export let disabled: boolean = undefined
 
     const classes = [
         'button',
+        effect ?? null,
         $$props.class
     ].join(' ').trim()
 </script>
@@ -13,11 +17,11 @@
 {#if tag === 'button'}
     <button class={classes} on:click disabled={disabled}>
         <slot />
-        {text}
+        <SplitText {text} clone={true} />
     </button>
 {:else if tag === 'a'}
     <a href={url} class={classes} on:click sveltekit:prefetch>
         <slot />
-        <span>{text}</span>
+        <SplitText {text} clone={true} />
     </a>
 {/if}
\ No newline at end of file
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index c3b24c5..95e36cf 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -18,13 +18,13 @@
             <ul>
                 {#each footer_links as { title, slug }}
                     <li>
-                        <a href="/{slug}" sveltekit:prefetch>
+                        <a href="/{slug}" class="link-3d" sveltekit:prefetch>
                             <SplitText text={title} clone={true} />
                         </a>
                     </li>
                 {/each}
                 <li class="instagram">
-                    <a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external">
+                    <a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external" class="link-3d">
                         <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>
diff --git a/src/style/_base.scss b/src/style/_base.scss
index edf6b5c..35b8aed 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -80,6 +80,7 @@ button {
 }
 .text-split {
     span, &__line {
+        display: inline-block;
         transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
     }
 }
\ No newline at end of file
diff --git a/src/style/_effects.scss b/src/style/_effects.scss
index b98ee7d..dd06cb7 100644
--- a/src/style/_effects.scss
+++ b/src/style/_effects.scss
@@ -1,6 +1,6 @@
-/**
- * Box shadows
- */
+/*
+** Box shadows
+*/
 // Box: Dark
 .shadow-box-dark {
     box-shadow:
@@ -36,4 +36,46 @@
         0 2px 2px $shadow-color,
         0 4px 4px $shadow-color,
         0 16px 16px $shadow-color;
+}
+
+
+
+/*
+** Hovers
+*/
+// 3D effect link
+.link-3d {
+    overflow: hidden;
+
+    .text-split {
+        perspective: 300px;
+    }
+    .text-split__line {
+        --offset-y: 100%;
+        transform-origin: bottom center;
+
+        &:last-child {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            color: $color-secondary;
+            transform: translate3d(0, var(--offset-y), 0);
+            opacity: 0;
+        }
+    }
+    &:hover {
+        .text-split__line {
+            &:first-child {
+                opacity: 0;
+                transform: scale(0.92) translate3d(0, 12%, 0);
+            }
+            &:last-child {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+                transition-delay: 55ms;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 2d7aff8..bc04e0d 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -9,6 +9,7 @@
     border-radius: 100vh;
     border: none;
     text-decoration: none;
+    transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
 
     @include bp (sm) {
         height: 48px;
@@ -22,6 +23,17 @@
         margin-right: 12px;
     }
 
+    // Hover effect
+    &:hover {
+        background: $color-secondary;
+    }
+    .text-split__line {
+        &:last-child {
+            --offset-y: 65%;
+            color: #fff;
+        }
+    }
+
 
     /*
     ** Size variants
@@ -56,15 +68,36 @@
     */
     // Pink
     &--pink {
+        color: $color-text;
         background: $color-secondary-light;
+
+        // Hover
+        &:hover {
+            color: #fff;
+            background: $color-secondary;
+        }
+        .text-split__line {
+            &:last-child {
+                color: #fff;
+            }
+        }
     }
+
+    // Beige
     &--beige {
         $color-button: #F2D3B8;
+        color: $color-text;
         background: $color-button;
 
         &[disabled] {
             background: none;
             border: 2px solid darken($color-button, 2);
         }
+
+        // Hover
+        &:hover {
+            color: $color-primary-tertiary20;
+            background: darken($color-button, 2.5);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index 61ff2ef..e0b65b0 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -56,7 +56,6 @@
         li {
             display: block;
             margin-bottom: 16px;
-            overflow: hidden;
 
             @include bp (sm) {
                 margin: 0 12px;
@@ -82,34 +81,6 @@
             @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: 8px;
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 812aff6..396bd3e 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -31,8 +31,31 @@
 
         // Button
         .button {
-            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
+            $color-shadow: rgba($color-shadow-brown, 0.05);
+            box-shadow:
+                0 1px 1px $color-shadow,
+                0 2px 2px $color-shadow,
+                0 4px 4px $color-shadow,
+                0 16px 16px $color-shadow;
             margin-bottom: 40px;
+
+            svg {
+                transition: fill 0.3s;
+            }
+            .text-split__line {
+                &:last-child {
+                    color: #fff;
+                }
+            }
+
+            // Hover
+            &:hover {
+                background-color: $color-primary-tertiary20;
+
+                svg {
+                    fill: $color-tertiary;
+                }
+            }
         }
     }
         // Text