WIP Interactive globe from Nico's sources

- The globe is a bit small? Ability to control the max-min size potentially
- Is there a reason why `globe.update()` runs every second? Sounds like a lot of resources?
- Have the ability to control the `addEventListener` of the markers to do whatever (in this case, going to a route by clicking on a link with a sapper-noscroll attribute + changing the href attribute on click - the method `goto` from Sapper scrolls back to top / maybe something to fix with the current transition issues?)
- Edited in `./index.js`:
    1. Using the class as `export default WebglGlobe` instead of Window (as Svelte or Sapper doesn't likayt)
- Edited in `Camera.js`:
    1. Commented line 218: `e.preventDefault();` would cause this error: `[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>`

src/style/molecules/_globe.scss

@@ -2,7 +2,8 @@
 .globe {
     position: relative;
     z-index: 2;
-    overflow-x: hidden;
+    width: 100vw;
+    height: 100vh;
 
     .wrap {
         @include breakpoint (xs) {
@@ -10,79 +11,35 @@
         }
     }
 
-    // Image (temp)
-    img {
-        position: relative;
-        z-index: 2;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 150%;
-        max-width: 1400px;
-        display: inline-block;
-        pointer-events: none;
-        user-select: none;
-    }
-
-    // Pins (temp)
-    &__pins {
+    .marker {
         position: absolute;
-        z-index: 3;
+        cursor: pointer;
         top: 0;
         left: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        min-height: 100%;
+        width: 8px;
+        height: 8px;
+        border-radius: 100%;
+        opacity: 1;
+        background: #ff6c89;
 
-        .pin {
-            margin: 16px 0;
-
-            &__name {
-                margin-left: 16px;
-            }
-        }
-    }
-
-    // Pin
-    .pin {
-        display: flex;
-        align-items: center;
-        // position: absolute;
-        // z-index: 2;
-
-        // Name
-        &__name {
-            padding: 8px 0;
-        }
-
-        // Dot
-        &__dot {
-            display: block;
-            width: 8px;
-            height: 8px;
-            background-color: $color-secondary;
-            border-radius: 100%;
-        }
-
-        // Place pin
-        &--place {
+        // Location name
+        span {
+            position: absolute;
+            bottom: 100%;
+            left: 100%;
             font-family: $font-serif;
-
-            a {
-                color: $color-secondary;
-                text-decoration: none;
-            }
+            font-size: rem(24px);
+            color: transparent;
+            transition: color 0.4s $ease-quart;
         }
 
-        // Country text
-        &--country {
-            font-family: $font-sans;
-            font-size: rem(10px);
-            color: rgba(#fff, 0.5);
-            text-transform: uppercase;
-            letter-spacing: 1px;
+        // Active
+        &.is-active {
+            opacity: 1;
+
+            span {
+                color: #FF6C89;
+            }
         }
     }
 }