⚠️ The interactive globe has arrived (WIP but pretty good)

- Control the width/height of the globe via CSS

src/style/layouts/_explore.scss

@@ -11,8 +11,21 @@
         }
     }
 
+    // Globe
+    .globe {
+        margin-top: -25vw;
+        margin-bottom: -18vw;
+
+        @include breakpoint (xl) {
+            margin-top: -320px;
+            margin-bottom: -320px;
+        }
+    }
+
     // Browse
     .browse {
+        position: relative;
+        z-index: 3;
         padding-left: 0;
         padding-right: 0;
     }

src/style/molecules/_globe.scss

@@ -3,17 +3,31 @@
     position: relative;
     z-index: 2;
     width: 100vw;
-    height: 100vh;
+    height: 120vw;
+    overflow: hidden;
+    cursor: grab;
+    user-select: none;
 
-    .wrap {
-        @include breakpoint (xs) {
-            padding: 0;
+    // Cut
+    &__cut {
+        opacity: 0.5;
+        overflow: hidden;
+        width: 100vw;
+        height: 35vw;
+        min-height: 400px;
+        padding: 0;
+
+        // Partial globe
+        .globe {
+            margin-top: -18vw;
         }
     }
 
+    // Marker
     .marker {
         position: absolute;
         cursor: pointer;
+        display: block;
         top: 0;
         left: 0;
         width: 8px;
@@ -22,26 +36,53 @@
         opacity: 1;
         background: #ff6c89;
 
-        // Location name
         span {
+            transition: color 0.4s $ease-quart;
+        }
+
+        &__label {
             position: absolute;
-            bottom: 100%;
-            left: 100%;
+            bottom: -230%;
+            left: 230%;
+            color: transparent;
+        }
+        // Location city
+        &__city {
             font-family: $font-serif;
             font-size: rem(24px);
-            color: transparent;
-            transition: color 0.4s $ease-quart;
+            line-height: 1;
+        }
+        // Location country
+        &__country {
+            display: block;
+            opacity: 0.8;
+            font-family: $font-sans;
+            font-size: rem(10px);
+            line-height: 1;
+            text-transform: uppercase;
         }
 
         // Active
         &.is-active {
-            opacity: 1;
+            &, span {
+                opacity: 1;
+            }
 
-            span {
-                color: #FF6C89;
+            .marker {
+                &__city {
+                    color: #FF6C89;
+                }
+                &__country {
+                    color: $color-text;
+                }
             }
         }
     }
+
+    // Grabbing
+    &.is-grabbing {
+        cursor: grabbing;
+    }
 }
 
 

src/style/pages/_homepage.scss

@@ -66,10 +66,22 @@
         margin-top: 248px;
     }
 
+    // Description
     .style-description {
+        position: relative;
+        z-index: 3;
         color: $color-tertiary;
     }
 
+    // Globe
+    .globe {
+        margin-bottom: -52vh;
+
+        @include breakpoint (xl) {
+            margin-bottom: -550px;
+        }
+    }
+
     // Browse
     .browse {
         margin-top: 0;

src/style/pages/_page.scss

@@ -88,7 +88,7 @@
     }
 
     // Globe
-    .globe--part {
+    .globe__cut {
         margin-top: 8vw;
     }
 }