diff --git a/package.json b/package.json index 0a57d78..934a74a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "lint": "eslint --ignore-path .gitignore ." }, "dependencies": { + "dayjs": "^1.10.7", "focus-visible": "^5.2.0", "sanitize.css": "^12.0.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78afedb..3c55ea4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,10 +6,10 @@ specifiers: '@sveltejs/kit': next '@typescript-eslint/eslint-plugin': ^4.32.0 '@typescript-eslint/parser': ^4.32.0 + dayjs: ^1.10.7 eslint: ^7.32.0 eslint-plugin-svelte3: ^3.2.1 focus-visible: ^5.2.0 - motion: ^10.1.0 sanitize.css: ^12.0.1 sass: ^1.42.1 svelte: ^3.43.0 @@ -19,14 +19,14 @@ specifiers: typescript: ^4.4.3 dependencies: + dayjs: 1.10.7 focus-visible: 5.2.0 - motion: 10.1.0 sanitize.css: 12.0.1 devDependencies: - '@sveltejs/adapter-node': 1.0.0-next.51 - '@sveltejs/adapter-vercel': 1.0.0-next.29 - '@sveltejs/kit': 1.0.0-next.175_svelte@3.43.0 + '@sveltejs/adapter-node': 1.0.0-next.52 + '@sveltejs/adapter-vercel': 1.0.0-next.30 + '@sveltejs/kit': 1.0.0-next.178_sass@1.42.1+svelte@3.43.0 '@typescript-eslint/eslint-plugin': 4.32.0_1eacf2495a01e8a68ffa99482308e8ec '@typescript-eslint/parser': 4.32.0_eslint@7.32.0+typescript@4.4.3 eslint: 7.32.0 @@ -60,19 +60,6 @@ packages: js-tokens: 4.0.0 dev: true - /@emotion/is-prop-valid/0.8.8: - resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} - requiresBuild: true - dependencies: - '@emotion/memoize': 0.7.4 - dev: false - optional: true - - /@emotion/memoize/0.7.4: - resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} - dev: false - optional: true - /@eslint/eslintrc/0.4.3: resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==} engines: {node: ^10.12.0 || >=12.0.0} @@ -134,43 +121,46 @@ packages: picomatch: 2.3.0 dev: true - /@sveltejs/adapter-node/1.0.0-next.51: - resolution: {integrity: sha512-RMT6BQcNJZkGZskgHiZMsnjMWHXMiE5h30Aws9h1Cnc4+80ws6llWNqHglzP63ENahUHWBW+h9DVcDskHnP9bQ==} + /@sveltejs/adapter-node/1.0.0-next.52: + resolution: {integrity: sha512-LKf509w78MkaQnc6XK3kh5mvzhkIF7mByhC1XQY5L0Ufq7rZaTpnbddqmBlBjiYR6ukC6O+/vUGrsgLNZxK5Aw==} dependencies: - esbuild: 0.12.29 + esbuild: 0.13.3 tiny-glob: 0.2.9 dev: true - /@sveltejs/adapter-vercel/1.0.0-next.29: - resolution: {integrity: sha512-2DMz4qCm5+v+/8npdbyT/uQVMr3elSOH5ZJ24k3VLug60n6/sS4RyU++RO8gjiVQqxyGvdfRFJXAX6xV4K6hzg==} + /@sveltejs/adapter-vercel/1.0.0-next.30: + resolution: {integrity: sha512-6QEwOEPXX36AmsveQFNwo+omluptsdnmXrISXc1ZNiT+rPaVHRXqp5aNPn9uB9SNKXnc1eEmmor5sIJFUqR10g==} dependencies: - esbuild: 0.12.29 + esbuild: 0.13.3 dev: true - /@sveltejs/kit/1.0.0-next.175_svelte@3.43.0: - resolution: {integrity: sha512-GRD5gdCE0kuWZLwnBkQh933dJlT6lFiglpxC3g1U2aq8c4og/2jzDqkFJLsSMTzRu17JFKni6s6ZhEwhjojTSQ==} + /@sveltejs/kit/1.0.0-next.178_sass@1.42.1+svelte@3.43.0: + resolution: {integrity: sha512-Hai7bqZkn4JQMQwh8gUMJEbyBeRPIx1oQUhGZjHlH4yIqVf2Oz9Nf4FkGcQAa5eGF907qRhE/gghPpsZk6KkeQ==} engines: {node: ^12.20 || >=14.13} hasBin: true peerDependencies: svelte: ^3.43.0 dependencies: - '@sveltejs/vite-plugin-svelte': 1.0.0-next.24_svelte@3.43.0+vite@2.5.10 + '@sveltejs/vite-plugin-svelte': 1.0.0-next.26_svelte@3.43.0+vite@2.6.2 cheap-watch: 1.0.4 sade: 1.7.4 svelte: 3.43.0 - vite: 2.5.10 + vite: 2.6.2_sass@1.42.1 transitivePeerDependencies: - diff-match-patch + - less + - sass + - stylus - supports-color dev: true - /@sveltejs/vite-plugin-svelte/1.0.0-next.24_svelte@3.43.0+vite@2.5.10: - resolution: {integrity: sha512-b+n3jcLpk2j/25APQbk5ejCyd0faYTB2bOxR3gY0LX3MFGgdiL8zdf3/aawcPSxLdbL73YVlxNBIATGuvq03uQ==} + /@sveltejs/vite-plugin-svelte/1.0.0-next.26_svelte@3.43.0+vite@2.6.2: + resolution: {integrity: sha512-+Rx3IBa4disskQmr+0/Rh+NYavkM6Vi8BnkTGjKnblawysw4INXkq2WEQBp8luGpUZEkjwczdL9Z9Q2hISvIeA==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: diff-match-patch: ^1.0.5 svelte: ^3.34.0 - vite: ^2.5.3 + vite: ^2.6.0 peerDependenciesMeta: diff-match-patch: optional: true @@ -182,7 +172,7 @@ packages: require-relative: 0.8.7 svelte: 3.43.0 svelte-hmr: 0.14.7_svelte@3.43.0 - vite: 2.5.10 + vite: 2.6.2_sass@1.42.1 transitivePeerDependencies: - supports-color dev: true @@ -494,6 +484,10 @@ packages: which: 2.0.2 dev: true + /dayjs/1.10.7: + resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==} + dev: false + /debug/4.3.2: resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==} engines: {node: '>=6.0'} @@ -544,10 +538,139 @@ packages: resolution: {integrity: sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=} dev: true - /esbuild/0.12.29: - resolution: {integrity: sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==} + /esbuild-android-arm64/0.13.3: + resolution: {integrity: sha512-jc9E8vGTHkzb0Vwl74H8liANV9BWsqtzLHaKvcsRgf1M+aVCBSF0gUheduAKfDsbDMT0judeMLhwBP34EUesTA==} + cpu: [arm64] + os: [android] + dev: true + optional: true + + /esbuild-darwin-64/0.13.3: + resolution: {integrity: sha512-8bG3Zq+ZNuLlIJebOO2+weI7P2LVf33sOzaUfHj8MuJ+1Ixe4KtQxfYp7qhFnP6xP2ToJaYHxGUfLeiUCEz9hw==} + cpu: [x64] + os: [darwin] + dev: true + optional: true + + /esbuild-darwin-arm64/0.13.3: + resolution: {integrity: sha512-5E81eImYtTgh8pY7Gq4WQHhWkR/LvYadUXmuYeZBiP+3ADZJZcG60UFceZrjqNPaFOWKr/xmh4aNocwagEubcA==} + cpu: [arm64] + os: [darwin] + dev: true + optional: true + + /esbuild-freebsd-64/0.13.3: + resolution: {integrity: sha512-ou+f91KkTGexi8HvF/BdtsITL6plbciQfZGys7QX6/QEwyE96PmL5KnU6ZQwoU7E99Ts6Sc9bUDq8HXJubKtBA==} + cpu: [x64] + os: [freebsd] + dev: true + optional: true + + /esbuild-freebsd-arm64/0.13.3: + resolution: {integrity: sha512-F1zV7nySjHswJuvIgjkiG5liZ63MeazDGXGKViTCeegjZ71sAhOChcaGhKcu6vq9+vqZxlfEi1fmXlx6Pc3coQ==} + cpu: [arm64] + os: [freebsd] + dev: true + optional: true + + /esbuild-linux-32/0.13.3: + resolution: {integrity: sha512-mHHc2v6uLrHH4zaaq5RB/5IWzgimEJ1HGldzf1qtGI513KZWfH0HRRQ8p1di4notJgBn7tDzWQ1f34ZHy69viQ==} + cpu: [ia32] + os: [linux] + dev: true + optional: true + + /esbuild-linux-64/0.13.3: + resolution: {integrity: sha512-FJ1De2O89mrOuqtaEXu41qIYJU6R41F+OA6vheNwcAQcX8fu0aiA13FJeLABq29BYJuTVgRj3cyC8q+tz19/dQ==} + cpu: [x64] + os: [linux] + dev: true + optional: true + + /esbuild-linux-arm/0.13.3: + resolution: {integrity: sha512-9BJNRtLwBh3OP22cln9g3AJdbAQUcjRHqA4BScx9k4RZpGqPokFr548zpeplxWhcwrIjT8qPebwH9CrRVy8Bsw==} + cpu: [arm] + os: [linux] + dev: true + optional: true + + /esbuild-linux-arm64/0.13.3: + resolution: {integrity: sha512-Cauhr45KSo+wRUojs+1qfycQqQCAXTOvsWvkZ6xmEMAXLAm+f8RQGDQeP8CAf8Yeelnegcn6UNdvzdzLHhWDFg==} + cpu: [arm64] + os: [linux] + dev: true + optional: true + + /esbuild-linux-mips64le/0.13.3: + resolution: {integrity: sha512-YVzJUGCncuuLm2boYyVeuMFsak4ZAhdiBwi0xNDZCC8sy+tS6Boe2mzcrD2uubv5JKAUOrpN186S1DtU4WgBgw==} + cpu: [mips64el] + os: [linux] + dev: true + optional: true + + /esbuild-linux-ppc64le/0.13.3: + resolution: {integrity: sha512-GU6CqqKtJEoyxC2QWHiJtmuOz9wc/jMv8ZloK2WwiGY5yMvAmM3PI103Dj7xcjebNTHBqITTUw/aigY1wx5A3w==} + cpu: [ppc64] + os: [linux] + dev: true + optional: true + + /esbuild-openbsd-64/0.13.3: + resolution: {integrity: sha512-HVpkgpn4BQt4BPDAjTOpeMub6mzNWw6Y3gaLQJrpbO24pws6ZwYkY24OI3/Uo3LDCbH6856MM81JxECt92OWjA==} + cpu: [x64] + os: [openbsd] + dev: true + optional: true + + /esbuild-sunos-64/0.13.3: + resolution: {integrity: sha512-XncBVOtnEfUbPV4CaiFBxh38ychnBfwCxuTm9iAqcHzIwkmeNRN5qMzDyfE1jyfJje+Bbt6AvIfz6SdYt8/UEQ==} + cpu: [x64] + os: [sunos] + dev: true + optional: true + + /esbuild-windows-32/0.13.3: + resolution: {integrity: sha512-ZlgDz7d1nk8wQACi+z8IDzNZVUlN9iprAme+1YSTsfFDlkyI8jeaGWPk9EQFNY7rJzsLVYm6eZ2mhPioc7uT5A==} + cpu: [ia32] + os: [win32] + dev: true + optional: true + + /esbuild-windows-64/0.13.3: + resolution: {integrity: sha512-YX7KvRez3TR+GudlQm9tND/ssj2FsF9vb8ZWzAoZOLxpPzE3y+3SFJNrfDzzQKPzJ0Pnh9KBP4gsaMwJjKHDhw==} + cpu: [x64] + os: [win32] + dev: true + optional: true + + /esbuild-windows-arm64/0.13.3: + resolution: {integrity: sha512-nP7H0Y2a6OJd3Qi1Q8sehhyP4x4JoXK4S5y6FzH2vgaJgiyEurzFxjUufGdMaw+RxtxiwD/uRndUgwaZ2JD8lg==} + cpu: [arm64] + os: [win32] + dev: true + optional: true + + /esbuild/0.13.3: + resolution: {integrity: sha512-98xovMLKnyhv3gcReUuAEi5Ig1rK6SIgvsJuBIcfwzqGSEHsV8UJjMlmkhHoHMf9XZybMpE9Zax8AA8f7i2hlQ==} hasBin: true requiresBuild: true + optionalDependencies: + esbuild-android-arm64: 0.13.3 + esbuild-darwin-64: 0.13.3 + esbuild-darwin-arm64: 0.13.3 + esbuild-freebsd-64: 0.13.3 + esbuild-freebsd-arm64: 0.13.3 + esbuild-linux-32: 0.13.3 + esbuild-linux-64: 0.13.3 + esbuild-linux-arm: 0.13.3 + esbuild-linux-arm64: 0.13.3 + esbuild-linux-mips64le: 0.13.3 + esbuild-linux-ppc64le: 0.13.3 + esbuild-openbsd-64: 0.13.3 + esbuild-sunos-64: 0.13.3 + esbuild-windows-32: 0.13.3 + esbuild-windows-64: 0.13.3 + esbuild-windows-arm64: 0.13.3 dev: true /escape-string-regexp/1.0.5: @@ -762,27 +885,6 @@ packages: resolution: {integrity: sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==} dev: false - /framer-motion/4.1.17: - resolution: {integrity: sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==} - peerDependencies: - react: '>=16.8 || ^17.0.0' - react-dom: '>=16.8 || ^17.0.0' - dependencies: - framesync: 5.3.0 - hey-listen: 1.0.8 - popmotion: 9.3.6 - style-value-types: 4.1.4 - tslib: 2.3.1 - optionalDependencies: - '@emotion/is-prop-valid': 0.8.8 - dev: false - - /framesync/5.3.0: - resolution: {integrity: sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==} - dependencies: - tslib: 2.3.1 - dev: false - /fs.realpath/1.0.0: resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=} dev: true @@ -869,10 +971,6 @@ packages: function-bind: 1.1.1 dev: true - /hey-listen/1.0.8: - resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==} - dev: false - /ignore/4.0.6: resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==} engines: {node: '>= 4'} @@ -1043,22 +1141,6 @@ packages: minimist: 1.2.5 dev: true - /motion/10.1.0: - resolution: {integrity: sha512-OnQVGbuF2lpPxjpKp4UNw4CozSfL5FjfntAWUhBPiM7wkc7oyWPZ3DW2mACjofvOPbb8cFnXm9oTnY3iiOwuXw==} - peerDependencies: - react: ^17.0.2 - react-dom: ^17.0.2 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - dependencies: - framer-motion: 4.1.17 - popmotion: 9.4.2 - tslib: 2.3.1 - dev: false - /mri/1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -1136,24 +1218,6 @@ packages: engines: {node: '>=8.6'} dev: true - /popmotion/9.3.6: - resolution: {integrity: sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==} - dependencies: - framesync: 5.3.0 - hey-listen: 1.0.8 - style-value-types: 4.1.4 - tslib: 2.3.1 - dev: false - - /popmotion/9.4.2: - resolution: {integrity: sha512-j1sSXszfQ6LkqML2NaqAEn1XmwT/TWUe06lXgIUGwomHdVWjM0W6tLay+i1v9zrIMZLBDXslZU9W4RKWhgPPMw==} - dependencies: - framesync: 5.3.0 - hey-listen: 1.0.8 - style-value-types: 4.1.5 - tslib: 2.3.1 - dev: false - /postcss/8.3.8: resolution: {integrity: sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==} engines: {node: ^10 || ^12 || >=14} @@ -1366,20 +1430,6 @@ packages: engines: {node: '>=8'} dev: true - /style-value-types/4.1.4: - resolution: {integrity: sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==} - dependencies: - hey-listen: 1.0.8 - tslib: 2.3.1 - dev: false - - /style-value-types/4.1.5: - resolution: {integrity: sha512-0CCNAAsTERbf+IuLeJFpy8DJ/2sbC9UBhnx2hsbbsr78POVi0kC4jc+cYOhOnXMUoPLG1Kuw1QG+zcI+h/PH0Q==} - dependencies: - hey-listen: 1.0.8 - tslib: 2.3.1 - dev: false - /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -1524,6 +1574,7 @@ packages: /tslib/2.3.1: resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} + dev: true /tsutils/3.21.0_typescript@4.4.3: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} @@ -1563,15 +1614,27 @@ packages: resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} dev: true - /vite/2.5.10: - resolution: {integrity: sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==} + /vite/2.6.2_sass@1.42.1: + resolution: {integrity: sha512-HSIg9U15LOnbD3CUxX364Pdrm7DUjftuBljowGxvkFHgDZU/SKPqApg9t86MX/Qq1VCO7wS+mGJHlfuTF7c0Sg==} engines: {node: '>=12.2.0'} hasBin: true + peerDependencies: + less: '*' + sass: '*' + stylus: '*' + peerDependenciesMeta: + less: + optional: true + sass: + optional: true + stylus: + optional: true dependencies: - esbuild: 0.12.29 + esbuild: 0.13.3 postcss: 8.3.8 resolve: 1.20.0 rollup: 2.57.0 + sass: 1.42.1 optionalDependencies: fsevents: 2.3.2 dev: true diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte index 401ab76..6a32829 100644 --- a/src/components/molecules/Location.svelte +++ b/src/components/molecules/Location.svelte @@ -1,4 +1,8 @@ -
- +
+ Flag of {country.name} -

- {name} -

- {country.name} - {#if index < 2} +
+
+ {name} +
+
+ {country.name} +
+
+ {#if isNew} {/if} +
+ {photoIndex} +
\ No newline at end of file diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss index 4d73de0..2156469 100644 --- a/src/style/molecules/_location.scss +++ b/src/style/molecules/_location.scss @@ -1,10 +1,42 @@ .location { + position: relative; text-align: center; - & > * { + a { display: flex; flex-direction: column; justify-content: center; + padding: 24px; + text-decoration: none; + + // Background circle + &:after { + opacity: 0; + content: ""; + display: block; + position: absolute; + pointer-events: none; + top: 50%; + left: 50%; + width: 256px; + height: 256px; + transform: translate3d(-50%, -50%, 0) scale(0.8); + transform-origin: 50% 50%; + background-color: rgba($color-tertiary, 0.1); + border-radius: 100%; + transition: transform 0.75s var(--ease-quart), opacity 0.75s var(--ease-quart); + } + + // Hover + &:hover { + strong { + color: $color-tertiary; + } + &:after { + opacity: 1; + transform: translate3d(-50%, -50%, 0); + } + } } // Flag @@ -13,21 +45,53 @@ margin: 0 auto; border-radius: 100%; } - // Link - a { - text-decoration: none; - } + + // Location name &__name { display: block; color: $color-secondary; - margin: 20px 0 -2px; + margin: 20px 0 8px; font-size: rem(48px); font-family: $font-serif; font-weight: 300; line-height: 1.2; + transition: color 0.75s var(--ease-quart); } + + // Country &__country { color: $color-tertiary; } + // Badge + .badge { + position: absolute; + left: 50%; + bottom: -32px; + transform: translateX(-50%); + } + + // Photos + &__photos { + opacity: 0; + position: absolute; + z-index: 2; + top: -10%; + left: 50%; + width: 240px; + height: 160px; + background: #444; + border-radius: 6px; + transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate)); + overflow: hidden; + box-shadow: 0 8px 8px rgba(#000, 0.1), 0 16px 28px rgba(#000, 0.12); + pointer-events: none; + transition: opacity 0.5s var(--ease-quart); + } + + &:hover { + .location__photos { + opacity: 1; + } + } } \ No newline at end of file diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss index 3a902ff..0d48e01 100644 --- a/src/style/organisms/_locations.scss +++ b/src/style/organisms/_locations.scss @@ -21,11 +21,11 @@ flex-flow: row wrap; justify-content: center; max-width: 1200px; - margin: 128px auto 80px; + margin: 104px auto 80px; justify-items: center; .location { - margin: 0 40px 80px; + margin: 0 22px 56px; } } } \ No newline at end of file diff --git a/src/utils/functions.ts b/src/utils/functions.ts new file mode 100644 index 0000000..fe9ebc0 --- /dev/null +++ b/src/utils/functions.ts @@ -0,0 +1,6 @@ +/** + * Linear Interpolation + */ +export const lerp = (start: number, end: number, amt: number): number => { + return (1 - amt) * start + amt * end +} \ No newline at end of file