diff --git a/package.json b/package.json index e2134f7..56a39cc 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 07f0b9c..821b6b8 100644 --- 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 diff --git a/src/animations/place.js b/src/animations/place.js index c4447dc..551d15c 100644 --- 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) diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index a473290..fa69979 100644 --- 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 } } } }`}) diff --git a/src/routes/location/[country]/[place].svelte b/src/routes/location/[country]/[place].svelte index 2a22509..1d20bbc 100644 --- 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 @@ - + Change @@ -158,10 +158,11 @@ - {#if illustration_desktop || illustration_mobile} + {#if illu_desktop || illu_mobile}
{/if} diff --git a/src/style/_base.scss b/src/style/_base.scss index dd08436..2141033 100644 --- 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; diff --git a/src/style/atoms/_button-control.scss b/src/style/atoms/_button-control.scss index 72e90ae..4df66d2 100644 --- 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; } diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 055e74b..2955d3d 100644 --- 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; diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss index 1e47a2d..04e1366 100644 --- 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); } } }