From 944871ae6236be7122d0544d40d8cf786fa61b53 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Mon, 4 Oct 2021 22:04:17 +0200
Subject: [PATCH] Edit site title large variant

---
 src/components/atoms/SiteTitle.svelte |  7 ++++---
 src/style/atoms/_site-title.scss      | 22 ++++++++++++++++++++++
 src/style/organisms/_footer.scss      |  4 ++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte
index 5cf33d5..4298d3f 100644
--- a/src/components/atoms/SiteTitle.svelte
+++ b/src/components/atoms/SiteTitle.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-    export let variant: string = 'large'
+    export let variant: string = undefined
+    console.log(variant)
 </script>
 
-<h2 class="site-title site-title--{variant}">
+<h2 class="site-title {variant ? `site-title--${variant}` : ''}">
     <strong>Houses</strong>
     <span>Of The</span>
-    <strong class="site-title__pink">World</strong>
+    <strong>World</strong>
 </h2>
\ No newline at end of file
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
index 42b80b4..781106f 100644
--- a/src/style/atoms/_site-title.scss
+++ b/src/style/atoms/_site-title.scss
@@ -28,4 +28,26 @@
     &__pink {
         color: $color-secondary;
     }
+
+    // Large variant
+    &--large {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        color: $color-lightpurple;
+        margin: 0 auto;
+        line-height: 1;
+
+        strong {
+            display: block;
+            font-size: rem(96px);
+            color: $color-secondary !important;
+        }
+        span {
+            display: block;
+            top: 0;
+            margin: 0 16px 0 24px;
+            font-size: rem(32px);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index a48eef0..38c2452 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -22,6 +22,10 @@
             grid-row: 1;
             margin: 0;
         }
+
+        strong:nth-of-type(2) {
+            color: $color-secondary;
+        }
     }
 
     &__links {