Place: Add @1x desktop illustration size, Optimize responsive

src/animations/place.js

@@ -41,6 +41,8 @@ export const animateIn = () => {
     tl.add({
         targets: '.place__illustration',
         scale: [1.1, 1],
+        translateX: ['-50%', '-50%'],
+        translateZ: [0, 0],
         opacity: [0, 1]
     }, 0)
 

src/routes/_layout.svelte

@@ -43,8 +43,9 @@
                         country { id }
                         description
                         coordinates
-                        illustration_desktop { full_url }
-                        illustration_mobile { full_url }
+                        illu_desktop { full_url }
+                        illu_desktop_2x { full_url }
+                        illu_mobile { full_url }
                     }
                 }
             }`})

src/routes/location/[country]/[place].svelte

@@ -58,7 +58,7 @@
 
     // Update current location
     const location = $locations.find(loc => loc.slug === $page.params.place)
-    const { description, country, illustration_desktop, illustration_mobile } = location
+    const { description, country, illu_desktop, illu_desktop_2x, illu_mobile } = location
     currentLocation.set(location)
     currentPhotos.set(photos)
 
@@ -122,7 +122,7 @@
 
             <a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location">
                 <span class="center">
-                    <IconGlobe width="44" color="#fff" />
+                    <IconGlobe width={window.innerWidth <= 768 ? 32 : 44} color="#fff" />
                     <span>Change</span>
                 </span>
                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -158,10 +158,11 @@
             </div>
         </div>
 
-        {#if illustration_desktop || illustration_mobile}
+        {#if illu_desktop || illu_mobile}
         <div class="place__illustration"
-            style="{`--url-desktop: ${illustration_desktop ? `url(${illustration_desktop.full_url});` : undefined}`}
-                   {`--url-mobile: ${illustration_mobile ? `url(${illustration_mobile.full_url});` : undefined}`}"
+            style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
+                   {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
+                   {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
         />
         {/if}
     </section>

src/style/_base.scss

@@ -121,9 +121,12 @@ button {
         font-size: pxVW(180);
 
         @include breakpoint (sm) {
-            font-size: pxVW(160);
+            font-size: pxVW(130);
         }
         @include breakpoint (md) {
+            font-size: pxVW(160);
+        }
+        @include breakpoint (lg) {
             font-size: rem(160px);
         }
 
@@ -168,6 +171,7 @@ button {
 
 /* Text Styles
 ========================================================================== */
+// Location
 .style-location {
     font-family: $font-serif;
     font-size: 6vw;
@@ -191,12 +195,12 @@ button {
         }
     }
 
-
     .street {
         margin-bottom: 8px;
     }
 }
 
+// Information (capitalized text)
 .style-caps {
     font-family: $font-sans;
     font-size: rem(12px);
@@ -214,6 +218,7 @@ button {
     }
 }
 
+// Short text (description)
 .style-description {
     color: $color-tertiary;
     font-family: $font-sans-light;

src/style/atoms/_button-control.scss

@@ -210,6 +210,10 @@
         text-decoration: none;
 
         @include breakpoint (sm) {
+            width: 120px;
+            height: 120px;
+        }
+        @include breakpoint (lg) {
             width: 152px;
             height: 152px;
         }

src/style/organisms/_photos.scss

@@ -53,7 +53,6 @@
     .photo {
         position: relative;
         z-index: 4;
-        overflow: hidden;
     }
 
 
@@ -71,6 +70,7 @@
         // Photo
         .photo {
             padding-bottom: 80px;
+            overflow: hidden;
 
             @include breakpoint (sm) {
                 padding-bottom: 120px;

src/style/pages/_place.scss

@@ -22,7 +22,7 @@
         @include breakpoint (sm) {
             flex-direction: row;
             align-items: flex-end;
-            padding: pxVW(208) 0 pxVW(320);
+            padding: pxVW(240) 0 pxVW(288); // 528
             height: auto;
             max-height: none;
         }
@@ -165,9 +165,12 @@
         position: absolute;
         z-index: 0;
         top: 0;
-        left: 0;
+        left: 50%;
         width: 100%;
+        max-width: 1920px;
         height: 100%;
+        transform: translateX(-50%);
+        transform-origin: 0 0;
         background-image: var(--url-mobile);
         background-position: 0 0;
         background-repeat: no-repeat;
@@ -177,22 +180,9 @@
         @include breakpoint (sm) {
             background-image: var(--url-desktop);
         }
-
-        // Gradient on top
-        &:before {
-            content: "";
-            width: 100%;
-            height: 60vw;
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            background: linear-gradient(180deg, rgba($color-primary, 0%) 0%, $color-primary 100%);
-
-            @include breakpoint (lg) {
-                height: 50%;
-                min-height: 600px;
-            }
+        @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
+            (min-width: $screen-sm) and (min-resolution: 192dpi) {
+            background-image: var(--url-desktop-2x);
         }
     }
 }