Globe: Temporary fix for responsive sizing, Add correct margins top/bottom

- Ideally the globe would have to get the size within its container (.globe), set via CSS and not on the window

src/routes/_layout.svelte

@@ -111,23 +111,24 @@
     /*
     ** Manipulate data
     */
+    if (process.browser) {
         if ($countries) {
-        // Replace each countrie's continent by the database
-        $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
-
-        // Push each country to its continent
             $countries.forEach(country => {
-            const continent = $continents.find(cont => cont.id === country.continent.id)
+                const matchingContinent = $continents.find(continent => continent.id === country.continent.id)
-            continent.countries = []
+                // Replace continent with request data
-            if (!continent.countries.includes(country)) {
+                country.continent = matchingContinent
-                continent.countries.push(country)
+                // Add countries to each continents
-            }
+                matchingContinent.countries = []
+                matchingContinent.countries.push(country)
             })
         }
 
-    // Replace each location's country by the database
         if ($locations) {
-        $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
+            // Replace each location's country with request data
+            $locations.forEach(location => {
+                location.country = $countries.find(country => country.id === location.country.id)
+            })
+        }
     }
 </script>
 

src/routes/index.svelte

@@ -52,6 +52,7 @@
     // Props and Variables
     export let photos = ''
     const { page } = stores()
+    let winWidth = 0
 
     // Reset current location if existing
     currentLocation.set()
@@ -78,6 +79,8 @@
     />
 </svelte:head>
 
+<svelte:window bind:innerWidth={winWidth} />
+
 <main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="intro">
         <div class="anim-mask">
@@ -117,7 +120,11 @@
 
         {#if process.browser}
         <Lazy offset={window.innerHeight}>
-            <InteractiveGlobe />
+            <InteractiveGlobe size={
+                (winWidth <= 768) ? 0.96 :
+                (winWidth <= 992) ? 0.6 :
+                0.575}
+            />
         </Lazy>
         {/if}
 

src/style/layouts/_explore.scss

@@ -4,27 +4,17 @@
         position: relative;
         z-index: 3;
         max-width: 312px;
-        margin: 0 auto;
+        margin: 0 auto 72px;
 
         @include breakpoint (sm) {
             max-width: 472px;
-            margin-bottom: 0 !important;
+            margin-bottom: 120px;
         }
     }
 
     // Globe
-    .globe {
+    // .globe {
-        // margin-top: -96px;
-        // margin-bottom: -160px;
-
-        // @include breakpoint (sm) {
-        //     margin-bottom: calc(-120px - 6vw);
     // }
-        // @include breakpoint (xl) {
-        //     margin-top: -176px;
-        //     margin-bottom: -240px;
-        // }
-    }
 
     // Browse
     .browse {

src/style/molecules/_globe.scss

@@ -3,33 +3,35 @@
     position: relative;
     z-index: 2;
     width: 100vw;
-    height: 100vh;
+    height: 800px;
     overflow: hidden;
     cursor: grab;
-    // pointer-events: none;
     user-select: none;
 
+    @include breakpoint (sm) {
+        height: 1280px;
+    }
+    @include breakpoint (md) {
+        height: 1340px;
+    }
+    @include breakpoint (xl) {
+        height: 1670px;
+    }
 
-    ////DEBUG////
+    // DEBUG //
-    // background: rgba(255,0,0,0.2);
+    // background: rgba(red, 0.2);
     // &:after {
     //     content: "";
     //     display: block;
-    //     background: blue;
     //     position: absolute;
-    //     left: 0; top: 50%;
+    //     top: 50%;
+    //     left: 0;
+    //     background: blue;
     //     width: 100%;
     //     height: 2px;
     //     margin-top: -1px;
     // }
-    ////END DEBUG////
+    // END DEBUG //
-
-    @include breakpoint (sm) {
-        height: 140vw;
-    }
-    @include breakpoint (xl) {
-        height: 2000px;
-    }
 
 
     /*
@@ -70,7 +72,7 @@
             will-change: transform;
 
             span {
-                transition: color 0.4s $ease-quart, opacity 0.4s $ease-quart;
+                transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
             }
 
             // Hover glow effect
@@ -88,17 +90,25 @@
             // Location city
             &__city {
                 font-family: $font-serif;
-                font-size: rem(24px);
+                font-size: rem(18px);
                 line-height: 1;
+
+                @include breakpoint (sm) {
+                    font-size: rem(24px);
+                }
             }
             // Location country
             &__country {
                 display: block;
                 opacity: 0.8;
                 font-family: $font-sans;
-                font-size: rem(10px);
+                font-size: rem(8px);
                 line-height: 1;
                 text-transform: uppercase;
+
+                @include breakpoint (sm) {
+                    font-size: rem(10px);
+                }
             }
 
             // Active
@@ -134,14 +144,12 @@
             &.is-close {
                 .marker__label {
                     opacity: 0;
-                    pointer-events: none;
                 }
 
                 // Show labels on hover
                 &:hover {
                     .marker__label {
                         opacity: 1;
-                        pointer-events: auto;
                     }
                 }
             }

src/style/molecules/_location.scss

@@ -69,17 +69,19 @@
         z-index: 1;
         top: 50%;
         left: 50%;
-        transform: scale(0.6) translate(-50%, -50%);
+        transform: scale(0.6) translate(-50%, -50%) translateZ(0);
         transform-origin: 0 0;
         display: block;
-        width: 216px;
+        width: 184px;
-        height: 216px;
+        height: 184px;
         background: rgba($color-lightpurple, 0.3);
         border-radius: 100%;
         transition: transform 0.3s $ease-quart, opacity 0.3s $ease-quart;
+        will-change: transform;
 
         @include breakpoint (sm) {
-            transform: scale(0.94) translate(-50%, -50%);
+            width: 216px;
+            height: 216px;
         }
     }
 }

src/style/pages/_homepage.scss

@@ -79,15 +79,7 @@
     }
 
     // Globe
-
     // .globe {
-    //     margin-bottom: calc(-200px - 8vw);
-    //     @include breakpoint (sm) {
-    //         margin-bottom: calc(-100px - 28vw);
-    //     }
-    //     @include breakpoint (xl) {
-    //         margin-bottom: -550px;
-    //     }
     // }
 
     // Browse
@@ -124,9 +116,13 @@
 
     // Massive title
     .anim-title {
-        margin-top: -#{pxVW(352)};
+        margin-top: -#{pxVW(224)};
         margin-left: -60px;
 
+        @include breakpoint (sm) {
+            margin-top: -224px;
+        }
+
         span:nth-of-type(1) {
             letter-spacing: -6vw;
         }

src/style/pages/_page.scss

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