Rework SiteTitle styling

src/components/atoms/SiteTitle.svelte

@@ -20,20 +20,14 @@
             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>
+        <SplitText text="Houses" mode="chars" class="pink mask" />
+        <SplitText text="Of The" mode="chars" class="middle mask" />
+        <SplitText text="World" mode="chars" class="pink mask" />
     </h1>
 {:else}
     <div class="site-title site-title--{variant}">
-        <strong>Houses</strong>
-        <span>Of The</span>
-        <strong>World</strong>
+        <span class="word-1">Houses</span>
+        <span class="middle word-2">Of The</span>
+        <span class="word-3">World</span>
     </div>
 {/if}

src/style/atoms/_site-title.scss

@@ -1,10 +1,10 @@
 .site-title {
     font-family: $font-serif;
 
-    & > strong {
+    .pink {
         font-weight: 300;
     }
-    & > span {
+    .middle {
         position: relative;
         top: -4px;
         font-weight: 600;
@@ -31,43 +31,41 @@
             font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
         }
 
-        strong {
-            &:first-child {
-                display: block;
-                color: $color-lilas-bright;
-            }
-            &:last-child {
-                display: inline-block;
-                margin-left: -0.023em;
-                color: $color-secondary;
-            }
+        .word-1 {
+            display: block;
+            color: $color-lilas-bright;
         }
-        span {
+        .word-2 {
             font-size: 0.45em;
         }
-        strong, span {
+        .word-3 {
+            display: inline-block;
+            margin-left: -0.023em;
+            color: $color-secondary;
+        }
+        span {
             transition: color 0.25s;
         }
     }
 
+
     // Inline Variant
     &--inline {
         display: block;
         align-items: baseline;
         color: $color-lightpurple;
         justify-content: center;
-        font-size: rem(64px);
+        font-size: rem(52px);
 
+        @include bp (mob-lg) {
+            font-size: rem(64px);
+        }
         @include bp (sm) {
             display: flex;
             font-size: rem(96px);
         }
 
-        & > strong {
-            color: $color-secondary;
-        }
-        & > span {
-            // display: block;
+        .middle {
             top: 0;
             margin: 10px 0;
             font-size: 0.3125em;
@@ -77,5 +75,8 @@
                 margin: 0 10px 0 20px;
             }
         }
+        .char {
+            transition: none;
+        }
     }
 }

src/style/organisms/_footer.scss

@@ -29,10 +29,14 @@
             margin: auto 0;
         }
 
-        // hover
-        .site-title:hover {
-            strong, span {
-                color: #fff;
+        .site-title {
+            line-height: 1;
+
+            // Hover
+            &:hover {
+                strong, span {
+                    color: #fff;
+                }
             }
         }
     }