Globe: Fix bottom when cut

src/globe/index.js

@@ -60,6 +60,7 @@ class WebglGlobe {
 
     // Build
     buildWebglScene () {
+        // Renderer
         this.renderer = new Renderer({
             // To allow transparent background on webgl canvas
             alpha: true,
@@ -67,6 +68,8 @@ class WebglGlobe {
             antialias: window.innerWidth < 768 || window.devicePixelRatio == 1 ? true : false,
         })
 
+        const elParent = document.body
+
         // we put the canvas at the end of body tag as 'position:fixed'
         // this is to avoid having a too big canvas if the globe needs to be very large:
         // so instead we move the globe as we scroll
@@ -75,7 +78,7 @@ class WebglGlobe {
         this.renderer.canvas.style.left = 0
         this.renderer.canvas.style.pointerEvents = 'none'
         this.renderer.canvas.style.zIndex = 100
-        document.body.appendChild(this.renderer.canvas)
+        elParent.appendChild(this.renderer.canvas)
 
         // The markers DOM nodes wrapper
         // this wrapper is added just next to the canvas, at the end of body tag
@@ -85,8 +88,7 @@ class WebglGlobe {
         this.$markerWrapper.style.top  = 0
         this.$markerWrapper.style.left = 0
         this.$markerWrapper.style.pointerEvents = 'none'
-        this.$markerWrapper.style.zIndex = 101
+        elParent.appendChild(this.$markerWrapper)
-        document.body.appendChild(this.$markerWrapper)
 
         // Load worldmap texture
         this.texture = Texture.fromUrl(this.renderer.gl, this.options.texture, {
@@ -282,10 +284,10 @@ class WebglGlobe {
 
     // Destroy
     destroy () {
-        this.disable()//stop render loop
+        this.disable() // Stop render loop
         document.body.removeChild(this.$markerWrapper)
         document.body.removeChild(this.renderer.canvas)
-        this.camera.delete()//to remove event listeners
+        this.camera.delete() // To remove event listeners
     }
 
     /**

src/style/_variables.scss

@@ -1,5 +1,6 @@
 // Colors
 $color-primary: #3C0576;
+$color-primary-darker: #2D0458;
 $color-secondary: #FF6C89;
 $color-secondary-bright: #FF0536;
 $color-text: #333;
@@ -9,16 +10,8 @@ $color-gray: #666;
 $color-lightgray: #999;
 
 // CSS Variables
-:root {
+// :root {
-    // Colors
+// }
-    --color-primary: #{$color-primary};
-    --color-secondary: #{$color-secondary};
-    --color-text: #{$color-text};
-    --color-tertiary: #{$color-tertiary};
-    --color-lightpurple: #{$color-lightpurple};
-    --color-gray: #{$color-gray};
-    --color-lightgray: #{$color-lightgray};
-}
 
 
 /* Fonts

src/style/layouts/_main.scss

@@ -1,6 +1,7 @@
 // Main page
 .housesof {
     position: absolute;
+    z-index: 120;
     top: 0;
     left: 0;
     width: 100%;

src/style/molecules/_globe.scss

@@ -46,6 +46,8 @@
     ** Markers
     */
     &__markers {
+        z-index: 210;
+
         // When dragging
         &.is-grabbing {
             cursor: grabbing;

src/style/organisms/_footer.scss

@@ -2,7 +2,7 @@
    FOOTER
 ========================================================================== */
 .footer {
-    background-color: #2D0458;
+    background-color: $color-primary-darker;
 
     .wrap {
         display: block;