From 7f8dc8cec6cc775d721218f8591f1a1e696f3c23 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:16:25 +0200
Subject: [PATCH] Create a tag prop for SiteTitle + make it responsive

---
 src/components/atoms/SiteTitle.svelte  |  8 ++++----
 src/components/organisms/Footer.svelte |  2 +-
 src/style/atoms/_site-title.scss       | 21 +++++++++++++++------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte
index 3da3f30..d967abb 100644
--- a/src/components/atoms/SiteTitle.svelte
+++ b/src/components/atoms/SiteTitle.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     export let variant: string = 'lines'
-    export let type: string = 'title'
+    export let tag: string = 'h1'
 </script>
 
-{#if type === 'title'}
-    <h1 class="site-title {variant ? `site-title--${variant}` : ''}">
+{#if tag === 'title'}
+    <h1 class="site-title site-title--{variant}">
         <strong>Houses</strong>
         <span>Of The</span>
         <strong>World</strong>
     </h1>
 {:else}
-    <div class="site-title {variant ? `site-title--${variant}` : ''}">
+    <div class="site-title site-title--{variant}">
         <strong>Houses</strong>
         <span>Of The</span>
         <strong>World</strong>
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index 6acee8b..a0925d5 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -10,7 +10,7 @@
 <footer class="footer">
     <div class="container grid">
         <a href="/" class="footer__title" sveltekit:prefetch>
-            <SiteTitle />
+            <SiteTitle tag="div" />
         </a>
 
         <nav class="footer__links">
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
index 73291ee..3b35385 100644
--- a/src/style/atoms/_site-title.scss
+++ b/src/style/atoms/_site-title.scss
@@ -13,31 +13,40 @@
         letter-spacing: 1px;
     }
 
+    // Pink text
     &__pink {
         color: $color-secondary;
     }
 
 
-    // Variants
+    /*
+    ** Variants
+    */
     // Default: Two lines
     &--lines {
-        line-height: 0.5;
+        line-height: clamp(100%, 1.5vw, 100%);
+        font-size: rem(30px);
+
+        @include bp (sm) {
+            font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
+        }
 
         strong {
-            font-size: rem(30px);
-
             &:first-child {
                 display: block;
                 color: $color-lilas-bright;
             }
             &:last-child {
                 display: inline-block;
-                margin-left: -7px;
+                margin-left: -0.023em;
                 color: $color-secondary;
             }
         }
         span {
-            font-size: rem(14px);
+            font-size: 0.45em;
+        }
+        strong, span {
+            transition: color 0.25s;
         }
     }