From abe09f0f693658be4eefa2adefaa577d3b2daed7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 9 Apr 2020 23:53:43 +0200
Subject: [PATCH] Fix responsive margins and spacing around the globe

---
 src/routes/choose.svelte            |  2 +-
 src/style/layouts/_explore.scss     | 20 ++++++++++++--------
 src/style/molecules/_globe.scss     |  9 ++++++++-
 src/style/organisms/_locations.scss |  3 +--
 src/style/pages/_homepage.scss      | 26 +++++++++++++++++++-------
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte
index e2352a1..46ace1e 100644
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -60,7 +60,7 @@
                 <TitleSite />
             </div>
 
-            <div class="page__description page__part style-description">
+            <div class="explore__description page__description page__part style-description">
                 <p>{$site.explore_globe}</p>
             </div>
         </div>
diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss
index 07baac3..da5ec64 100644
--- a/src/style/layouts/_explore.scss
+++ b/src/style/layouts/_explore.scss
@@ -1,24 +1,28 @@
 .explore {
     // Description
     &__description {
+        position: relative;
+        z-index: 3;
         max-width: 312px;
         margin: 0 auto;
-        margin-bottom: 72px;
 
         @include breakpoint (sm) {
             max-width: 472px;
-            margin-bottom: 120px;
+            margin-bottom: 0 !important;
         }
     }
 
     // Globe
     .globe {
-        margin-top: -25vw;
-        margin-bottom: -18vw;
+        margin-top: -96px;
+        margin-bottom: -160px;
 
+        @include breakpoint (sm) {
+            margin-bottom: calc(-120px - 6vw);
+        }
         @include breakpoint (xl) {
-            margin-top: -320px;
-            margin-bottom: -320px;
+            margin-top: -176px;
+            margin-bottom: -240px;
         }
     }
 
@@ -26,7 +30,7 @@
     .browse {
         position: relative;
         z-index: 3;
-        padding-left: 0;
-        padding-right: 0;
+        margin-top: 72px;
+        margin-bottom: 72px;
     }
 }
diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss
index b7db8e1..bc9d535 100644
--- a/src/style/molecules/_globe.scss
+++ b/src/style/molecules/_globe.scss
@@ -3,11 +3,18 @@
     position: relative;
     z-index: 2;
     width: 100vw;
-    height: 120vw;
+    height: 1040px;
     overflow: hidden;
     cursor: grab;
     user-select: none;
 
+    @include breakpoint (sm) {
+        height: 140vw;
+    }
+    @include breakpoint (xl) {
+        height: 2000px;
+    }
+
     // Cut
     &__cut {
         opacity: 0.5;
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index ba88f54..e5518b9 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,7 +1,5 @@
 .browse {
     width: 100%;
-    margin-top: 72px;
-    margin-bottom: 72px;
     overflow: hidden;
 
     @include breakpoint (sm) {
@@ -50,6 +48,7 @@
             grid-template-columns: repeat(3, 1fr);
             grid-column-gap: pxVW(96);
             grid-row-gap: pxVW(120);
+            // TODO: center alone locations on a row?
             min-height: 200px;
             margin-top: 112px;
             margin-bottom: pxVW(120);
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index d79f165..7531cca 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -9,14 +9,21 @@
         margin-left: -#{pxVW(160)};
     }
 
-
     // Description
     &__description {
+        margin-top: 14vw;
         margin-bottom: 72px;
+        padding: 0 32px;
         color: $color-text;
 
+        @include breakpoint (600px) {
+            margin-top: 72px;
+        }
         @include breakpoint (sm) {
-            margin: 0 auto 120px;
+            margin-left: auto;
+            margin-right: auto;
+            margin-bottom: 120px;
+            padding: 0;
         }
 
         p {
@@ -28,11 +35,11 @@
         }
     }
 
-
     // Carousel
     .carousel {
         position: relative;
 
+        // Beige background under
         &:after {
             content: "";
             position: absolute;
@@ -68,15 +75,16 @@
 
     // Description
     .style-description {
-        position: relative;
-        z-index: 3;
         color: $color-tertiary;
     }
 
     // Globe
     .globe {
-        margin-bottom: -52vh;
+        margin-bottom: calc(-200px - 8vw);
 
+        @include breakpoint (sm) {
+            margin-bottom: calc(-100px - 28vw);
+        }
         @include breakpoint (xl) {
             margin-bottom: -550px;
         }
@@ -84,7 +92,11 @@
 
     // Browse
     .browse {
-        margin-top: 0;
+        margin-top: 4vw;
+
+        @include breakpoint (xl) {
+            margin-top: 72px;
+        }
     }
 
     // Of text