From b46df04258be2b3681fe82734a6c7ecd6833cc94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 24 Jun 2022 11:55:39 +0200
Subject: [PATCH] Fix Error page styles and ListCTAs

---
 src/components/organisms/ListCTAs.svelte |  4 +++
 src/routes/__error.svelte                | 44 ++++++++++++++----------
 src/style/pages/_error.scss              | 15 ++++++--
 src/style/pages/_homepage.scss           |  6 +---
 4 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/components/organisms/ListCTAs.svelte b/src/components/organisms/ListCTAs.svelte
index 1fc512b..a6565a6 100644
--- a/src/components/organisms/ListCTAs.svelte
+++ b/src/components/organisms/ListCTAs.svelte
@@ -5,6 +5,10 @@
             justify-content: center;
         }
 
+        :global(li) {
+            display: block;
+        }
+
         & > :global(*) {
             margin: 20px auto 0;
 
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index fa01d0a..478fb5e 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../style/pages/shop";
+    @import "../style/pages/error";
 </style>
 
 <script lang="ts">
@@ -43,24 +43,30 @@
         />
 
         <ListCTAs>
-            <BoxCTA
-                url="{$page.url.pathname}#locations"
-                icon="globe"
-                label="Discover locations"
-                alt="Globe"
-            />
-            <BoxCTA
-                url="/photos"
-                icon="photos"
-                label="Browse all photos"
-                alt="Photos"
-            />
-            <BoxCTA
-                url="/shop"
-                icon="bag"
-                label="Shop our products"
-                alt="Shopping bag"
-            />
+            <li>
+                <BoxCTA
+                    url="{$page.url.pathname}#locations"
+                    icon="globe"
+                    label="Discover locations"
+                    alt="Globe"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
         </ListCTAs>
     </div>
 
diff --git a/src/style/pages/_error.scss b/src/style/pages/_error.scss
index fd38cfd..12fb3bc 100644
--- a/src/style/pages/_error.scss
+++ b/src/style/pages/_error.scss
@@ -8,7 +8,7 @@
         }
 
         // Heading
-        .heading {
+        :global(.heading) {
             padding: 0 24px;
             margin-bottom: 40px;
 
@@ -16,11 +16,22 @@
                 margin-bottom: 72px;
             }
 
-            p {
+            :global(p) {
                 @include bp (sm, max) {
                     max-width: 480px;
                 }
             }
         }
     }
+}
+
+:global(.page-error) {
+    // Globe
+    :global(.globe) {
+        margin-top: 96px;
+
+        @include bp (sm) {
+            margin-top: 156px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 934380c..a33e3f4 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -91,8 +91,8 @@
 
     // CTAS
     &__ctas {
-        text-align: center;
         margin-bottom: 96px;
+        text-align: center;
 
         @include bp (sm) {
             margin-bottom: 160px;
@@ -106,10 +106,6 @@
                 margin-top: 72px;
             }
         }
-
-        li {
-            display: block;
-        }
     }
 
     // World title