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

2020-04-11 19:33:37 +02:00
parent 90bdb5890d
commit 7180419fb0
9 changed files with 62 additions and 59 deletions
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
    "postcss": "^7.0.27",
    "postcss-load-config": "^2.1.0",
    "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.4.0",
+    "rollup": "^2.6.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-eslint": "^7.0.0",
    "rollup-plugin-glslify": "^1.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,10 +14,10 @@ devDependencies:
  '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
  '@babel/preset-env': 7.9.5_@babel+core@7.9.0
  '@babel/runtime': 7.9.2
-  '@rollup/plugin-alias': 3.0.1_rollup@2.4.0
-  '@rollup/plugin-commonjs': 11.0.2_rollup@2.4.0
-  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.4.0
-  '@rollup/plugin-replace': 2.3.1_rollup@2.4.0
+  '@rollup/plugin-alias': 3.0.1_rollup@2.6.0
+  '@rollup/plugin-commonjs': 11.0.2_rollup@2.6.0
+  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.6.0
+  '@rollup/plugin-replace': 2.3.1_rollup@2.6.0
  autoprefixer: 9.7.6
  babel-plugin-module-resolver: 4.0.0
  dotenv: 8.2.0
@@ -32,12 +32,12 @@ devDependencies:
  postcss: 7.0.27
  postcss-load-config: 2.1.0
  postcss-preset-env: 6.7.0
-  rollup: 2.4.0
-  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.4.0
+  rollup: 2.6.0
+  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.6.0
  rollup-plugin-eslint: 7.0.0
  rollup-plugin-glslify: 1.2.0
-  rollup-plugin-svelte: 5.2.1_rollup@2.4.0+svelte@3.20.1
-  rollup-plugin-terser: 5.3.0_rollup@2.4.0
+  rollup-plugin-svelte: 5.2.1_rollup@2.6.0+svelte@3.20.1
+  rollup-plugin-terser: 5.3.0_rollup@2.6.0
  sapper: 0.27.12_svelte@3.20.1
  svelte: 3.20.1
  svelte-preprocess: 3.7.1_svelte@3.20.1
@@ -912,23 +912,23 @@ packages:
    dev: false
    resolution:
      integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
-  /@rollup/plugin-alias/3.0.1_rollup@2.4.0:
+  /@rollup/plugin-alias/3.0.1_rollup@2.6.0:
    dependencies:
-      rollup: 2.4.0
+      rollup: 2.6.0
      slash: 3.0.0
    dev: true
    peerDependencies:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
-  /@rollup/plugin-commonjs/11.0.2_rollup@2.4.0:
+  /@rollup/plugin-commonjs/11.0.2_rollup@2.6.0:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
+      '@rollup/pluginutils': 3.0.8_rollup@2.6.0
      estree-walker: 1.0.1
      is-reference: 1.1.4
      magic-string: 0.25.7
      resolve: 1.15.1
-      rollup: 2.4.0
+      rollup: 2.6.0
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -936,14 +936,14 @@ packages:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
-  /@rollup/plugin-node-resolve/7.1.1_rollup@2.4.0:
+  /@rollup/plugin-node-resolve/7.1.1_rollup@2.6.0:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
+      '@rollup/pluginutils': 3.0.8_rollup@2.6.0
      '@types/resolve': 0.0.8
      builtin-modules: 3.1.0
      is-module: 1.0.0
      resolve: 1.15.1
-      rollup: 2.4.0
+      rollup: 2.6.0
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -951,20 +951,20 @@ packages:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
-  /@rollup/plugin-replace/2.3.1_rollup@2.4.0:
+  /@rollup/plugin-replace/2.3.1_rollup@2.6.0:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
+      '@rollup/pluginutils': 3.0.8_rollup@2.6.0
      magic-string: 0.25.7
-      rollup: 2.4.0
+      rollup: 2.6.0
    dev: true
    peerDependencies:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
-  /@rollup/pluginutils/3.0.8_rollup@2.4.0:
+  /@rollup/pluginutils/3.0.8_rollup@2.6.0:
    dependencies:
      estree-walker: 1.0.1
-      rollup: 2.4.0
+      rollup: 2.6.0
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -4074,11 +4074,11 @@ packages:
    hasBin: true
    resolution:
      integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.4.0:
+  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.6.0:
    dependencies:
      '@babel/core': 7.9.0
      '@babel/helper-module-imports': 7.8.3
-      rollup: 2.4.0
+      rollup: 2.6.0
      rollup-pluginutils: 2.8.2
    dev: true
    peerDependencies:
@@ -4100,10 +4100,10 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EqUFINMICD9U3MJ4jsxBcCRhzWNZJBWyAK2ol+2ClWIPaIWOuz0OY/Ml8rdT81F4aufwxJN5I9N7QvCth0OrUQ==
-  /rollup-plugin-svelte/5.2.1_rollup@2.4.0+svelte@3.20.1:
+  /rollup-plugin-svelte/5.2.1_rollup@2.6.0+svelte@3.20.1:
    dependencies:
      require-relative: 0.8.7
-      rollup: 2.4.0
+      rollup: 2.6.0
      rollup-pluginutils: 2.8.2
      sourcemap-codec: 1.4.8
      svelte: 3.20.1
@@ -4113,11 +4113,11 @@ packages:
      svelte: '*'
    resolution:
      integrity: sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==
-  /rollup-plugin-terser/5.3.0_rollup@2.4.0:
+  /rollup-plugin-terser/5.3.0_rollup@2.6.0:
    dependencies:
      '@babel/code-frame': 7.8.3
      jest-worker: 24.9.0
-      rollup: 2.4.0
+      rollup: 2.6.0
      rollup-pluginutils: 2.8.2
      serialize-javascript: 2.1.2
      terser: 4.6.7
@@ -4132,7 +4132,7 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  /rollup/2.4.0:
+  /rollup/2.6.0:
    dev: true
    engines:
      node: '>=10.0.0'
@@ -4140,7 +4140,7 @@ packages:
    optionalDependencies:
      fsevents: 2.1.2
    resolution:
-      integrity: sha512-dYE2ZKl9+kxuFKDaaSuauZjIPa8hcKDqI7WrOq1pTXYG4GJw+6ypLifGIvCKw5yJpSmuFohuimYpg0wfRXTCLw==
+      integrity: sha512-qbvQ9ZbvbhBdtRBZ/A4g+9z3iJQ1rHAtjinn3FiN+j5tfz8xiNyTE1JEEMcFWqlH7+NHadI9ieeqKdp8HwYLnQ==
  /run-async/2.4.0:
    dependencies:
      is-promise: 2.1.0
@@ -4892,7 +4892,7 @@ specifiers:
  postcss: ^7.0.27
  postcss-load-config: ^2.1.0
  postcss-preset-env: ^6.7.0
-  rollup: ^2.4.0
+  rollup: ^2.6.0
  rollup-plugin-babel: ^4.4.0
  rollup-plugin-eslint: ^7.0.0
  rollup-plugin-glslify: ^1.2.0
--- a/src/animations/place.js
+++ b/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)

--- a/src/routes/_layout.svelte
+++ b/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 }
                    }
                }
            }`})
--- a/src/routes/location/[country]/[place].svelte
+++ b/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>
--- a/src/style/_base.scss
+++ b/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;
--- a/src/style/atoms/_button-control.scss
+++ b/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;
        }
--- a/src/style/organisms/_photos.scss
+++ b/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;
--- a/src/style/pages/_place.scss
+++ b/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);
        }
    }
 }