diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index b4debf7..f2afec6 100644 --- a/src/routes/_layout.svelte +++ b/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) + }) + } } diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 9e1720c..72538ce 100644 --- a/src/routes/index.svelte +++ b/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 @@ /> + +
@@ -117,7 +120,11 @@ {#if process.browser} - + {/if} diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss index b17c58b..69fb866 100644 --- a/src/style/layouts/_explore.scss +++ b/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 { - // margin-top: -96px; - // margin-bottom: -160px; - - // @include breakpoint (sm) { - // margin-bottom: calc(-120px - 6vw); - // } - // @include breakpoint (xl) { - // margin-top: -176px; - // margin-bottom: -240px; - // } - } + // .globe { + // } // Browse .browse { diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss index e52d15a..4450551 100644 --- a/src/style/molecules/_globe.scss +++ b/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//// - // background: rgba(255,0,0,0.2); + // DEBUG // + // 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; + // margin-top: -1px; // } - ////END DEBUG//// - - @include breakpoint (sm) { - height: 140vw; - } - @include breakpoint (xl) { - height: 2000px; - } + // END DEBUG // /* @@ -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; } } } diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss index 40ebf62..294bfb3 100644 --- a/src/style/molecules/_location.scss +++ b/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; - height: 216px; + width: 184px; + 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; } } } diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index bb32a65..f435b3a 100644 --- a/src/style/pages/_homepage.scss +++ b/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; } diff --git a/src/style/pages/_page.scss b/src/style/pages/_page.scss index 895656c..a9c61aa 100644 --- a/src/style/pages/_page.scss +++ b/src/style/pages/_page.scss @@ -93,7 +93,6 @@ // Globe // .globe { - // margin-top: 8vw; // } }