From 04188ab7be952c7a75a20e3156736eabc172d769 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Tue, 5 Oct 2021 15:23:23 +0200
Subject: [PATCH] Edit responsive on Browse/Locations page

---
 src/components/atoms/SiteTitle.svelte      |  4 +--
 src/components/organisms/Newsletter.svelte |  4 ++-
 src/routes/locations.svelte                |  3 +-
 src/style/atoms/_site-title.scss           | 33 ++++++++++++++++++++++
 src/style/organisms/_locations.scss        |  1 +
 src/style/pages/_explore.scss              | 20 +++++++------
 static/images/icons/form.svg               |  3 --
 7 files changed, 53 insertions(+), 15 deletions(-)
 delete mode 100644 static/images/icons/form.svg

diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte
index 4298d3f..443a801 100644
--- a/src/components/atoms/SiteTitle.svelte
+++ b/src/components/atoms/SiteTitle.svelte
@@ -3,8 +3,8 @@
     console.log(variant)
 </script>
 
-<h2 class="site-title {variant ? `site-title--${variant}` : ''}">
+<h1 class="site-title {variant ? `site-title--${variant}` : ''}">
     <strong>Houses</strong>
     <span>Of The</span>
     <strong>World</strong>
-</h2>
\ No newline at end of file
+</h1>
\ No newline at end of file
diff --git a/src/components/organisms/Newsletter.svelte b/src/components/organisms/Newsletter.svelte
index 9d23bac..bf9aada 100644
--- a/src/components/organisms/Newsletter.svelte
+++ b/src/components/organisms/Newsletter.svelte
@@ -38,7 +38,9 @@
 
         <div class="past-issues">
             <a href="/subscribe">
-                <img src="/images/icons/form.svg" alt="newsletter icon">
+                <svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
+                </svg>
                 <span>See past issues</span>
             </a>
             <p>No spam, we promise!</p>
diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
index b0ec0f5..bddfc6a 100644
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -6,6 +6,7 @@
     import Locations from '$components/organisms/Locations.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle.svelte'
 
     export let photos: any
 
@@ -20,7 +21,7 @@
 
 <main class="explore">
     <section class="explore__intro">
-        <h1 class="title-huge">Houses</h1>
+        <SiteTitle variant="inline" />
         <p class="text-medium">Explore the globe to discover unique locations across the world</p>
     </section>
 
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
index 781106f..4fc20ef 100644
--- a/src/style/atoms/_site-title.scss
+++ b/src/style/atoms/_site-title.scss
@@ -50,4 +50,37 @@
             font-size: rem(32px);
         }
     }
+
+    // Inline Variant
+    &--inline {
+        display: block;
+        align-items: baseline;
+        color: $color-lightpurple;
+        justify-content: center;
+
+        @include bp (sm) {
+            display: flex;
+        }
+
+        strong {
+            color: $color-secondary !important;
+            font-size: rem(64px);
+
+            @include bp (sm) {
+                font-size: rem(96px);
+            }
+        }
+
+        span {
+            display: block;
+            top: 0;
+            margin: 8px 0 6px;
+            font-size: rem(20px);
+
+            @include bp (sm) {
+                font-size: rem(32px);
+                margin: 0 16px 0 20px;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 6b997e4..360ef4b 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -12,6 +12,7 @@
         max-width: 230px;
         text-align: center;
         color: $color-tertiary;
+        line-height: 1.4;
 
         @include bp (sm) {
             font-size: rem(28px);
diff --git a/src/style/pages/_explore.scss b/src/style/pages/_explore.scss
index ed69673..b5dc3d4 100644
--- a/src/style/pages/_explore.scss
+++ b/src/style/pages/_explore.scss
@@ -3,7 +3,6 @@
     // Intro Section
     &__intro {
         overflow: hidden;
-        margin-bottom: 72px;
         color: $color-tertiary;
         text-align: center;
 
@@ -11,23 +10,27 @@
         h1 {
             color: $color-secondary;
             line-height: 1;
-            margin-top: -20px;
+            margin-top: 56px;
 
             @include bp (sm) {
-                margin-top: -100px;
+                margin-top: 160px;
             }
         }
         // Text
         p {
-            max-width: 350px;
-            margin: 20px auto 56px;
+            max-width: 260px;
+            margin: 40px auto 0;
+            font-weight: 400;
 
             @include bp (sm) {
-                margin: 50px auto 72px;
-                max-width: 524px;
+                margin: 72px auto 130px;
+                max-width: 500px;
             }
         }
     }
+    .globe {
+        margin-top: 72px;
+    }
 
     // Locations
     &__locations {
@@ -39,7 +42,8 @@
     // Modules
     .grid-modules {
         grid-column: 1 / span var(--columns);
-        margin-bottom: 0;
+        margin: 96px 20px 0;
+        padding-bottom: 40px;
 
         @include bp (sm) {
             grid-column: 2 / span 22;
diff --git a/static/images/icons/form.svg b/static/images/icons/form.svg
deleted file mode 100644
index d644c88..0000000
--- a/static/images/icons/form.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="16" viewBox="0 0 20 16" fill="#fff" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
-</svg>
\ No newline at end of file