mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 02:45:59 +01:00
playing around
This commit is contained in:
Christofer
parent
7e97ddccee
commit
40a6544b85
9 changed files with 301 additions and 82 deletions
|
|
@ -47,6 +47,9 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"clsx": "^1.2.1",
|
||||
"less": "^4.1.3",
|
||||
"remeda": "^1.24.0",
|
||||
"sass": "^1.64.1",
|
||||
"simplex-noise": "^4.0.1",
|
||||
"svelte-inview": "^4.0.1",
|
||||
"tailwindcss-animate": "^1.0.6",
|
||||
|
|
|
|||
174
pnpm-lock.yaml
174
pnpm-lock.yaml
|
|
@ -8,6 +8,15 @@ dependencies:
|
|||
clsx:
|
||||
specifier: ^1.2.1
|
||||
version: 1.2.1
|
||||
less:
|
||||
specifier: ^4.1.3
|
||||
version: 4.1.3
|
||||
remeda:
|
||||
specifier: ^1.24.0
|
||||
version: 1.24.0
|
||||
sass:
|
||||
specifier: ^1.64.1
|
||||
version: 1.64.1
|
||||
simplex-noise:
|
||||
specifier: ^4.0.1
|
||||
version: 4.0.1
|
||||
|
|
@ -66,7 +75,7 @@ devDependencies:
|
|||
version: 4.0.1
|
||||
svelte-check:
|
||||
specifier: ^3.4.3
|
||||
version: 3.4.4(postcss@8.4.25)(svelte@4.0.1)
|
||||
version: 3.4.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)
|
||||
tailwindcss:
|
||||
specifier: ^3.3.2
|
||||
version: 3.3.2
|
||||
|
|
@ -75,7 +84,7 @@ devDependencies:
|
|||
version: 5.1.6
|
||||
vite:
|
||||
specifier: ^4.3.6
|
||||
version: 4.3.9
|
||||
version: 4.3.9(less@4.1.3)(sass@1.64.1)
|
||||
|
||||
packages:
|
||||
|
||||
|
|
@ -473,7 +482,7 @@ packages:
|
|||
sirv: 2.0.3
|
||||
svelte: 4.0.1
|
||||
undici: 5.22.1
|
||||
vite: 4.3.9
|
||||
vite: 4.3.9(less@4.1.3)(sass@1.64.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
|
@ -489,7 +498,7 @@ packages:
|
|||
'@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.0.1)(vite@4.3.9)
|
||||
debug: 4.3.4
|
||||
svelte: 4.0.1
|
||||
vite: 4.3.9
|
||||
vite: 4.3.9(less@4.1.3)(sass@1.64.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
|
@ -508,7 +517,7 @@ packages:
|
|||
magic-string: 0.30.0
|
||||
svelte: 4.0.1
|
||||
svelte-hmr: 0.15.2(svelte@4.0.1)
|
||||
vite: 4.3.9
|
||||
vite: 4.3.9(less@4.1.3)(sass@1.64.1)
|
||||
vitefu: 0.2.4(vite@4.3.9)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
|
@ -715,6 +724,11 @@ packages:
|
|||
engines: {node: '>= 0.6'}
|
||||
dev: true
|
||||
|
||||
/copy-anything@2.0.6:
|
||||
resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
|
||||
dependencies:
|
||||
is-what: 3.14.1
|
||||
|
||||
/cross-spawn@7.0.3:
|
||||
resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
|
||||
engines: {node: '>= 8'}
|
||||
|
|
@ -735,6 +749,17 @@ packages:
|
|||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
|
||||
/debug@3.2.7:
|
||||
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
||||
peerDependencies:
|
||||
supports-color: '*'
|
||||
peerDependenciesMeta:
|
||||
supports-color:
|
||||
optional: true
|
||||
dependencies:
|
||||
ms: 2.1.2
|
||||
optional: true
|
||||
|
||||
/debug@4.3.4:
|
||||
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
|
||||
engines: {node: '>=6.0'}
|
||||
|
|
@ -785,6 +810,14 @@ packages:
|
|||
resolution: {integrity: sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ==}
|
||||
dev: true
|
||||
|
||||
/errno@0.1.8:
|
||||
resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
prr: 1.0.1
|
||||
optional: true
|
||||
|
||||
/es6-promise@3.3.1:
|
||||
resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
|
||||
dev: true
|
||||
|
|
@ -1107,7 +1140,6 @@ packages:
|
|||
|
||||
/graceful-fs@4.2.11:
|
||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||
dev: true
|
||||
|
||||
/graphemer@1.4.0:
|
||||
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
|
||||
|
|
@ -1129,11 +1161,28 @@ packages:
|
|||
engines: {node: '>=10.17.0'}
|
||||
dev: false
|
||||
|
||||
/iconv-lite@0.6.3:
|
||||
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dependencies:
|
||||
safer-buffer: 2.1.2
|
||||
optional: true
|
||||
|
||||
/ignore@5.2.4:
|
||||
resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
|
||||
engines: {node: '>= 4'}
|
||||
dev: true
|
||||
|
||||
/image-size@0.5.5:
|
||||
resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
optional: true
|
||||
|
||||
/immutable@4.3.1:
|
||||
resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
|
||||
|
||||
/import-fresh@3.3.0:
|
||||
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -1200,6 +1249,9 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/is-what@3.14.1:
|
||||
resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
|
||||
|
||||
/isexe@2.0.0:
|
||||
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
|
||||
|
||||
|
|
@ -1235,6 +1287,25 @@ packages:
|
|||
resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
|
||||
dev: false
|
||||
|
||||
/less@4.1.3:
|
||||
resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
|
||||
engines: {node: '>=6'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
copy-anything: 2.0.6
|
||||
parse-node-version: 1.0.1
|
||||
tslib: 2.6.0
|
||||
optionalDependencies:
|
||||
errno: 0.1.8
|
||||
graceful-fs: 4.2.11
|
||||
image-size: 0.5.5
|
||||
make-dir: 2.1.0
|
||||
mime: 1.6.0
|
||||
needle: 3.2.0
|
||||
source-map: 0.6.1
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
/levn@0.4.1:
|
||||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
|
@ -1288,6 +1359,15 @@ packages:
|
|||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.4.15
|
||||
|
||||
/make-dir@2.1.0:
|
||||
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
pify: 4.0.1
|
||||
semver: 5.7.2
|
||||
optional: true
|
||||
|
||||
/mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
|
||||
|
|
@ -1306,6 +1386,13 @@ packages:
|
|||
braces: 3.0.2
|
||||
picomatch: 2.3.1
|
||||
|
||||
/mime@1.6.0:
|
||||
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
optional: true
|
||||
|
||||
/mime@3.0.0:
|
||||
resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
|
|
@ -1367,6 +1454,19 @@ packages:
|
|||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
dev: true
|
||||
|
||||
/needle@3.2.0:
|
||||
resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
|
||||
engines: {node: '>= 4.4.x'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
iconv-lite: 0.6.3
|
||||
sax: 1.2.4
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
optional: true
|
||||
|
||||
/node-releases@2.0.13:
|
||||
resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
|
||||
dev: true
|
||||
|
|
@ -1438,6 +1538,10 @@ packages:
|
|||
callsites: 3.1.0
|
||||
dev: true
|
||||
|
||||
/parse-node-version@1.0.1:
|
||||
resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
|
||||
engines: {node: '>= 0.10'}
|
||||
|
||||
/path-exists@4.0.0:
|
||||
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -1475,6 +1579,11 @@ packages:
|
|||
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
/pify@4.0.1:
|
||||
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
|
||||
engines: {node: '>=6'}
|
||||
optional: true
|
||||
|
||||
/pirates@4.0.6:
|
||||
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
|
||||
engines: {node: '>= 6'}
|
||||
|
|
@ -1598,6 +1707,10 @@ packages:
|
|||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/prr@1.0.1:
|
||||
resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
|
||||
optional: true
|
||||
|
||||
/punycode@2.3.0:
|
||||
resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -1617,6 +1730,10 @@ packages:
|
|||
dependencies:
|
||||
picomatch: 2.3.1
|
||||
|
||||
/remeda@1.24.0:
|
||||
resolution: {integrity: sha512-tjLxwU4yLtvX8yHlePnE7CdQXRe2pKatlVY+AunqAQV5t9FNw1yuiIAqKpu6zevd+No5LQHEJ/HK3r3ZFK7KXg==}
|
||||
dev: false
|
||||
|
||||
/resolve-from@4.0.0:
|
||||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -1668,6 +1785,10 @@ packages:
|
|||
mri: 1.2.0
|
||||
dev: true
|
||||
|
||||
/safer-buffer@2.1.2:
|
||||
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
|
||||
optional: true
|
||||
|
||||
/sander@0.5.1:
|
||||
resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
|
||||
dependencies:
|
||||
|
|
@ -1677,6 +1798,24 @@ packages:
|
|||
rimraf: 2.7.1
|
||||
dev: true
|
||||
|
||||
/sass@1.64.1:
|
||||
resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
chokidar: 3.5.3
|
||||
immutable: 4.3.1
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/sax@1.2.4:
|
||||
resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
|
||||
optional: true
|
||||
|
||||
/semver@5.7.2:
|
||||
resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
|
||||
hasBin: true
|
||||
optional: true
|
||||
|
||||
/semver@7.5.3:
|
||||
resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1730,6 +1869,12 @@ packages:
|
|||
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
/source-map@0.6.1:
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
requiresBuild: true
|
||||
optional: true
|
||||
|
||||
/streamsearch@1.1.0:
|
||||
resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
|
|
@ -1783,7 +1928,7 @@ packages:
|
|||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
/svelte-check@3.4.4(postcss@8.4.25)(svelte@4.0.1):
|
||||
/svelte-check@3.4.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1):
|
||||
resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -1796,7 +1941,7 @@ packages:
|
|||
picocolors: 1.0.0
|
||||
sade: 1.8.1
|
||||
svelte: 4.0.1
|
||||
svelte-preprocess: 5.0.4(postcss@8.4.25)(svelte@4.0.1)(typescript@5.1.6)
|
||||
svelte-preprocess: 5.0.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)(typescript@5.1.6)
|
||||
typescript: 5.1.6
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
|
|
@ -1844,7 +1989,7 @@ packages:
|
|||
svelte: 4.0.1
|
||||
dev: false
|
||||
|
||||
/svelte-preprocess@5.0.4(postcss@8.4.25)(svelte@4.0.1)(typescript@5.1.6):
|
||||
/svelte-preprocess@5.0.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)(typescript@5.1.6):
|
||||
resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
|
||||
engines: {node: '>= 14.10.0'}
|
||||
requiresBuild: true
|
||||
|
|
@ -1884,8 +2029,10 @@ packages:
|
|||
dependencies:
|
||||
'@types/pug': 2.0.6
|
||||
detect-indent: 6.1.0
|
||||
less: 4.1.3
|
||||
magic-string: 0.27.0
|
||||
postcss: 8.4.25
|
||||
sass: 1.64.1
|
||||
sorcery: 0.11.0
|
||||
strip-indent: 3.0.0
|
||||
svelte: 4.0.1
|
||||
|
|
@ -1982,6 +2129,9 @@ packages:
|
|||
resolution: {integrity: sha512-ZyNm28Lsg34Co5DS3e9DVyjlX2Y+2exkI4jqTKyU+9/OL6Y2fKOOuL8i+7no71o74C6mVS+UFoP3ekM3iCT1HQ==}
|
||||
dev: false
|
||||
|
||||
/tslib@2.6.0:
|
||||
resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
|
||||
|
||||
/type-check@0.4.0:
|
||||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
|
@ -2064,7 +2214,7 @@ packages:
|
|||
/util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
|
||||
/vite@4.3.9:
|
||||
/vite@4.3.9(less@4.1.3)(sass@1.64.1):
|
||||
resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
hasBin: true
|
||||
|
|
@ -2090,8 +2240,10 @@ packages:
|
|||
optional: true
|
||||
dependencies:
|
||||
esbuild: 0.17.19
|
||||
less: 4.1.3
|
||||
postcss: 8.4.25
|
||||
rollup: 3.26.0
|
||||
sass: 1.64.1
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
|
@ -2104,7 +2256,7 @@ packages:
|
|||
vite:
|
||||
optional: true
|
||||
dependencies:
|
||||
vite: 4.3.9
|
||||
vite: 4.3.9(less@4.1.3)(sass@1.64.1)
|
||||
dev: true
|
||||
|
||||
/webpack-sources@3.2.3:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { inview } from 'svelte-inview'
|
||||
|
||||
import { pick } from 'remeda'
|
||||
// const mappingAnimate = {
|
||||
// slide: 'translate',
|
||||
// zoom: 'scale',
|
||||
|
|
@ -23,7 +23,9 @@ export function animateIn(node, options) {
|
|||
|
||||
options.duration ??= 840
|
||||
|
||||
const style = Object.entries(options)
|
||||
const effects = Object.entries(pick(options, ['fade', 'zoom', 'slide']))
|
||||
|
||||
const style = effects
|
||||
.map(([effect, value], _, all) => {
|
||||
if (effect === 'slide') return `translate: 0px ${value}px`
|
||||
|
||||
|
|
@ -42,10 +44,11 @@ export function animateIn(node, options) {
|
|||
node.addEventListener('inview_enter', callback)
|
||||
|
||||
function callback() {
|
||||
console.log('Callbacked!!')
|
||||
node.style.opacity = '1'
|
||||
node.style.scale = '1 1'
|
||||
node.style.translate = '0 0'
|
||||
effects.forEach(([effect]) => {
|
||||
if (effect === 'slide') node.style.translate = '0 0'
|
||||
else if (effect === 'fade') node.style.opacity = '1'
|
||||
else if (effect === 'zoom') node.style.scale = '1 1'
|
||||
})
|
||||
}
|
||||
|
||||
return { destroy: observer.destroy }
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<HallOfFameSlice />
|
||||
|
||||
<div class="px-8 lg:px-32"><Community /></div>
|
||||
<Community />
|
||||
</div>
|
||||
|
||||
<div class="mt-[16rem]" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,59 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/Button.svelte'
|
||||
import DiscordIcon from '~icons/prime/discord'
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<section class="relative overflow-hidden w-screen min-h-max h-[850px]">
|
||||
<h1 class="text-8xl font-bold text-center mb-8">Join a great community</h1>
|
||||
<div class="text-center font-extrabold text-slate-300">
|
||||
Get help from Distro Hoppers, Haiku writers, Hydrohomies and human_(probably)
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full items-center">
|
||||
<div class="w-28 h-28"><DiscordIcon class="h-full w-full" /></div>
|
||||
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr">
|
||||
<Button type="fancyOutline">Join us on Discord</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class=" absolute inset-0 w-[1024px]">
|
||||
<div class="_bg-color bg-yellow-500 top-[146px] right-[17px] w-[359px] h-[207px] opacity-20" />
|
||||
<div class="_bg-color bg-orange-500 top-[411px] right-0 w-[400px] h-[300px] opacity-30" />
|
||||
<div class="_bg-color bg-purple-500 opacity-30 w-[321px] h-[295px] top-[209px] left-[368px]" />
|
||||
<div class="_bg-color bg-cyan-500 opacity-30 w-[363px] h-[250px] left-[402px] top-[462px]" />
|
||||
<div class="_bg-color bg-red-500 opacity-30 w-[323px] h-[482px] left-[53px] top-[179px]" />
|
||||
<div class="_bg-color bg-fuchsia-500 opacity-30 w-[243px] h-[167px] left-[135px] top-[596px]" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="sass">
|
||||
// taken from https://codepen.io/mikegolus/pen/Jegvym?editors=1100
|
||||
$quantity: 6
|
||||
|
||||
._bg-color
|
||||
position: absolute
|
||||
animation: ease 200s alternate infinite
|
||||
pointer-events: none
|
||||
animation: drift ease alternate infinite
|
||||
filter: blur(80px)
|
||||
border-radius: 50%
|
||||
z-index: -50
|
||||
|
||||
|
||||
// Randomize Motion
|
||||
@for $i from 1 through $quantity
|
||||
$steps: random(12) + 16
|
||||
|
||||
._bg-color:nth-child(#{$i})
|
||||
// animation-name: move#{$i}
|
||||
animation-duration: random(6000) + 50000ms
|
||||
animation-delay: 0ms, random(8000) + 500ms
|
||||
|
||||
@keyframes move#{$i}
|
||||
@for $step from 0 through $steps
|
||||
#{$step * (100 / $steps)}%
|
||||
transform: translateX(random(50) - 50px) translateY(random(50) - 50px) scale(calc(random(5) / 100 + 0.95))
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
46
src/routes/FameRicePreview.svelte
Normal file
46
src/routes/FameRicePreview.svelte
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
import { animateIn } from '$lib/Helper.mjs'
|
||||
|
||||
/** @type {{ name: string, url: string }} */
|
||||
export let createdBy
|
||||
/** @type {string}
|
||||
* The path to the image. Usually the file within `static`, but can also be an URL
|
||||
*/
|
||||
export let image
|
||||
/** @type {string | undefined} */
|
||||
export let imageClass = undefined
|
||||
/** @type {string | undefined} */
|
||||
export let containerClass = undefined
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="rice {containerClass} group"
|
||||
use:animateIn={{ fade: 0, duration: 1200, threshold: 0.4 }}
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt="Rice desktop"
|
||||
class="w-full nice-hover object-cover object-top rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01] {imageClass}"
|
||||
/>
|
||||
<img src={image} alt="Rice desktop" aria-hidden="true" class="rice-bg" />
|
||||
<div class="group-hover:opacity-100 opacity-0 transition-opacity absolute top-6 right-6 p-4">
|
||||
{createdBy.name}
|
||||
{createdBy.url}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.rice {
|
||||
@apply relative w-full max-w-[1100px];
|
||||
}
|
||||
.nice-hover {
|
||||
transition: transform 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
|
||||
}
|
||||
.rice-bg {
|
||||
@apply w-[calc(100%-24px)] pointer-events-none transition-[filter] duration-500 absolute left-3 brightness-150 rounded-3xl -z-10 saturate-[5] h-full blur-2xl -bottom-10 opacity-50;
|
||||
|
||||
.rice:hover & {
|
||||
@apply brightness-200;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,78 +1,56 @@
|
|||
<script lang="ts">
|
||||
import { animateIn } from '$lib/Helper.mjs'
|
||||
import Button from '$lib/components/Button.svelte'
|
||||
import FameRicePreview from './FameRicePreview.svelte'
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="w-full relative"
|
||||
use:animateIn={{ fade: 0, slide: 24, duration: 1200, threshold: 0.1 }}
|
||||
>
|
||||
<div class="text-center font-extrabold mb-3 text-slate-300">Memorials of the ricing legends</div>
|
||||
<h1 class="text-8xl font-bold text-center">Hall of Fame</h1>
|
||||
<div class="absolute inset-0">
|
||||
<div class="text-center font-extrabold mb-3 text-slate-300">
|
||||
Memorials of the ricing legends
|
||||
</div>
|
||||
<h1 class="text-8xl font-bold text-center">Hall of Fame</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full flex relative flex-col gap-16 lg:gap-24 items-center pt-16 overflow-hidden px-16"
|
||||
class="w-full flex relative flex-col gap-16 lg:gap-24 items-center justify-end pt-16 overflow-hidden px-16 [perspective:100px]"
|
||||
>
|
||||
<div class="rice" use:animateIn={{ fade: 0, slide: 24, duration: 1200, threshold: 0.4 }}>
|
||||
<img
|
||||
src="/imgs/env_4 novelknock-10.png"
|
||||
alt="Rice desktop"
|
||||
class="w-full nice-hover rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01]"
|
||||
/>
|
||||
<img
|
||||
src="/imgs/env_4 novelknock-10.png"
|
||||
alt="Rice desktop"
|
||||
aria-hidden="true"
|
||||
class="rice-bg"
|
||||
/>
|
||||
</div>
|
||||
<div class="rice" use:animateIn={{ slide: 48, duration: 1400, threshold: 0.4 }}>
|
||||
<img
|
||||
src="/imgs/ricingcomp1/amadeus.png"
|
||||
alt="Rice desktop"
|
||||
class="w-full rounded-t-xl overflow-hidden nice-hover hover:scale-[1.005] shadow-2xl object-cover object-top h-[200px] sm:h-[250px] lg:h-[500px] ] bottom-rice"
|
||||
/>
|
||||
<img
|
||||
src="/imgs/ricingcomp1/amadeus.png"
|
||||
alt="Rice desktop"
|
||||
aria-hidden="true"
|
||||
class="rice-bg clop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a class="absolute bottom-16 left-1/2 z-20 -translate-x-1/2" href="/hall-of-fame">
|
||||
<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/hall-of-fame">
|
||||
<Button size="lg" type="fancyOutline">Go to Hall of Fame</Button>
|
||||
</a>
|
||||
|
||||
<FameRicePreview
|
||||
createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
|
||||
image="/imgs/ricingcomp1/flicko.png"
|
||||
containerClass="[translate:0px_0px_-100px] -mb-[30%] hover:[translate:0px_0px_-70px] hover:mb-[-15%] transition-all duration-500"
|
||||
imageClass="[mask-image:linear-gradient(black_50%,transparent_95%)] "
|
||||
/>
|
||||
<FameRicePreview
|
||||
createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
|
||||
image="/imgs/env_4 novelknock-10.png"
|
||||
containerClass="[translate:0px_0px_-40px] -mb-[30%]"
|
||||
imageClass="[mask-image:linear-gradient(black,transparent_95%)]"
|
||||
/>
|
||||
<FameRicePreview
|
||||
createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
|
||||
image="/imgs/ricingcomp1/amadeus.png"
|
||||
imageClass="rounded-none [mask-image:linear-gradient(black,transparent)] rounded-t-xl h-[200px] sm:h-[250px] lg:h-[500px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="glow" />
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
.rice {
|
||||
@apply relative w-full max-w-[1100px];
|
||||
}
|
||||
.nice-hover {
|
||||
transition: transform 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
|
||||
}
|
||||
.rice-bg {
|
||||
@apply w-[calc(100%-24px)] pointer-events-none transition-[filter] duration-500 absolute left-3 brightness-150 rounded-3xl -z-10 saturate-[5] h-full blur-2xl -bottom-10 opacity-50;
|
||||
|
||||
.rice:hover & {
|
||||
@apply brightness-200;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-rice {
|
||||
mask-image: linear-gradient(black, transparent);
|
||||
}
|
||||
|
||||
.glow {
|
||||
@apply h-[200px] lg:h-[400px];
|
||||
width: 100%;
|
||||
/* min-width: 8800px; */
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
opacity: 0.5;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -96,19 +96,6 @@
|
|||
animate: title_effect 1s ease infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes title_effect {
|
||||
0% {
|
||||
transform: translateX(-99px);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(9px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translate3d(
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.9 MiB |
Loading…
Reference in a new issue