flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add hover effect on Location

Browse Source
This commit is contained in:
Shelby Kay
2021-09-30 23:30:13 +02:00
parent 624f02d84d
commit 7777d26907
6 changed files with 313 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -16,6 +16,7 @@
"lint": "eslint --ignore-path .gitignore ."
},
"dependencies": {
"dayjs": "^1.10.7",
"focus-visible": "^5.2.0",
"sanitize.css": "^12.0.1"
},

283
pnpm-lock.yaml generated
View File

@@ -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

69
src/components/molecules/Location.svelte
View File

@@ -1,4 +1,8 @@
<script lang="ts">
import { getContext } from 'svelte'
import { spring } from 'svelte/motion'
import dayjs from 'dayjs'
import { lerp } from '$utils/functions'
// Components
import Image from '$components/atoms/Image.svelte'
import Badge from '$components/atoms/Badge.svelte'
@@ -6,18 +10,67 @@
export let location: any
export let index: number
const { name, slug, country, last_updated } = location
const { settings: { limit_new }}: any = getContext('global')
const { name, slug, country, date_updated } = location
// Location date limit
const dateNowOffset = dayjs().subtract(limit_new, 'day')
const dateLocationUpdated = dayjs(date_updated)
const isNew = dateLocationUpdated.isAfter(dateNowOffset)
let locationEl: HTMLElement
let photoIndex = 0
const offset = spring({ x: 0, y: 0 }, {
stiffness: 0.075,
damping: 0.9
})
// Moving cursor over
const handleMouseMove = ({ clientX }: MouseEvent) => {
const { width, left } = locationEl.getBoundingClientRect()
const moveProgress = (clientX - left) / width // 0 to 1
// Move horizontally
offset.update($c => ({
x: lerp(-56, 56, moveProgress),
y: 0
}))
// Change photo index from mouse position percentage
photoIndex = Math.round(lerp(0, 3, moveProgress))
}
// Leaving mouseover
const handleMouseLeave = (event: MouseEvent) => {
offset.update($c => ({
x: $c.x,
y: 40
}))
}
</script>
<div class="location" role="listitem">
<a href="/{country.slug}/{slug}" rel="prefetch" sveltekit-noscroll>
<div class="location" role="listitem" bind:this={locationEl}
style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.15}deg"
>
<a href="/{country.slug}/{slug}"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
sveltekit-noscroll
>
<Image id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
<h3 class="location__name">
{name}
</h3>
<span class="text-label location__country">{country.name}</span>
{#if index < 2}
<dl>
<dt class="location__name">
{name}
</dt>
<dd class="location__country text-label">
{country.name}
</dd>
</dl>
{#if isNew}
<Badge text="New" />
{/if}
</a>
<div class="location__photos">
<span>{photoIndex}</span>
</div>
</div>

76
src/style/molecules/_location.scss
View File

@@ -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;
}
}
}

4
src/style/organisms/_locations.scss
View File

@@ -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;
}
}
}

6
src/utils/functions.ts Normal file
View File

@@ -0,0 +1,6 @@
/**
* Linear Interpolation
*/
export const lerp = (start: number, end: number, amt: number): number => {
return (1 - amt) * start + amt * end
}