Add style to Footer

src/components/atoms/SiteTitle.svelte

@@ -2,8 +2,8 @@
     export let variant: string = 'large'
 </script>
 
-<h1 class="site-title site-title--{variant}">
-    <strong class="site-title__pink">Houses</strong>
+<h2 class="site-title site-title--{variant}">
+    <strong>Houses</strong>
     <span>Of The</span>
     <strong class="site-title__pink">World</strong>
-</h1>
+</h2>

src/components/organisms/Footer.svelte

@@ -8,7 +8,7 @@
 
 
 <footer class="footer">
-    <div class="container">
+    <div class="container grid">
         <SiteTitle />
 
         <nav class="footer__links">
@@ -31,8 +31,7 @@
             </ul>
         </nav>
 
-        <div class="ctf">
-            <span>A project from</span>
+        <div class="footer__ctf">
             <a href="https://cetrucflotte.com" target="_blank" rel="noopener external">
                 <img src="/images/logo-ctf.svg" alt="Cetrucflotte logo" width="140" height="24">
             </a>

src/style/atoms/_site-title.scss

@@ -0,0 +1,31 @@
+.site-title {
+    font-family: $font-serif;
+    line-height: 0.7;
+
+    strong {
+        font-size: rem(30px);
+        font-weight: 300;
+
+        &:first-child {
+            display: block;
+            color: $color-lilas-bright;
+        }
+        &:last-child {
+            display: inline-block;
+            margin-left: -6px;
+        }
+    }
+    span {
+        position: relative;
+        top: -4px;
+        font-size: rem(14px);
+        color: $color-lightpurple;
+        text-transform: uppercase;
+        font-weight: 600;
+        letter-spacing: 1px;
+    }
+
+    &__pink {
+        color: $color-secondary;
+    }
+}

src/style/organisms/_footer.scss

@@ -0,0 +1,51 @@
+.footer {
+    height: 120px;
+    background-color: $color-primary-darker;
+
+    .container {
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+
+    .site-title {
+        grid-column: 2 / span 3;
+        grid-row: 1;
+    }
+
+    &__links {
+        grid-column: 6 / span 15;
+        grid-row: 1;
+
+        ul {
+            display: flex;
+            justify-content: center;
+        }
+        li {
+            display: block;
+            margin: 0 16px;
+        }
+        a {
+            display: block;
+            color: #fff;
+            text-decoration: none;
+            font-size: rem(16px);
+            line-height: 1.3;
+        }
+        svg {
+            margin-right: 16px;
+        }
+    }
+
+    &__ctf {
+        grid-column: 19 / span 5;
+        grid-row: 1;
+        margin-left: auto;
+
+        span {
+            font-size: rem(12px);
+            color: $color-lilas-bright;
+            margin-right: 24px;
+        }
+    }
+}

src/style/style.scss

@@ -26,6 +26,7 @@
 @import "atoms/button";
 @import "atoms/badge";
 @import "atoms/arrow";
+@import "atoms/site-title";
 
 // Molecules
 @import "molecules/photo-card";
@@ -34,6 +35,7 @@
 // Organisms
 @import "organisms/locations";
 @import "organisms/newsletter";
+@import "organisms/footer";
 
 
 // Pages