Globe edits WIP

- Added visible continents to options

src/style/molecules/_globe.scss

@@ -19,11 +19,11 @@
     //     position: absolute;
     //     left: 0; top: 50%;
     //     width: 100%;
-    //     height: 2px; 
+    //     height: 2px;
     //     margin-top:-1px;
     // }
     ////END DEBUG////
-    
+
     @include breakpoint (sm) {
         height: 140vw;
     }
@@ -31,102 +31,120 @@
         height: 2000px;
     }
 
-    // Cut
-    &--cut {
-        opacity: 0.5;
+
+    /*
+    ** Partial globe
+    */
+    &--part {
         overflow: hidden;
-        width: 100vw;
-        height: 35vw;
-        min-height: 400px;
-        padding: 0;
-    }
-}
-
-// Marker
-.marker {
-    position: absolute;
-    z-index: 2;
-    cursor: pointer;
-    display: block;
-    top: 0;
-    left: 0;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    opacity: 1;
-    background: #ff6c89;
-    will-change: transform;
-
-    span {
-        transition: color 0.4s $ease-quart;
+        height: 30vw;
+        min-height: 300px;
+        opacity: 0.5;
     }
 
-    // Hover glow effect
-    &.hover {
-        animation: globeMarkerPulse 1s;
-    }
-    
-    // Label
-    &__label {
-        position: absolute;
-        bottom: -230%;
-        left: 230%;
-        color: transparent;
-    }
-    // Location city
-    &__city {
-        font-family: $font-serif;
-        font-size: rem(24px);
-        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 {
-        &, span {
-            opacity: 1;
+
+    /*
+    ** Markers
+    */
+    &__markers {
+        // When dragging
+        &.is-grabbing {
+            cursor: grabbing;
         }
+
+        // Marker
         .marker {
-            &__city {
-                color: #FF6C89;
+            position: absolute;
+            z-index: 2;
+            cursor: pointer;
+            display: block;
+            top: -4px;
+            left: -4px;
+            width: 8px;
+            height: 8px;
+            padding: 4px;
+            border-radius: 100%;
+            opacity: 1;
+            background: #ff6c89;
+            will-change: transform;
+
+            span {
+                transition: color 0.4s $ease-quart, opacity 0.4s $ease-quart;
             }
+
+            // Hover glow effect
+            &.hover {
+                animation: globeMarkerPulse 1s;
+            }
+
+            // Label
+            &__label {
+                position: absolute;
+                bottom: -16px;
+                left: 16px;
+                color: transparent;
+            }
+            // Location city
+            &__city {
+                font-family: $font-serif;
+                font-size: rem(24px);
+                line-height: 1;
+            }
+            // Location country
             &__country {
-                color: $color-text;
+                display: block;
+                opacity: 0.8;
+                font-family: $font-sans;
+                font-size: rem(10px);
+                line-height: 1;
+                text-transform: uppercase;
+            }
+
+            // Active
+            &.is-active {
+                &, span {
+                    opacity: 1;
+                }
+                .marker {
+                    &__city {
+                        color: #FF6C89;
+                    }
+                    &__country {
+                        color: $color-text;
+                    }
+                }
+            }
+
+            // Left positioned
+            &.is-left {
+                .marker {
+                    &__label {
+                        left: auto;
+                        right: 32px;
+                    }
+                    &__country {
+                        text-align: right;
+                    }
+                }
+            }
+
+            // Marker is close to another one
+            // Show the marker infos only on hover
+            &.is-close {
+                .marker__label {
+                    opacity: 0;
+                    pointer-events: none;
+                }
+
+                // Show labels on hover
+                &:hover {
+                    .marker__label {
+                        opacity: 1;
+                        pointer-events: auto;
+                    }
+                }
             }
         }
     }
-}
-
-
-.marker.is-left {
-    .marker__label {
-        left: auto;
-        right: 360%;
-    }
-    .marker__country {
-        text-align: right;            
-    }
-}
-
-// Grabbing
-.markerWrapper.is-grabbing {
-    cursor: grabbing;
-}
-
-
-
-// Part globe
-.globe--part {
-    overflow: hidden;
-    height: 30vw;
-    min-height: 300px;
-    opacity: 0.5;
 }

src/style/pages/_page.scss

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