mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Bradley Shellnut
GitHub
commit
f3d24a15bc
24 changed files with 1026 additions and 673 deletions
10
environmentVariables.js
Normal file
10
environmentVariables.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
environmentVariables: {
|
||||
'--xsmall-viewport': '480px',
|
||||
'--small-viewport': '640px',
|
||||
'--medium-viewport': '768px',
|
||||
'--large-viewport': '1024px',
|
||||
'--xlarge-viewport': '1280px',
|
||||
'--xxlarge-viewport': '1536px',
|
||||
}
|
||||
}
|
||||
11
package.json
11
package.json
|
|
@ -22,10 +22,19 @@
|
|||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.27.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"just-debounce-it": "^3.1.1",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss-color-functional-notation": "^4.2.4",
|
||||
"postcss-custom-media": "^9.0.1",
|
||||
"postcss-env-function": "^4.0.6",
|
||||
"postcss-import": "^15.0.0",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-media-minmax": "^5.0.0",
|
||||
"postcss-nested": "^6.0.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-svelte": "^2.8.0",
|
||||
"sass": "^1.56.1",
|
||||
|
|
@ -47,6 +56,6 @@
|
|||
"feather-icons": "^4.29.0",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"zod": "^3.19.1",
|
||||
"zod-to-json-schema": "^3.18.1"
|
||||
"zod-to-json-schema": "^3.19.3"
|
||||
}
|
||||
}
|
||||
251
pnpm-lock.yaml
251
pnpm-lock.yaml
|
|
@ -15,12 +15,21 @@ specifiers:
|
|||
'@types/node': ^18.11.9
|
||||
'@typescript-eslint/eslint-plugin': ^5.42.1
|
||||
'@typescript-eslint/parser': ^5.42.1
|
||||
autoprefixer: ^10.4.13
|
||||
cookie: ^0.5.0
|
||||
eslint: ^8.27.0
|
||||
eslint-config-prettier: ^8.1.0
|
||||
eslint-plugin-svelte3: ^4.0.0
|
||||
feather-icons: ^4.29.0
|
||||
just-debounce-it: ^3.1.1
|
||||
postcss: ^8.4.19
|
||||
postcss-color-functional-notation: ^4.2.4
|
||||
postcss-custom-media: ^9.0.1
|
||||
postcss-env-function: ^4.0.6
|
||||
postcss-import: ^15.0.0
|
||||
postcss-load-config: ^4.0.1
|
||||
postcss-media-minmax: ^5.0.0
|
||||
postcss-nested: ^6.0.0
|
||||
prettier: ^2.7.1
|
||||
prettier-plugin-svelte: ^2.8.0
|
||||
sass: ^1.56.1
|
||||
|
|
@ -32,7 +41,7 @@ specifiers:
|
|||
typescript: ^4.8.4
|
||||
vite: ^3.2.3
|
||||
zod: ^3.19.1
|
||||
zod-to-json-schema: ^3.18.1
|
||||
zod-to-json-schema: ^3.19.3
|
||||
|
||||
dependencies:
|
||||
'@fontsource/fira-mono': 4.5.10
|
||||
|
|
@ -51,27 +60,61 @@ devDependencies:
|
|||
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.53.1
|
||||
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.53.1
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.90
|
||||
'@sveltejs/kit': 1.0.0-next.570_svelte@3.53.1+vite@3.2.4
|
||||
'@sveltejs/kit': 1.0.0-next.571_svelte@3.53.1+vite@3.2.4
|
||||
'@types/cookie': 0.5.1
|
||||
'@types/node': 18.11.10
|
||||
'@typescript-eslint/eslint-plugin': 5.45.0_czs5uoqkd3podpy6vgtsxfc7au
|
||||
'@typescript-eslint/parser': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
|
||||
autoprefixer: 10.4.13_postcss@8.4.19
|
||||
eslint: 8.28.0
|
||||
eslint-config-prettier: 8.5.0_eslint@8.28.0
|
||||
eslint-plugin-svelte3: 4.0.0_xgu65rlhscpnxffotiaicv6m5i
|
||||
just-debounce-it: 3.1.1
|
||||
postcss: 8.4.19
|
||||
postcss-color-functional-notation: 4.2.4_postcss@8.4.19
|
||||
postcss-custom-media: 9.0.1_postcss@8.4.19
|
||||
postcss-env-function: 4.0.6_postcss@8.4.19
|
||||
postcss-import: 15.0.0_postcss@8.4.19
|
||||
postcss-load-config: 4.0.1_postcss@8.4.19
|
||||
postcss-media-minmax: 5.0.0_postcss@8.4.19
|
||||
postcss-nested: 6.0.0_postcss@8.4.19
|
||||
prettier: 2.8.0
|
||||
prettier-plugin-svelte: 2.8.1_3ndnxlh52lolrqe4kgjgbxb3xa
|
||||
sass: 1.56.1
|
||||
svelte: 3.53.1
|
||||
svelte-check: 2.10.0_sass@1.56.1+svelte@3.53.1
|
||||
svelte-preprocess: 4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm
|
||||
svelte-check: 2.10.0_lae5lhfxexyizvi5yxbuu4veoq
|
||||
svelte-preprocess: 4.10.7_lucnjuyigjdgzzplgxx36nk3ki
|
||||
tslib: 2.4.1
|
||||
typescript: 4.9.3
|
||||
vite: 3.2.4_clvymlzunojxjbv3h6i2warera
|
||||
|
||||
packages:
|
||||
|
||||
/@csstools/css-parser-algorithms/1.0.0_yc2lywpo4a5sk4h3mmwqkmetvu:
|
||||
resolution: {integrity: sha512-lPphY34yfV15tEXiz/SYaU8hwqAhbAwqiTExv5tOfc7QZxT70VVYrsiPBaX1osdWZFowrDEAhHe4H3JnyzbjhA==}
|
||||
engines: {node: ^14 || ^16 || >=18}
|
||||
peerDependencies:
|
||||
'@csstools/css-tokenizer': ^1.0.0
|
||||
dependencies:
|
||||
'@csstools/css-tokenizer': 1.0.0
|
||||
dev: true
|
||||
|
||||
/@csstools/css-tokenizer/1.0.0:
|
||||
resolution: {integrity: sha512-xdFjdQ+zqqkOsmee+kYRieZD9Cqh4hr01YBQ2/8NtTkMMxbtRX18MC50LX6cMrtaLryqmIdZHN9e16/l0QqnQw==}
|
||||
engines: {node: ^14 || ^16 || >=18}
|
||||
dev: true
|
||||
|
||||
/@csstools/media-query-list-parser/1.0.0_oycmb73qbeg4xspzoh5ywrqikm:
|
||||
resolution: {integrity: sha512-HsTj5ejI8NKKZ4IEd6kK2kQZA/JmIVlUV8+XvO/YS9ntrlYPnbmFT3rkqtbxOVfEafblYCNOpeNw1c+fKGkAqw==}
|
||||
engines: {node: ^14 || ^16 || >=18}
|
||||
peerDependencies:
|
||||
'@csstools/css-parser-algorithms': ^1.0.0
|
||||
'@csstools/css-tokenizer': ^1.0.0
|
||||
dependencies:
|
||||
'@csstools/css-parser-algorithms': 1.0.0_yc2lywpo4a5sk4h3mmwqkmetvu
|
||||
'@csstools/css-tokenizer': 1.0.0
|
||||
dev: true
|
||||
|
||||
/@esbuild/android-arm/0.15.16:
|
||||
resolution: {integrity: sha512-nyB6CH++2mSgx3GbnrJsZSxzne5K0HMyNIWafDHqYy7IwxFc4fd/CgHVZXr8Eh+Q3KbIAcAe3vGyqIPhGblvMQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -225,8 +268,8 @@ packages:
|
|||
import-meta-resolve: 2.2.0
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.570_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-7CUoYidoWlKdTGxL/5RsPPkgGTb36TwFBnhSZmspHFeiIST5qQEXyzqicFk8+4M5qQhxvOZ0NuP8uy7Pc+xf/Q==}
|
||||
/@sveltejs/kit/1.0.0-next.571_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-J+J0UXBiAh569l4ZxKm6eIZJS4lbcP8MgF9fU+DbVplCJ8nqo9wUmirUHZkJoBoB0FUlZSgA0R7N471MnUNNBw==}
|
||||
engines: {node: '>=16.14'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
|
|
@ -487,6 +530,22 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/autoprefixer/10.4.13_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
postcss: ^8.1.0
|
||||
dependencies:
|
||||
browserslist: 4.21.4
|
||||
caniuse-lite: 1.0.30001435
|
||||
fraction.js: 4.2.0
|
||||
normalize-range: 0.1.2
|
||||
picocolors: 1.0.0
|
||||
postcss: 8.4.19
|
||||
postcss-value-parser: 4.2.0
|
||||
dev: true
|
||||
|
||||
/balanced-match/1.0.2:
|
||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||
dev: true
|
||||
|
|
@ -510,6 +569,17 @@ packages:
|
|||
fill-range: 7.0.1
|
||||
dev: true
|
||||
|
||||
/browserslist/4.21.4:
|
||||
resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
|
||||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001435
|
||||
electron-to-chromium: 1.4.284
|
||||
node-releases: 2.0.6
|
||||
update-browserslist-db: 1.0.10_browserslist@4.21.4
|
||||
dev: true
|
||||
|
||||
/buffer-crc32/0.2.13:
|
||||
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
|
||||
dev: true
|
||||
|
|
@ -526,6 +596,10 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/caniuse-lite/1.0.30001435:
|
||||
resolution: {integrity: sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==}
|
||||
dev: true
|
||||
|
||||
/chalk/4.1.2:
|
||||
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -586,6 +660,12 @@ packages:
|
|||
which: 2.0.2
|
||||
dev: true
|
||||
|
||||
/cssesc/3.0.0:
|
||||
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/debug/4.3.4:
|
||||
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
|
||||
engines: {node: '>=6.0'}
|
||||
|
|
@ -630,6 +710,10 @@ packages:
|
|||
esutils: 2.0.3
|
||||
dev: true
|
||||
|
||||
/electron-to-chromium/1.4.284:
|
||||
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
|
||||
dev: true
|
||||
|
||||
/es6-promise/3.3.1:
|
||||
resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
|
||||
dev: true
|
||||
|
|
@ -844,6 +928,11 @@ packages:
|
|||
esbuild-windows-arm64: 0.15.16
|
||||
dev: true
|
||||
|
||||
/escalade/3.1.1:
|
||||
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/escape-string-regexp/4.0.0:
|
||||
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1060,6 +1149,10 @@ packages:
|
|||
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
||||
dev: true
|
||||
|
||||
/fraction.js/4.2.0:
|
||||
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
|
||||
dev: true
|
||||
|
||||
/fs.realpath/1.0.0:
|
||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||
dev: true
|
||||
|
|
@ -1260,6 +1353,11 @@ packages:
|
|||
type-check: 0.4.0
|
||||
dev: true
|
||||
|
||||
/lilconfig/2.0.6:
|
||||
resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
|
||||
engines: {node: '>=10'}
|
||||
dev: true
|
||||
|
||||
/locate-path/6.0.0:
|
||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1364,11 +1462,20 @@ packages:
|
|||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
dev: true
|
||||
|
||||
/node-releases/2.0.6:
|
||||
resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
|
||||
dev: true
|
||||
|
||||
/normalize-path/3.0.0:
|
||||
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/normalize-range/0.1.2:
|
||||
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/once/1.4.0:
|
||||
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
|
||||
dependencies:
|
||||
|
|
@ -1441,12 +1548,109 @@ packages:
|
|||
engines: {node: '>=8.6'}
|
||||
dev: true
|
||||
|
||||
/pify/2.3.0:
|
||||
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/playwright-core/1.28.1:
|
||||
resolution: {integrity: sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/postcss-color-functional-notation/4.2.4_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==}
|
||||
engines: {node: ^12 || ^14 || >=16}
|
||||
peerDependencies:
|
||||
postcss: ^8.2
|
||||
dependencies:
|
||||
postcss: 8.4.19
|
||||
postcss-value-parser: 4.2.0
|
||||
dev: true
|
||||
|
||||
/postcss-custom-media/9.0.1_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-CimS72gZZ0V4WPFg7t7EqFVLxJ0mqwAJSsuk+LNHSo9ApC7d/SuOr65sKrUY/D8locOh+3s4yO7IdqQ9cRSR7Q==}
|
||||
engines: {node: ^14 || ^16 || >=18}
|
||||
peerDependencies:
|
||||
postcss: ^8.4
|
||||
dependencies:
|
||||
'@csstools/css-parser-algorithms': 1.0.0_yc2lywpo4a5sk4h3mmwqkmetvu
|
||||
'@csstools/css-tokenizer': 1.0.0
|
||||
'@csstools/media-query-list-parser': 1.0.0_oycmb73qbeg4xspzoh5ywrqikm
|
||||
postcss: 8.4.19
|
||||
dev: true
|
||||
|
||||
/postcss-env-function/4.0.6_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==}
|
||||
engines: {node: ^12 || ^14 || >=16}
|
||||
peerDependencies:
|
||||
postcss: ^8.4
|
||||
dependencies:
|
||||
postcss: 8.4.19
|
||||
postcss-value-parser: 4.2.0
|
||||
dev: true
|
||||
|
||||
/postcss-import/15.0.0_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-Y20shPQ07RitgBGv2zvkEAu9bqvrD77C9axhj/aA1BQj4czape2MdClCExvB27EwYEJdGgKZBpKanb0t1rK2Kg==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.0.0
|
||||
dependencies:
|
||||
postcss: 8.4.19
|
||||
postcss-value-parser: 4.2.0
|
||||
read-cache: 1.0.0
|
||||
resolve: 1.22.1
|
||||
dev: true
|
||||
|
||||
/postcss-load-config/4.0.1_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
|
||||
engines: {node: '>= 14'}
|
||||
peerDependencies:
|
||||
postcss: '>=8.0.9'
|
||||
ts-node: '>=9.0.0'
|
||||
peerDependenciesMeta:
|
||||
postcss:
|
||||
optional: true
|
||||
ts-node:
|
||||
optional: true
|
||||
dependencies:
|
||||
lilconfig: 2.0.6
|
||||
postcss: 8.4.19
|
||||
yaml: 2.1.3
|
||||
dev: true
|
||||
|
||||
/postcss-media-minmax/5.0.0_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.1.0
|
||||
dependencies:
|
||||
postcss: 8.4.19
|
||||
dev: true
|
||||
|
||||
/postcss-nested/6.0.0_postcss@8.4.19:
|
||||
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
|
||||
engines: {node: '>=12.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.2.14
|
||||
dependencies:
|
||||
postcss: 8.4.19
|
||||
postcss-selector-parser: 6.0.11
|
||||
dev: true
|
||||
|
||||
/postcss-selector-parser/6.0.11:
|
||||
resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
|
||||
engines: {node: '>=4'}
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
util-deprecate: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss-value-parser/4.2.0:
|
||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
dev: true
|
||||
|
||||
/postcss/8.4.19:
|
||||
resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
|
|
@ -1486,6 +1690,12 @@ packages:
|
|||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
dev: true
|
||||
|
||||
/read-cache/1.0.0:
|
||||
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
|
||||
dependencies:
|
||||
pify: 2.3.0
|
||||
dev: true
|
||||
|
||||
/readdirp/3.6.0:
|
||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||
engines: {node: '>=8.10.0'}
|
||||
|
|
@ -1626,6 +1836,7 @@ packages:
|
|||
|
||||
/sourcemap-codec/1.4.8:
|
||||
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
|
||||
deprecated: Please use @jridgewell/sourcemap-codec instead
|
||||
dev: true
|
||||
|
||||
/streamsearch/1.1.0:
|
||||
|
|
@ -1664,7 +1875,7 @@ packages:
|
|||
engines: {node: '>= 0.4'}
|
||||
dev: true
|
||||
|
||||
/svelte-check/2.10.0_sass@1.56.1+svelte@3.53.1:
|
||||
/svelte-check/2.10.0_lae5lhfxexyizvi5yxbuu4veoq:
|
||||
resolution: {integrity: sha512-5iLCoja/WsithyRkNtIeDQ0euJlgWj3Zzo2IA6iuHMuuX9D9OrRYZj2WlA5ACnAFQnN5L9mxWcwUW9VxDNEoGg==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -1677,7 +1888,7 @@ packages:
|
|||
picocolors: 1.0.0
|
||||
sade: 1.8.1
|
||||
svelte: 3.53.1
|
||||
svelte-preprocess: 4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm
|
||||
svelte-preprocess: 4.10.7_lucnjuyigjdgzzplgxx36nk3ki
|
||||
typescript: 4.9.3
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
|
|
@ -1705,7 +1916,7 @@ packages:
|
|||
resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
|
||||
dev: false
|
||||
|
||||
/svelte-preprocess/4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm:
|
||||
/svelte-preprocess/4.10.7_lucnjuyigjdgzzplgxx36nk3ki:
|
||||
resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
|
||||
engines: {node: '>= 9.11.2'}
|
||||
requiresBuild: true
|
||||
|
|
@ -1750,6 +1961,8 @@ packages:
|
|||
'@types/sass': 1.43.1
|
||||
detect-indent: 6.1.0
|
||||
magic-string: 0.25.9
|
||||
postcss: 8.4.19
|
||||
postcss-load-config: 4.0.1_postcss@8.4.19
|
||||
sass: 1.56.1
|
||||
sorcery: 0.10.0
|
||||
strip-indent: 3.0.0
|
||||
|
|
@ -1828,12 +2041,27 @@ packages:
|
|||
busboy: 1.6.0
|
||||
dev: true
|
||||
|
||||
/update-browserslist-db/1.0.10_browserslist@4.21.4:
|
||||
resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
browserslist: '>= 4.21.0'
|
||||
dependencies:
|
||||
browserslist: 4.21.4
|
||||
escalade: 3.1.1
|
||||
picocolors: 1.0.0
|
||||
dev: true
|
||||
|
||||
/uri-js/4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
dependencies:
|
||||
punycode: 2.1.1
|
||||
dev: true
|
||||
|
||||
/util-deprecate/1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
dev: true
|
||||
|
||||
/vite/3.2.4_clvymlzunojxjbv3h6i2warera:
|
||||
resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
|
@ -1901,6 +2129,11 @@ packages:
|
|||
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
||||
dev: true
|
||||
|
||||
/yaml/2.1.3:
|
||||
resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
|
||||
engines: {node: '>= 14'}
|
||||
dev: true
|
||||
|
||||
/yocto-queue/0.1.0:
|
||||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
|
|||
19
postcss.config.cjs
Normal file
19
postcss.config.cjs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
const autoprefixer = require('autoprefixer');
|
||||
const postcssMediaMinmax = require('postcss-media-minmax');
|
||||
const customMedia = require('postcss-custom-media');
|
||||
const atImport = require('postcss-import');
|
||||
const postcssNested = require('postcss-nested');
|
||||
const postcssEnvFunction = require('postcss-env-function');
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
autoprefixer(),
|
||||
postcssMediaMinmax,
|
||||
customMedia,
|
||||
atImport(),
|
||||
postcssNested,
|
||||
postcssEnvFunction(),
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
111
src/app.postcss
111
src/app.postcss
|
|
@ -1,111 +0,0 @@
|
|||
/* Write your global styles here, in PostCSS syntax */
|
||||
|
||||
@import '@fontsource/fira-mono';
|
||||
|
||||
:root {
|
||||
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Mono', monospace;
|
||||
--pure-white: #ffffff;
|
||||
--primary-color: #b9c6d2;
|
||||
--secondary-color: #d0dde9;
|
||||
--tertiary-color: #edf0f8;
|
||||
--accent-color: #ff3e00;
|
||||
--heading-color: rgba(0, 0, 0, 0.7);
|
||||
--text-color: #444444;
|
||||
--background-without-opacity: rgba(255, 255, 255, 0.7);
|
||||
--column-width: 42rem;
|
||||
--column-margin-top: 4rem;
|
||||
--z-highest: 100;
|
||||
--cardBorderRadius: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--primary-color);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--secondary-color) 10.45%,
|
||||
var(--tertiary-color) 41.35%
|
||||
);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10vw;
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
50% 50% at 50% 50%,
|
||||
var(--pure-white) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#svelte {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-mono);
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { browser } from '$app/environment';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
||||
import { browser } from '$app/environment';
|
||||
import DefaultDialog from './DefaultDialog.svelte';
|
||||
|
||||
function clearWishlist() {
|
||||
if (browser) {
|
||||
|
|
@ -18,35 +12,23 @@
|
|||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
function stopLoading() {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Clear wishlist</DialogTitle>
|
||||
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
|
||||
<DefaultDialog
|
||||
title="Clear wishlist"
|
||||
description="Are you sure you want to clear your wishlist?"
|
||||
danger
|
||||
primaryButtonText="Clear"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:primary={clearWishlist}
|
||||
on:click:secondary={stopLoading}
|
||||
on:close={stopLoading}
|
||||
/>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button class="remove" on:click={clearWishlist}>Clear</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { type SvelteComponent, createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
|
|
@ -8,23 +9,67 @@
|
|||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
export let danger = false;
|
||||
export let alert = false;
|
||||
export let passive = false;
|
||||
export let primaryButtonText = '';
|
||||
export let primaryButtonDisabled = false;
|
||||
export let primaryButtonIcon: typeof SvelteComponent = undefined;
|
||||
export let primaryButtonIconDescription = '';
|
||||
export let secondaryButtonText = '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
|
||||
dispatch('close');
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Default Dialog</DialogTitle>
|
||||
<DialogDescription>Dialog Description</DialogDescription>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{#if description}
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
{/if}
|
||||
|
||||
<div class="dialog-footer" />
|
||||
<div class="dialog-footer">
|
||||
<button
|
||||
disabled={primaryButtonDisabled}
|
||||
class={danger ? 'danger' : 'primary'}
|
||||
on:click={() => {
|
||||
dispatch('click:secondary');
|
||||
}}
|
||||
>
|
||||
{#if primaryButtonIcon}
|
||||
<svelte:component
|
||||
this={primaryButtonIcon}
|
||||
aria-hidden="true"
|
||||
class="button-icon"
|
||||
aria-label={primaryButtonIconDescription}
|
||||
/>
|
||||
{/if}
|
||||
<span>
|
||||
{primaryButtonText}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
dispatch('submit');
|
||||
dispatch('click:primary');
|
||||
}}
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
@ -34,7 +79,7 @@
|
|||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
|
|
@ -62,6 +107,14 @@
|
|||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
export let pageSize: number; // Reactive, bind
|
||||
export let page: number = 1; // Reactive, bind
|
||||
export let totalItems: number;
|
||||
export let showItemsLeft = false;
|
||||
export let pageSizeInputDisabled: boolean = false;
|
||||
export let pageSizes: ReadonlyArray<Number> = [10];
|
||||
export let forwardText: string;
|
||||
|
|
@ -74,9 +75,11 @@
|
|||
<p>
|
||||
Page {page || 1} of {totalPages || 1}
|
||||
</p>
|
||||
<p>
|
||||
{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
|
||||
</p>
|
||||
{#if showItemsLeft}
|
||||
<p>
|
||||
{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
|
||||
</p>
|
||||
{/if}
|
||||
<div style="display: flex; gap: 2rem;">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -107,17 +110,13 @@
|
|||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
display: flex;
|
||||
flex: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 3rem 0;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -131,23 +130,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* .list-container :global(.list-box) {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-container :global(.list-options) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.list-container :global(.active) {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
} */
|
||||
|
||||
button {
|
||||
/* min-width: 50px; */
|
||||
&[aria-current],
|
||||
&.current {
|
||||
color: black; // TODO: Fix these colors
|
||||
|
|
|
|||
|
|
@ -3,20 +3,29 @@
|
|||
import { boredState } from '$lib/stores/boredState';
|
||||
|
||||
export let form: ActionData;
|
||||
console.log('form data', form?.data);
|
||||
const errors = form?.errors;
|
||||
let submitting = $boredState?.loading;
|
||||
let minAge = +form?.minAge || 1;
|
||||
let minPlayers = +form?.minPlayers || 1;
|
||||
let maxPlayers = +form?.maxPlayers || 1;
|
||||
let exactMinPlayers = form?.exactMinPlayers || false;
|
||||
let exactMaxPlayers = form?.exactMaxPlayers || false;
|
||||
let minAge = +form?.data?.minAge || 1;
|
||||
let minPlayers = +form?.data?.minPlayers || 1;
|
||||
let maxPlayers = +form?.data?.maxPlayers || 1;
|
||||
let exactMinPlayers = Boolean(form?.data?.exactMinPlayers) || false;
|
||||
let exactMaxPlayers = Boolean(form?.data?.exactMaxPlayers) || false;
|
||||
</script>
|
||||
|
||||
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
|
||||
<div>
|
||||
<label for="minAge">
|
||||
Min Age
|
||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min="1" max="120" />
|
||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
|
||||
</label>
|
||||
{#if form?.errors?.minAge}
|
||||
<div id="minPlayers-error" class="error">
|
||||
<p aria-label={`Error: ${form?.errors?.minAge}`} class="center">
|
||||
{form?.errors?.minAge}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label for="minPlayers">
|
||||
|
|
@ -26,8 +35,8 @@
|
|||
name="minPlayers"
|
||||
bind:value={minPlayers}
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
min={1}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
|
|
@ -37,12 +46,13 @@
|
|||
type="checkbox"
|
||||
name="exactMinPlayers"
|
||||
bind:checked={exactMinPlayers}
|
||||
bind:value={exactMinPlayers}
|
||||
/>
|
||||
</label>
|
||||
{#if form?.error?.id === 'minPlayers'}
|
||||
{#if form?.errors?.minPlayers}
|
||||
<div id="minPlayers-error" class="error">
|
||||
<p aria-label={`Error: ${form.error.message}`} class="center">
|
||||
Error: {form.error.message}
|
||||
<p aria-label={`Error: ${form?.errors?.minPlayers}`} class="center">
|
||||
{form?.errors?.minPlayers}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -55,8 +65,8 @@
|
|||
name="maxPlayers"
|
||||
bind:value={maxPlayers}
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
min={1}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
|
|
@ -66,6 +76,7 @@
|
|||
type="checkbox"
|
||||
name="exactMaxPlayers"
|
||||
bind:checked={exactMaxPlayers}
|
||||
bind:value={exactMaxPlayers}
|
||||
/>
|
||||
</label>
|
||||
{#if form?.error?.id === 'maxPlayers'}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
gameStore.removeAll();
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
return async ({ result }) => {
|
||||
console.log('result', result);
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
// `result` is an `ActionResult` object
|
||||
if (result.type === 'success') {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
// console.log('search page data', data);
|
||||
export let form: ActionData;
|
||||
// console.log('search page form', form);
|
||||
const errors = form?.errors;
|
||||
|
||||
export let showButton: boolean = false;
|
||||
export let advancedSearch: boolean = false;
|
||||
|
|
@ -37,10 +38,9 @@
|
|||
let totalItems = form?.totalCount || data?.totalCount || 0;
|
||||
let submitting = $boredState?.loading;
|
||||
let name = form?.name || '';
|
||||
let disclosureOpen = false;
|
||||
let disclosureOpen = errors || false;
|
||||
|
||||
$: skip = (page - 1) * pageSize;
|
||||
$: console.log('submit button', submitButton);
|
||||
$: showPagination = $gameStore?.length > 1;
|
||||
|
||||
if ($xl) {
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.search {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
@ -273,15 +273,15 @@
|
|||
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media screen and (800px < width <= 1200px) {
|
||||
--listColumns: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media screen and (650px < width <= 800px) {
|
||||
--listColumns: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
@media screen and (width <= 650px) {
|
||||
--listColumns: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
src/lib/stores/breakpointMatcher.ts
Normal file
32
src/lib/stores/breakpointMatcher.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { readable } from 'svelte/store';
|
||||
export const breakpointMatcher = (mediaQueries: Record<string, MediaQueryList | string>) => {
|
||||
if (typeof window === 'undefined') return readable(null); //return null if window doesn't exist
|
||||
|
||||
return readable<string | null>('', (set) => {
|
||||
// extract the breakpoints
|
||||
const breakpoints = Object.keys(mediaQueries);
|
||||
|
||||
// convert sizes to <string, MediaQueryList>
|
||||
// this is converted here because of window undefined issue
|
||||
Object.keys(mediaQueries).forEach(
|
||||
(mql) => (mediaQueries[mql] = window.matchMedia(mediaQueries[mql] as string))
|
||||
);
|
||||
|
||||
// function that set current breakpoint
|
||||
function setCurrentBreakPoint() {
|
||||
for (const size of breakpoints) {
|
||||
// i used forEach but break doesn't work
|
||||
const mql = mediaQueries[size] as MediaQueryList;
|
||||
if (mql?.matches) {
|
||||
set(size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentBreakPoint(); //set the current breakpoint for the first time
|
||||
window.addEventListener('resize', () => {
|
||||
// TODO: figure out a way to change the resize event
|
||||
setCurrentBreakPoint(); //set the current breakpoint when the size change
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -12,6 +12,8 @@ export function convertToSavedGame(game: GameType | SavedGameType): SavedGameTyp
|
|||
|
||||
export function mapSavedGameToGame(game: SavedGameType): GameType {
|
||||
const { id, name, thumb_url, players, playtime } = game;
|
||||
console.log({ id, name, thumb_url, players, playtime });
|
||||
|
||||
|
||||
return {
|
||||
id,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { z } from 'zod';
|
||||
import zodToJsonSchema from 'zod-to-json-schema';
|
||||
import { z, ZodNumber, ZodOptional } from 'zod';
|
||||
// import zodToJsonSchema from 'zod-to-json-schema';
|
||||
|
||||
export const BoardGameSearch = z.object({
|
||||
minAge: z.number(),
|
||||
|
|
@ -8,7 +8,127 @@ export const BoardGameSearch = z.object({
|
|||
maxPlayers: z.number()
|
||||
});
|
||||
|
||||
export const Board
|
||||
export const saved_game_schema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
thumb_url: z.string(),
|
||||
players: z.string(),
|
||||
playtime: z.string()
|
||||
});
|
||||
|
||||
// https://github.com/colinhacks/zod/discussions/330
|
||||
function IntegerString
|
||||
<schema extends (ZodNumber | ZodOptional<ZodNumber>)>
|
||||
(schema: schema)
|
||||
{
|
||||
return (
|
||||
z.preprocess((value) => (
|
||||
( (typeof value === "string") ? parseInt(value, 10)
|
||||
: (typeof value === "number") ? value
|
||||
: undefined
|
||||
)), schema)
|
||||
)
|
||||
}
|
||||
|
||||
export const search_schema = z.object({
|
||||
name: z.string().trim().optional(),
|
||||
minAge: IntegerString(z.number().min(1).max(120).optional()),
|
||||
minPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
maxPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
exactMinAge: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMinPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMaxPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional())
|
||||
})
|
||||
.superRefine(({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
|
||||
console.log({ minPlayers, maxPlayers });
|
||||
if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinAge && !minAge) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Age required when searching for exact min age',
|
||||
path: ['minAge'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinPlayers && !minPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players required when searching for exact min players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMaxPlayers && !maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Max Players required when searching for exact max players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const search_result_schema = z.object({
|
||||
client_id: z.string(),
|
||||
limit: z.number(),
|
||||
skip: z.number(),
|
||||
ids: z.string().array(),
|
||||
list_id: z.string(),
|
||||
kickstarter: z.boolean(),
|
||||
random: z.boolean(),
|
||||
name: z.string(),
|
||||
exact: z.boolean(),
|
||||
fuzzy_match: z.boolean(),
|
||||
designer: z.string(),
|
||||
publisher: z.string(),
|
||||
artist: z.string(),
|
||||
mechanics: z.string(),
|
||||
categories: z.string(),
|
||||
order_by: z.string(),
|
||||
ascending: z.boolean(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
year_published: z.number(),
|
||||
gt_min_players: z.number(),
|
||||
gt_max_players: z.number(),
|
||||
gt_min_playtime: z.number(),
|
||||
gt_max_playtime: z.number(),
|
||||
gt_min_age: z.number(),
|
||||
gt_year_published:z.number(),
|
||||
gt_price: z.bigint(),
|
||||
gt_msrp: z.bigint(),
|
||||
gt_discount: z.bigint(),
|
||||
gt_reddit_count: z.number(),
|
||||
gt_reddit_week_count: z.number(),
|
||||
gt_reddit_day_count: z.number(),
|
||||
lt_min_players: z.number(),
|
||||
lt_max_players: z.number(),
|
||||
lt_min_playtime: z.number(),
|
||||
lt_max_playtime: z.number(),
|
||||
lt_min_age: z.number(),
|
||||
lt_year_published: z.number(),
|
||||
lt_price: z.bigint(),
|
||||
lt_msrp: z.bigint(),
|
||||
lt_discount: z.bigint(),
|
||||
lt_reddit_count: z.number(),
|
||||
lt_reddit_week_count: z.number(),
|
||||
lt_reddit_day_count: z.number(),
|
||||
fields: z.string(),
|
||||
});
|
||||
|
||||
export const game_schema = z.object({
|
||||
id: z.string(),
|
||||
|
|
@ -32,8 +152,8 @@ export const game_schema = z.object({
|
|||
playtime: z.string()
|
||||
});
|
||||
|
||||
export const game_raw_schema_json = zodToJsonSchema(game_schema, {
|
||||
$refStrategy: 'none',
|
||||
});
|
||||
// export const game_raw_schema_json = zodToJsonSchema(game_schema, {
|
||||
// $refStrategy: 'none',
|
||||
// });
|
||||
|
||||
export type Game = z.infer<typeof game_schema>;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { navigating } from '$app/stores';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
// import '../app.postcss';
|
||||
import Analytics from '$lib/components/analytics.svelte';
|
||||
import Header from '$lib/components/header/Header.svelte';
|
||||
import Loading from '$lib/components/loading.svelte';
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { toast } from '$lib/components/toast/toast';
|
||||
import Toast from '$lib/components/toast/Toast.svelte';
|
||||
import '$root/styles/styles.scss';
|
||||
import '$root/styles/styles.postcss';
|
||||
|
||||
$: {
|
||||
if ($navigating) {
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
<Toast />
|
||||
</Transition>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
import Random from '$lib/components/random/index.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
console.log('data', data);
|
||||
export let form: ActionData;
|
||||
console.log('form', form);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
|||
import { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
|
||||
import type { GameType, SearchQuery } from '$root/lib/types';
|
||||
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
||||
import { search_schema } from '$root/lib/zodValidation';
|
||||
import { ZodError } from 'zod';
|
||||
|
||||
export const load: PageServerLoad = () => {
|
||||
return {
|
||||
|
|
@ -12,15 +14,16 @@ export const load: PageServerLoad = () => {
|
|||
}
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, locals }: RequestEvent): Promise<any> => {
|
||||
default: async ({ request }: RequestEvent): Promise<any> => {
|
||||
console.log("In search action specific")
|
||||
// Do things in here
|
||||
const form = await request.formData();
|
||||
console.log('passed in limit:', form.get('limit'))
|
||||
console.log('passed in skip:', form.get('skip'))
|
||||
const limit = form.get('limit') || 10;
|
||||
const skip = form.get('skip') || 0;
|
||||
console.log('action form', form);
|
||||
const formData = Object.fromEntries(await request.formData());
|
||||
console.log('formData', formData);
|
||||
console.log('passed in limit:', formData?.limit)
|
||||
console.log('passed in skip:', formData?.skip)
|
||||
const limit = formData?.limit || 10;
|
||||
const skip = formData?.skip || 0;
|
||||
|
||||
const queryParams: SearchQuery = {
|
||||
order_by: 'rank',
|
||||
ascending: false,
|
||||
|
|
@ -33,52 +36,58 @@ export const actions: Actions = {
|
|||
|
||||
// TODO: Check name length and not search if not advanced search
|
||||
|
||||
const random = form.get('random') && form.get('random') === 'on';
|
||||
const random = formData?.random === 'on';
|
||||
|
||||
if (random) {
|
||||
console.log('Random');
|
||||
queryParams.random = random;
|
||||
} else {
|
||||
const minAge = form.get('minAge');
|
||||
const minPlayers = form.get('minPlayers');
|
||||
console.log('minPlayers', minPlayers);
|
||||
const maxPlayers = form.get('maxPlayers');
|
||||
console.log('maxPlayers', maxPlayers);
|
||||
const exactMinAge = form.get('exactMinAge') || false;
|
||||
const exactMinPlayers = form.get('exactMinPlayers') || false;
|
||||
const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
||||
try {
|
||||
console.log('Parsed', search_schema.parse(formData))
|
||||
const {
|
||||
name,
|
||||
minAge,
|
||||
minPlayers,
|
||||
maxPlayers,
|
||||
exactMinAge,
|
||||
exactMinPlayers,
|
||||
exactMaxPlayers
|
||||
} = search_schema.parse(formData);
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = +minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (minPlayers && maxPlayers) {
|
||||
if (+minPlayers > +maxPlayers) {
|
||||
return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
|
||||
}
|
||||
// else if (+maxPlayers < +minPlayers) {
|
||||
// return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
|
||||
// }
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = +minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = +maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = +maxPlayers + 1;
|
||||
if (minPlayers) {
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = minPlayers === 1 ? 0 : minPlayers - 1;
|
||||
}
|
||||
}
|
||||
if (maxPlayers) {
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = maxPlayers + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const name = form.has('name') ? form.get('name') : await request?.text();
|
||||
console.log('name', name);
|
||||
if (name) {
|
||||
queryParams.name = `${name}`;
|
||||
if (name) {
|
||||
queryParams.name = name;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof ZodError) {
|
||||
console.log(error);
|
||||
|
||||
const { fieldErrors: errors } = error.flatten();
|
||||
return invalid(400, { data: formData, errors });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +110,7 @@ export const actions: Actions = {
|
|||
'content-type': 'application/json'
|
||||
}
|
||||
});
|
||||
console.log('board game response', response);
|
||||
// console.log('board game response', response);
|
||||
|
||||
if (!response.ok) {
|
||||
console.log('Status not 200', response.status);
|
||||
|
|
@ -110,7 +119,7 @@ export const actions: Actions = {
|
|||
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
console.log('gameResponse', gameResponse);
|
||||
// console.log('gameResponse', gameResponse);
|
||||
const gameList = gameResponse?.games;
|
||||
const totalCount = gameResponse?.count;
|
||||
console.log('totalCount', totalCount);
|
||||
|
|
@ -119,13 +128,13 @@ export const actions: Actions = {
|
|||
games.push(mapAPIGameToBoredGame(game));
|
||||
});
|
||||
|
||||
console.log('returning from search', games)
|
||||
// console.log('returning from search', games)
|
||||
|
||||
return {
|
||||
games,
|
||||
totalCount,
|
||||
limit: +limit,
|
||||
skip: +skip,
|
||||
limit: parseInt(limit),
|
||||
skip: parseInt(skip),
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
|
|||
400
src/styles/global.postcss
Normal file
400
src/styles/global.postcss
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
/* Setup */
|
||||
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
|
||||
|
||||
:root {
|
||||
--color-brand: hsl(204 88% 53%);
|
||||
--color-text-primary: hsl(0 0% 98%);
|
||||
--color-text-muted: hsl(210 34% 80%);
|
||||
--color-bg-primary: hsl(210 34% 13%);
|
||||
--color-bg-secondary: hsl(209, 35%, 15%);
|
||||
--color-btn-primary-active: var(--color-brand);
|
||||
--color-btn-primary-active-hover: hsl(204 88% 60%);
|
||||
--color-btn-primary-inactive: hsl(205 70% 33%);
|
||||
--color-btn-secondary: hsl(192 19% 95%);
|
||||
--color-border-primary: hsl(0, 0%, 34%);
|
||||
--color-link-hover: hsl(209 22% 19%);
|
||||
--color-placeholder: hsl(210 34% 80%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
|
||||
--red: #990000;
|
||||
--tomatoOrange: hsla(0, 75%, 60%, 1);
|
||||
--redBrown: #633539;
|
||||
--blue: #336699;
|
||||
--black: #1f273a;
|
||||
--white: #fff;
|
||||
--grey: #efefef;
|
||||
--greyBlue: hsla(222, 9%, 57%, 1);
|
||||
--lighterGreyBlue: #6a707e;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--dark: #000000;
|
||||
--lightGrey: #c5c5c5;
|
||||
--lightGray: var(--lightGrey);
|
||||
--imGoingToFaint: #fbfbfb;
|
||||
--redBrown: #633539;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--greyBlue);
|
||||
--secondary: var(--redBrown);
|
||||
--background: var(--white);
|
||||
--textColor: var(--lighterGreyBlue);
|
||||
--buttonTextColor: var(--white);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--greyBlue);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--white);
|
||||
--lightHairLine: #c5c5c5;
|
||||
|
||||
--radius-base: 1rem;
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Merriweather Sans', sans-serif;
|
||||
--bodyFont: 'Work Sans', sans-serif;
|
||||
--baseFontSize: 100%;
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--h6: 1.8rem;
|
||||
--bodyTextSize: 1.8rem;
|
||||
--smallText: 1.44rem;
|
||||
--lineHeight: 2.25rem;
|
||||
--font-serif: 'Inter', sans-serif;
|
||||
--font-16: 1.6rem;
|
||||
--font-18: 1.8rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-80: 8rem;
|
||||
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.5rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-20: 2rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Z Indexes */
|
||||
--zBase: 1;
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 4px;
|
||||
--borderRadiusLarge: 10px;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Font */
|
||||
--font-sans: 'Poppins', sans-serif;
|
||||
--font-serif: 'Arsenica', serif;
|
||||
--font-mono: Source Code Pro, monospace;
|
||||
--font-dyslexic: OpenDyslexic, sans-serif;
|
||||
--font-dyslexic-mono: OpenDyslexic Mono, monospace;
|
||||
|
||||
--font-16: 1.6rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-48: 4.8rem;
|
||||
--font-96: 9.6rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.8rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
--spacing-64: 6.4rem;
|
||||
--spacing-128: 12.8rem;
|
||||
|
||||
/* Scrollbar */
|
||||
--clr-scrollbar-thumb: hsl(173 10% 20%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
|
||||
--shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
|
||||
--shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);
|
||||
|
||||
/* Border radius */
|
||||
--rounded-4: 4px;
|
||||
--rounded-20: 20px;
|
||||
|
||||
--toast-background: var(--color-brand);
|
||||
--toast-error-background: var(--tomatoOrange);
|
||||
|
||||
/* Media Queryies - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
|
||||
/* Light Theme Default */
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--bodyTextSize);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-brand);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--font-16);
|
||||
color: var(--clr-txt);
|
||||
background-color: var(--clr-bg);
|
||||
opacity: var(--bg-opacity);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: var(--spacing-8) 0;
|
||||
font-size: var(--font-24);
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: var(--spacing-8);
|
||||
font-size: var(--font-16);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--clr-input-bg);
|
||||
border: solid 2px var(--clr-theme-active);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-18);
|
||||
font-weight: bold;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
border-radius: var(--radius-base);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
color: var(--color-text-muted);
|
||||
background-color: var(--color-btn-primary-inactive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
||||
.responsive {
|
||||
resize: both;
|
||||
overflow: scroll;
|
||||
border: 1px solid hsl(0 0% 0%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
padding: var(--spacing-20) 0;
|
||||
background-color: var(--color-placeholder);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--borderRadius);
|
||||
background-color: var(--tomatoOrange);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Base Dialog Styles */
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,407 +0,0 @@
|
|||
/* Setup */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--color-brand: hsl(204 88% 53%);
|
||||
--color-text-primary: hsl(0 0% 98%);
|
||||
--color-text-muted: hsl(210 34% 80%);
|
||||
--color-bg-primary: hsl(210 34% 13%);
|
||||
--color-bg-secondary: hsl(209, 35%, 15%);
|
||||
--color-btn-primary-active: var(--color-brand);
|
||||
--color-btn-primary-active-hover: hsl(204 88% 60%);
|
||||
--color-btn-primary-inactive: hsl(205 70% 33%);
|
||||
--color-btn-secondary: hsl(192 19% 95%);
|
||||
--color-border-primary: hsl(0, 0%, 34%);
|
||||
--color-link-hover: hsl(209 22% 19%);
|
||||
--color-placeholder: hsl(210 34% 80%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
|
||||
--red: #990000;
|
||||
--tomatoOrange: hsla(0, 75%, 60%, 1);
|
||||
--redBrown: #633539;
|
||||
--blue: #336699;
|
||||
--black: #1f273a;
|
||||
--white: #fff;
|
||||
--grey: #efefef;
|
||||
--greyBlue: hsla(222, 9%, 57%, 1);
|
||||
--lighterGreyBlue: #6a707e;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--dark: #000000;
|
||||
--lightGrey: #c5c5c5;
|
||||
--lightGray: var(--lightGrey);
|
||||
--imGoingToFaint: #fbfbfb;
|
||||
--redBrown: #633539;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--greyBlue);
|
||||
--secondary: var(--redBrown);
|
||||
--background: var(--white);
|
||||
--textColor: var(--lighterGreyBlue);
|
||||
--buttonTextColor: var(--white);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--greyBlue);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--white);
|
||||
--lightHairLine: #c5c5c5;
|
||||
|
||||
--radius-base: 1rem;
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Merriweather Sans', sans-serif;
|
||||
--bodyFont: 'Work Sans', sans-serif;
|
||||
--baseFontSize: 100%;
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--h6: 1.8rem;
|
||||
--bodyTextSize: 1.8rem;
|
||||
--smallText: 1.44rem;
|
||||
--lineHeight: 2.25rem;
|
||||
--font-serif: 'Inter', sans-serif;
|
||||
--font-16: 1.6rem;
|
||||
--font-18: 1.8rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-80: 8rem;
|
||||
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.5rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-20: 2rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Z Indexes */
|
||||
--zBase: 1;
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 4px;
|
||||
--borderRadiusLarge: 10px;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Font */
|
||||
--font-sans: 'Poppins', sans-serif;
|
||||
--font-serif: 'Arsenica', serif;
|
||||
--font-mono: Source Code Pro, monospace;
|
||||
--font-dyslexic: OpenDyslexic, sans-serif;
|
||||
--font-dyslexic-mono: OpenDyslexic Mono, monospace;
|
||||
|
||||
--font-16: 1.6rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-48: 4.8rem;
|
||||
--font-96: 9.6rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.8rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
--spacing-64: 6.4rem;
|
||||
--spacing-128: 12.8rem;
|
||||
|
||||
/* Scrollbar */
|
||||
--clr-scrollbar-thumb: hsl(173 10% 20%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
|
||||
--shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
|
||||
--shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);
|
||||
|
||||
/* Border radius */
|
||||
--rounded-4: 4px;
|
||||
--rounded-20: 20px;
|
||||
|
||||
--toast-background: var(--color-brand);
|
||||
--toast-error-background: var(--tomatoOrange);
|
||||
|
||||
/* Media Queryies - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
|
||||
/* Light Theme Default */
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
// background-color: var(--seaFoamBlue);
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
// line-height: var(--lineHeight);
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--bodyTextSize);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-brand);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--font-16);
|
||||
// color: var(--color-text-primary);
|
||||
// background-color: var(--color-bg-primary);
|
||||
color: var(--clr-txt);
|
||||
background-color: var(--clr-bg);
|
||||
opacity: var(--bg-opacity);
|
||||
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
|
||||
// background-attachment: fixed;
|
||||
// background-size: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: var(--spacing-8) 0;
|
||||
font-size: var(--font-24);
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: var(--spacing-8);
|
||||
font-size: var(--font-16);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--clr-input-bg);
|
||||
border: solid 2px var(--clr-theme-active);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-18);
|
||||
font-weight: bold;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
border-radius: var(--radius-base);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
color: var(--color-text-muted);
|
||||
background-color: var(--color-btn-primary-inactive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
||||
.responsive {
|
||||
resize: both;
|
||||
overflow: scroll;
|
||||
border: 1px solid hsl(0 0% 0%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
padding: var(--spacing-20) 0;
|
||||
background-color: var(--color-placeholder);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--borderRadius);
|
||||
background-color: var(--tomatoOrange);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Base Dialog Styles */
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/styles/styles.postcss
Normal file
3
src/styles/styles.postcss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'reset.postcss';
|
||||
@import 'global.postcss';
|
||||
@import 'theme.postcss';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@use 'reset.scss';
|
||||
@use 'global.scss';
|
||||
@use 'theme.scss';
|
||||
|
|
@ -5,7 +5,11 @@ import preprocess from 'svelte-preprocess';
|
|||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess(),
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue