From e0d048fe8c8a81b83e05739df283e9adbba70740 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Wed, 29 Sep 2021 19:19:25 +0200
Subject: [PATCH] Add style to Footer

---
 src/components/atoms/SiteTitle.svelte  |  6 +--
 src/components/organisms/Footer.svelte |  5 +--
 src/style/atoms/_site-title.scss       | 31 ++++++++++++++++
 src/style/organisms/_footer.scss       | 51 ++++++++++++++++++++++++++
 src/style/style.scss                   |  2 +
 5 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 src/style/atoms/_site-title.scss
 create mode 100644 src/style/organisms/_footer.scss

diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte
index 814c6d7..5cf33d5 100644
--- a/src/components/atoms/SiteTitle.svelte
+++ b/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>
\ No newline at end of file
+</h2>
\ No newline at end of file
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index 1caea9d..d06e16c 100644
--- a/src/components/organisms/Footer.svelte
+++ b/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>
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
new file mode 100644
index 0000000..42b80b4
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
new file mode 100644
index 0000000..87a2e8d
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index 1071e56..262d762 100644
--- a/src/style/style.scss
+++ b/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