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 ($countries) {
-        // Replace each countrie's continent by the database
-        $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
+    if (process.browser) {
+        if ($countries) {
+            $countries.forEach(country => {
+                const matchingContinent = $continents.find(continent => continent.id === country.continent.id)
+                // Replace continent with request data
+                country.continent = matchingContinent
+                // Add countries to each continents
+                matchingContinent.countries = []
+                matchingContinent.countries.push(country)
+            })
+        }
 
-        // Push each country to its continent
-        $countries.forEach(country => {
-            const continent = $continents.find(cont => cont.id === country.continent.id)
-            continent.countries = []
-            if (!continent.countries.includes(country)) {
-                continent.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))
+        if ($locations) {
+            // 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}