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",
|
"@types/node": "^18.11.9",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||||
"@typescript-eslint/parser": "^5.42.1",
|
"@typescript-eslint/parser": "^5.42.1",
|
||||||
|
"autoprefixer": "^10.4.13",
|
||||||
"eslint": "^8.27.0",
|
"eslint": "^8.27.0",
|
||||||
"eslint-config-prettier": "^8.1.0",
|
"eslint-config-prettier": "^8.1.0",
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"just-debounce-it": "^3.1.1",
|
"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": "^2.7.1",
|
||||||
"prettier-plugin-svelte": "^2.8.0",
|
"prettier-plugin-svelte": "^2.8.0",
|
||||||
"sass": "^1.56.1",
|
"sass": "^1.56.1",
|
||||||
|
|
@ -47,6 +56,6 @@
|
||||||
"feather-icons": "^4.29.0",
|
"feather-icons": "^4.29.0",
|
||||||
"svelte-lazy-loader": "^1.0.0",
|
"svelte-lazy-loader": "^1.0.0",
|
||||||
"zod": "^3.19.1",
|
"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
|
'@types/node': ^18.11.9
|
||||||
'@typescript-eslint/eslint-plugin': ^5.42.1
|
'@typescript-eslint/eslint-plugin': ^5.42.1
|
||||||
'@typescript-eslint/parser': ^5.42.1
|
'@typescript-eslint/parser': ^5.42.1
|
||||||
|
autoprefixer: ^10.4.13
|
||||||
cookie: ^0.5.0
|
cookie: ^0.5.0
|
||||||
eslint: ^8.27.0
|
eslint: ^8.27.0
|
||||||
eslint-config-prettier: ^8.1.0
|
eslint-config-prettier: ^8.1.0
|
||||||
eslint-plugin-svelte3: ^4.0.0
|
eslint-plugin-svelte3: ^4.0.0
|
||||||
feather-icons: ^4.29.0
|
feather-icons: ^4.29.0
|
||||||
just-debounce-it: ^3.1.1
|
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: ^2.7.1
|
||||||
prettier-plugin-svelte: ^2.8.0
|
prettier-plugin-svelte: ^2.8.0
|
||||||
sass: ^1.56.1
|
sass: ^1.56.1
|
||||||
|
|
@ -32,7 +41,7 @@ specifiers:
|
||||||
typescript: ^4.8.4
|
typescript: ^4.8.4
|
||||||
vite: ^3.2.3
|
vite: ^3.2.3
|
||||||
zod: ^3.19.1
|
zod: ^3.19.1
|
||||||
zod-to-json-schema: ^3.18.1
|
zod-to-json-schema: ^3.19.3
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@fontsource/fira-mono': 4.5.10
|
'@fontsource/fira-mono': 4.5.10
|
||||||
|
|
@ -51,27 +60,61 @@ devDependencies:
|
||||||
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.53.1
|
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.53.1
|
||||||
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.53.1
|
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.53.1
|
||||||
'@sveltejs/adapter-auto': 1.0.0-next.90
|
'@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/cookie': 0.5.1
|
||||||
'@types/node': 18.11.10
|
'@types/node': 18.11.10
|
||||||
'@typescript-eslint/eslint-plugin': 5.45.0_czs5uoqkd3podpy6vgtsxfc7au
|
'@typescript-eslint/eslint-plugin': 5.45.0_czs5uoqkd3podpy6vgtsxfc7au
|
||||||
'@typescript-eslint/parser': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
|
'@typescript-eslint/parser': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
|
||||||
|
autoprefixer: 10.4.13_postcss@8.4.19
|
||||||
eslint: 8.28.0
|
eslint: 8.28.0
|
||||||
eslint-config-prettier: 8.5.0_eslint@8.28.0
|
eslint-config-prettier: 8.5.0_eslint@8.28.0
|
||||||
eslint-plugin-svelte3: 4.0.0_xgu65rlhscpnxffotiaicv6m5i
|
eslint-plugin-svelte3: 4.0.0_xgu65rlhscpnxffotiaicv6m5i
|
||||||
just-debounce-it: 3.1.1
|
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: 2.8.0
|
||||||
prettier-plugin-svelte: 2.8.1_3ndnxlh52lolrqe4kgjgbxb3xa
|
prettier-plugin-svelte: 2.8.1_3ndnxlh52lolrqe4kgjgbxb3xa
|
||||||
sass: 1.56.1
|
sass: 1.56.1
|
||||||
svelte: 3.53.1
|
svelte: 3.53.1
|
||||||
svelte-check: 2.10.0_sass@1.56.1+svelte@3.53.1
|
svelte-check: 2.10.0_lae5lhfxexyizvi5yxbuu4veoq
|
||||||
svelte-preprocess: 4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm
|
svelte-preprocess: 4.10.7_lucnjuyigjdgzzplgxx36nk3ki
|
||||||
tslib: 2.4.1
|
tslib: 2.4.1
|
||||||
typescript: 4.9.3
|
typescript: 4.9.3
|
||||||
vite: 3.2.4_clvymlzunojxjbv3h6i2warera
|
vite: 3.2.4_clvymlzunojxjbv3h6i2warera
|
||||||
|
|
||||||
packages:
|
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:
|
/@esbuild/android-arm/0.15.16:
|
||||||
resolution: {integrity: sha512-nyB6CH++2mSgx3GbnrJsZSxzne5K0HMyNIWafDHqYy7IwxFc4fd/CgHVZXr8Eh+Q3KbIAcAe3vGyqIPhGblvMQ==}
|
resolution: {integrity: sha512-nyB6CH++2mSgx3GbnrJsZSxzne5K0HMyNIWafDHqYy7IwxFc4fd/CgHVZXr8Eh+Q3KbIAcAe3vGyqIPhGblvMQ==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
|
@ -225,8 +268,8 @@ packages:
|
||||||
import-meta-resolve: 2.2.0
|
import-meta-resolve: 2.2.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@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:
|
||||||
resolution: {integrity: sha512-7CUoYidoWlKdTGxL/5RsPPkgGTb36TwFBnhSZmspHFeiIST5qQEXyzqicFk8+4M5qQhxvOZ0NuP8uy7Pc+xf/Q==}
|
resolution: {integrity: sha512-J+J0UXBiAh569l4ZxKm6eIZJS4lbcP8MgF9fU+DbVplCJ8nqo9wUmirUHZkJoBoB0FUlZSgA0R7N471MnUNNBw==}
|
||||||
engines: {node: '>=16.14'}
|
engines: {node: '>=16.14'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
requiresBuild: true
|
requiresBuild: true
|
||||||
|
|
@ -487,6 +530,22 @@ packages:
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
dev: true
|
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:
|
/balanced-match/1.0.2:
|
||||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -510,6 +569,17 @@ packages:
|
||||||
fill-range: 7.0.1
|
fill-range: 7.0.1
|
||||||
dev: true
|
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:
|
/buffer-crc32/0.2.13:
|
||||||
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
|
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -526,6 +596,10 @@ packages:
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/caniuse-lite/1.0.30001435:
|
||||||
|
resolution: {integrity: sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/chalk/4.1.2:
|
/chalk/4.1.2:
|
||||||
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
@ -586,6 +660,12 @@ packages:
|
||||||
which: 2.0.2
|
which: 2.0.2
|
||||||
dev: true
|
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:
|
/debug/4.3.4:
|
||||||
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
|
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
|
|
@ -630,6 +710,10 @@ packages:
|
||||||
esutils: 2.0.3
|
esutils: 2.0.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/electron-to-chromium/1.4.284:
|
||||||
|
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/es6-promise/3.3.1:
|
/es6-promise/3.3.1:
|
||||||
resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
|
resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -844,6 +928,11 @@ packages:
|
||||||
esbuild-windows-arm64: 0.15.16
|
esbuild-windows-arm64: 0.15.16
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/escalade/3.1.1:
|
||||||
|
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/escape-string-regexp/4.0.0:
|
/escape-string-regexp/4.0.0:
|
||||||
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
|
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
@ -1060,6 +1149,10 @@ packages:
|
||||||
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/fraction.js/4.2.0:
|
||||||
|
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/fs.realpath/1.0.0:
|
/fs.realpath/1.0.0:
|
||||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -1260,6 +1353,11 @@ packages:
|
||||||
type-check: 0.4.0
|
type-check: 0.4.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/lilconfig/2.0.6:
|
||||||
|
resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/locate-path/6.0.0:
|
/locate-path/6.0.0:
|
||||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
@ -1364,11 +1462,20 @@ packages:
|
||||||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/node-releases/2.0.6:
|
||||||
|
resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/normalize-path/3.0.0:
|
/normalize-path/3.0.0:
|
||||||
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
dev: true
|
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:
|
/once/1.4.0:
|
||||||
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
|
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
@ -1441,12 +1548,109 @@ packages:
|
||||||
engines: {node: '>=8.6'}
|
engines: {node: '>=8.6'}
|
||||||
dev: true
|
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:
|
/playwright-core/1.28.1:
|
||||||
resolution: {integrity: sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==}
|
resolution: {integrity: sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dev: 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:
|
/postcss/8.4.19:
|
||||||
resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
|
resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
|
||||||
engines: {node: ^10 || ^12 || >=14}
|
engines: {node: ^10 || ^12 || >=14}
|
||||||
|
|
@ -1486,6 +1690,12 @@ packages:
|
||||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||||
dev: true
|
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:
|
/readdirp/3.6.0:
|
||||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||||
engines: {node: '>=8.10.0'}
|
engines: {node: '>=8.10.0'}
|
||||||
|
|
@ -1626,6 +1836,7 @@ packages:
|
||||||
|
|
||||||
/sourcemap-codec/1.4.8:
|
/sourcemap-codec/1.4.8:
|
||||||
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
|
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
|
||||||
|
deprecated: Please use @jridgewell/sourcemap-codec instead
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/streamsearch/1.1.0:
|
/streamsearch/1.1.0:
|
||||||
|
|
@ -1664,7 +1875,7 @@ packages:
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
dev: true
|
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==}
|
resolution: {integrity: sha512-5iLCoja/WsithyRkNtIeDQ0euJlgWj3Zzo2IA6iuHMuuX9D9OrRYZj2WlA5ACnAFQnN5L9mxWcwUW9VxDNEoGg==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
|
@ -1677,7 +1888,7 @@ packages:
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
sade: 1.8.1
|
sade: 1.8.1
|
||||||
svelte: 3.53.1
|
svelte: 3.53.1
|
||||||
svelte-preprocess: 4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm
|
svelte-preprocess: 4.10.7_lucnjuyigjdgzzplgxx36nk3ki
|
||||||
typescript: 4.9.3
|
typescript: 4.9.3
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- '@babel/core'
|
- '@babel/core'
|
||||||
|
|
@ -1705,7 +1916,7 @@ packages:
|
||||||
resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
|
resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/svelte-preprocess/4.10.7_xysbxxmdqcznjs3sfrwdyjxdzm:
|
/svelte-preprocess/4.10.7_lucnjuyigjdgzzplgxx36nk3ki:
|
||||||
resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
|
resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
|
||||||
engines: {node: '>= 9.11.2'}
|
engines: {node: '>= 9.11.2'}
|
||||||
requiresBuild: true
|
requiresBuild: true
|
||||||
|
|
@ -1750,6 +1961,8 @@ packages:
|
||||||
'@types/sass': 1.43.1
|
'@types/sass': 1.43.1
|
||||||
detect-indent: 6.1.0
|
detect-indent: 6.1.0
|
||||||
magic-string: 0.25.9
|
magic-string: 0.25.9
|
||||||
|
postcss: 8.4.19
|
||||||
|
postcss-load-config: 4.0.1_postcss@8.4.19
|
||||||
sass: 1.56.1
|
sass: 1.56.1
|
||||||
sorcery: 0.10.0
|
sorcery: 0.10.0
|
||||||
strip-indent: 3.0.0
|
strip-indent: 3.0.0
|
||||||
|
|
@ -1828,12 +2041,27 @@ packages:
|
||||||
busboy: 1.6.0
|
busboy: 1.6.0
|
||||||
dev: true
|
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:
|
/uri-js/4.4.1:
|
||||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
punycode: 2.1.1
|
punycode: 2.1.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/util-deprecate/1.0.2:
|
||||||
|
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/vite/3.2.4_clvymlzunojxjbv3h6i2warera:
|
/vite/3.2.4_clvymlzunojxjbv3h6i2warera:
|
||||||
resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
|
resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
|
@ -1901,6 +2129,11 @@ packages:
|
||||||
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/yaml/2.1.3:
|
||||||
|
resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
|
||||||
|
engines: {node: '>= 14'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/yocto-queue/0.1.0:
|
/yocto-queue/0.1.0:
|
||||||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||||
engines: {node: '>=10'}
|
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">
|
<script lang="ts">
|
||||||
import { fade } from 'svelte/transition';
|
import { browser } from '$app/environment';
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogDescription,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogTitle
|
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
|
||||||
import { boredState } from '$root/lib/stores/boredState';
|
import { boredState } from '$root/lib/stores/boredState';
|
||||||
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
||||||
import { browser } from '$app/environment';
|
import DefaultDialog from './DefaultDialog.svelte';
|
||||||
|
|
||||||
function clearWishlist() {
|
function clearWishlist() {
|
||||||
if (browser) {
|
if (browser) {
|
||||||
|
|
@ -18,35 +12,23 @@
|
||||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||||
}
|
}
|
||||||
|
|
||||||
$: isOpen = $boredState?.dialog?.isOpen;
|
function stopLoading() {
|
||||||
|
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dialog
|
<DefaultDialog
|
||||||
open={isOpen}
|
title="Clear wishlist"
|
||||||
on:close={() => {
|
description="Are you sure you want to clear your wishlist?"
|
||||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
danger
|
||||||
}}
|
primaryButtonText="Clear"
|
||||||
static
|
secondaryButtonText="Cancel"
|
||||||
>
|
on:click:primary={clearWishlist}
|
||||||
<div transition:fade>
|
on:click:secondary={stopLoading}
|
||||||
<DialogOverlay class="dialog-overlay" />
|
on:close={stopLoading}
|
||||||
<div class="dialog">
|
/>
|
||||||
<DialogTitle>Clear wishlist</DialogTitle>
|
|
||||||
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
|
|
||||||
|
|
||||||
<div class="dialog-footer">
|
<style lang="postcss">
|
||||||
<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">
|
|
||||||
.dialog {
|
.dialog {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { type SvelteComponent, createEventDispatcher } from 'svelte';
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
|
|
@ -8,23 +9,67 @@
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
} from '@rgossiaux/svelte-headlessui';
|
||||||
import { boredState } from '$root/lib/stores/boredState';
|
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;
|
$: isOpen = $boredState?.dialog?.isOpen;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dialog
|
<Dialog
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
on:close={() => {
|
on:close={() => {
|
||||||
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
|
dispatch('close');
|
||||||
}}
|
}}
|
||||||
static
|
static
|
||||||
>
|
>
|
||||||
<div transition:fade>
|
<div transition:fade>
|
||||||
<DialogOverlay class="dialog-overlay" />
|
<DialogOverlay class="dialog-overlay" />
|
||||||
<div class="dialog">
|
<div class="dialog">
|
||||||
<DialogTitle>Default Dialog</DialogTitle>
|
<DialogTitle>{title}</DialogTitle>
|
||||||
<DialogDescription>Dialog Description</DialogDescription>
|
{#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>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
@ -34,7 +79,7 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 35%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
|
@ -62,6 +107,14 @@
|
||||||
background-color: var(--color-btn-primary-active-hover);
|
background-color: var(--color-btn-primary-active-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
background-color: var(--warning);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--warning-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
export let pageSize: number; // Reactive, bind
|
export let pageSize: number; // Reactive, bind
|
||||||
export let page: number = 1; // Reactive, bind
|
export let page: number = 1; // Reactive, bind
|
||||||
export let totalItems: number;
|
export let totalItems: number;
|
||||||
|
export let showItemsLeft = false;
|
||||||
export let pageSizeInputDisabled: boolean = false;
|
export let pageSizeInputDisabled: boolean = false;
|
||||||
export let pageSizes: ReadonlyArray<Number> = [10];
|
export let pageSizes: ReadonlyArray<Number> = [10];
|
||||||
export let forwardText: string;
|
export let forwardText: string;
|
||||||
|
|
@ -74,9 +75,11 @@
|
||||||
<p>
|
<p>
|
||||||
Page {page || 1} of {totalPages || 1}
|
Page {page || 1} of {totalPages || 1}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
{#if showItemsLeft}
|
||||||
{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
|
<p>
|
||||||
</p>
|
{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
<div style="display: flex; gap: 2rem;">
|
<div style="display: flex; gap: 2rem;">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -107,17 +110,13 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
flex: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin: 3rem 0;
|
margin: 3rem 0;
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
grid-template-rows: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
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 {
|
button {
|
||||||
/* min-width: 50px; */
|
|
||||||
&[aria-current],
|
&[aria-current],
|
||||||
&.current {
|
&.current {
|
||||||
color: black; // TODO: Fix these colors
|
color: black; // TODO: Fix these colors
|
||||||
|
|
|
||||||
|
|
@ -3,20 +3,29 @@
|
||||||
import { boredState } from '$lib/stores/boredState';
|
import { boredState } from '$lib/stores/boredState';
|
||||||
|
|
||||||
export let form: ActionData;
|
export let form: ActionData;
|
||||||
|
console.log('form data', form?.data);
|
||||||
|
const errors = form?.errors;
|
||||||
let submitting = $boredState?.loading;
|
let submitting = $boredState?.loading;
|
||||||
let minAge = +form?.minAge || 1;
|
let minAge = +form?.data?.minAge || 1;
|
||||||
let minPlayers = +form?.minPlayers || 1;
|
let minPlayers = +form?.data?.minPlayers || 1;
|
||||||
let maxPlayers = +form?.maxPlayers || 1;
|
let maxPlayers = +form?.data?.maxPlayers || 1;
|
||||||
let exactMinPlayers = form?.exactMinPlayers || false;
|
let exactMinPlayers = Boolean(form?.data?.exactMinPlayers) || false;
|
||||||
let exactMaxPlayers = form?.exactMaxPlayers || false;
|
let exactMaxPlayers = Boolean(form?.data?.exactMaxPlayers) || false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
|
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
|
||||||
<div>
|
<div>
|
||||||
<label for="minAge">
|
<label for="minAge">
|
||||||
Min Age
|
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>
|
</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>
|
||||||
<div>
|
<div>
|
||||||
<label for="minPlayers">
|
<label for="minPlayers">
|
||||||
|
|
@ -26,8 +35,8 @@
|
||||||
name="minPlayers"
|
name="minPlayers"
|
||||||
bind:value={minPlayers}
|
bind:value={minPlayers}
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min={1}
|
||||||
max="50"
|
max={50}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||||
|
|
@ -37,12 +46,13 @@
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="exactMinPlayers"
|
name="exactMinPlayers"
|
||||||
bind:checked={exactMinPlayers}
|
bind:checked={exactMinPlayers}
|
||||||
|
bind:value={exactMinPlayers}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
{#if form?.error?.id === 'minPlayers'}
|
{#if form?.errors?.minPlayers}
|
||||||
<div id="minPlayers-error" class="error">
|
<div id="minPlayers-error" class="error">
|
||||||
<p aria-label={`Error: ${form.error.message}`} class="center">
|
<p aria-label={`Error: ${form?.errors?.minPlayers}`} class="center">
|
||||||
Error: {form.error.message}
|
{form?.errors?.minPlayers}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -55,8 +65,8 @@
|
||||||
name="maxPlayers"
|
name="maxPlayers"
|
||||||
bind:value={maxPlayers}
|
bind:value={maxPlayers}
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min={1}
|
||||||
max="50"
|
max={50}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||||
|
|
@ -66,6 +76,7 @@
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="exactMaxPlayers"
|
name="exactMaxPlayers"
|
||||||
bind:checked={exactMaxPlayers}
|
bind:checked={exactMaxPlayers}
|
||||||
|
bind:value={exactMaxPlayers}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
{#if form?.error?.id === 'maxPlayers'}
|
{#if form?.error?.id === 'maxPlayers'}
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@
|
||||||
gameStore.removeAll();
|
gameStore.removeAll();
|
||||||
boredState.update((n) => ({ ...n, loading: true }));
|
boredState.update((n) => ({ ...n, loading: true }));
|
||||||
return async ({ result }) => {
|
return async ({ result }) => {
|
||||||
|
console.log('result', result);
|
||||||
boredState.update((n) => ({ ...n, loading: false }));
|
boredState.update((n) => ({ ...n, loading: false }));
|
||||||
// `result` is an `ActionResult` object
|
// `result` is an `ActionResult` object
|
||||||
if (result.type === 'success') {
|
if (result.type === 'success') {
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
// console.log('search page data', data);
|
// console.log('search page data', data);
|
||||||
export let form: ActionData;
|
export let form: ActionData;
|
||||||
// console.log('search page form', form);
|
// console.log('search page form', form);
|
||||||
|
const errors = form?.errors;
|
||||||
|
|
||||||
export let showButton: boolean = false;
|
export let showButton: boolean = false;
|
||||||
export let advancedSearch: boolean = false;
|
export let advancedSearch: boolean = false;
|
||||||
|
|
@ -37,10 +38,9 @@
|
||||||
let totalItems = form?.totalCount || data?.totalCount || 0;
|
let totalItems = form?.totalCount || data?.totalCount || 0;
|
||||||
let submitting = $boredState?.loading;
|
let submitting = $boredState?.loading;
|
||||||
let name = form?.name || '';
|
let name = form?.name || '';
|
||||||
let disclosureOpen = false;
|
let disclosureOpen = errors || false;
|
||||||
|
|
||||||
$: skip = (page - 1) * pageSize;
|
$: skip = (page - 1) * pageSize;
|
||||||
$: console.log('submit button', submitButton);
|
|
||||||
$: showPagination = $gameStore?.length > 1;
|
$: showPagination = $gameStore?.length > 1;
|
||||||
|
|
||||||
if ($xl) {
|
if ($xl) {
|
||||||
|
|
@ -229,7 +229,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="postcss">
|
||||||
.search {
|
.search {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
@ -273,15 +273,15 @@
|
||||||
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media screen and (800px < width <= 1200px) {
|
||||||
--listColumns: 3;
|
--listColumns: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media screen and (650px < width <= 800px) {
|
||||||
--listColumns: 2;
|
--listColumns: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media screen and (width <= 650px) {
|
||||||
--listColumns: 1;
|
--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 {
|
export function mapSavedGameToGame(game: SavedGameType): GameType {
|
||||||
const { id, name, thumb_url, players, playtime } = game;
|
const { id, name, thumb_url, players, playtime } = game;
|
||||||
|
console.log({ id, name, thumb_url, players, playtime });
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id,
|
id,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { z } from 'zod';
|
import { z, ZodNumber, ZodOptional } from 'zod';
|
||||||
import zodToJsonSchema from 'zod-to-json-schema';
|
// import zodToJsonSchema from 'zod-to-json-schema';
|
||||||
|
|
||||||
export const BoardGameSearch = z.object({
|
export const BoardGameSearch = z.object({
|
||||||
minAge: z.number(),
|
minAge: z.number(),
|
||||||
|
|
@ -8,7 +8,127 @@ export const BoardGameSearch = z.object({
|
||||||
maxPlayers: z.number()
|
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({
|
export const game_schema = z.object({
|
||||||
id: z.string(),
|
id: z.string(),
|
||||||
|
|
@ -32,8 +152,8 @@ export const game_schema = z.object({
|
||||||
playtime: z.string()
|
playtime: z.string()
|
||||||
});
|
});
|
||||||
|
|
||||||
export const game_raw_schema_json = zodToJsonSchema(game_schema, {
|
// export const game_raw_schema_json = zodToJsonSchema(game_schema, {
|
||||||
$refStrategy: 'none',
|
// $refStrategy: 'none',
|
||||||
});
|
// });
|
||||||
|
|
||||||
export type Game = z.infer<typeof game_schema>;
|
export type Game = z.infer<typeof game_schema>;
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import { navigating } from '$app/stores';
|
import { navigating } from '$app/stores';
|
||||||
import debounce from 'just-debounce-it';
|
import debounce from 'just-debounce-it';
|
||||||
import { Toy } from '@leveluptuts/svelte-toy';
|
import { Toy } from '@leveluptuts/svelte-toy';
|
||||||
|
// import '../app.postcss';
|
||||||
import Analytics from '$lib/components/analytics.svelte';
|
import Analytics from '$lib/components/analytics.svelte';
|
||||||
import Header from '$lib/components/header/Header.svelte';
|
import Header from '$lib/components/header/Header.svelte';
|
||||||
import Loading from '$lib/components/loading.svelte';
|
import Loading from '$lib/components/loading.svelte';
|
||||||
|
|
@ -14,7 +15,7 @@
|
||||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
import { toast } from '$lib/components/toast/toast';
|
import { toast } from '$lib/components/toast/toast';
|
||||||
import Toast from '$lib/components/toast/Toast.svelte';
|
import Toast from '$lib/components/toast/Toast.svelte';
|
||||||
import '$root/styles/styles.scss';
|
import '$root/styles/styles.postcss';
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if ($navigating) {
|
if ($navigating) {
|
||||||
|
|
@ -103,7 +104,7 @@
|
||||||
<Toast />
|
<Toast />
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="postcss">
|
||||||
.loading {
|
.loading {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,9 @@
|
||||||
import Random from '$lib/components/random/index.svelte';
|
import Random from '$lib/components/random/index.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
console.log('data', data);
|
||||||
export let form: ActionData;
|
export let form: ActionData;
|
||||||
|
console.log('form', form);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<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 { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
|
||||||
import type { GameType, SearchQuery } from '$root/lib/types';
|
import type { GameType, SearchQuery } from '$root/lib/types';
|
||||||
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
||||||
|
import { search_schema } from '$root/lib/zodValidation';
|
||||||
|
import { ZodError } from 'zod';
|
||||||
|
|
||||||
export const load: PageServerLoad = () => {
|
export const load: PageServerLoad = () => {
|
||||||
return {
|
return {
|
||||||
|
|
@ -12,15 +14,16 @@ export const load: PageServerLoad = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const actions: Actions = {
|
export const actions: Actions = {
|
||||||
default: async ({ request, locals }: RequestEvent): Promise<any> => {
|
default: async ({ request }: RequestEvent): Promise<any> => {
|
||||||
console.log("In search action specific")
|
console.log("In search action specific")
|
||||||
// Do things in here
|
// Do things in here
|
||||||
const form = await request.formData();
|
const formData = Object.fromEntries(await request.formData());
|
||||||
console.log('passed in limit:', form.get('limit'))
|
console.log('formData', formData);
|
||||||
console.log('passed in skip:', form.get('skip'))
|
console.log('passed in limit:', formData?.limit)
|
||||||
const limit = form.get('limit') || 10;
|
console.log('passed in skip:', formData?.skip)
|
||||||
const skip = form.get('skip') || 0;
|
const limit = formData?.limit || 10;
|
||||||
console.log('action form', form);
|
const skip = formData?.skip || 0;
|
||||||
|
|
||||||
const queryParams: SearchQuery = {
|
const queryParams: SearchQuery = {
|
||||||
order_by: 'rank',
|
order_by: 'rank',
|
||||||
ascending: false,
|
ascending: false,
|
||||||
|
|
@ -33,52 +36,58 @@ export const actions: Actions = {
|
||||||
|
|
||||||
// TODO: Check name length and not search if not advanced search
|
// 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) {
|
if (random) {
|
||||||
|
console.log('Random');
|
||||||
queryParams.random = random;
|
queryParams.random = random;
|
||||||
} else {
|
} else {
|
||||||
const minAge = form.get('minAge');
|
try {
|
||||||
const minPlayers = form.get('minPlayers');
|
console.log('Parsed', search_schema.parse(formData))
|
||||||
console.log('minPlayers', minPlayers);
|
const {
|
||||||
const maxPlayers = form.get('maxPlayers');
|
name,
|
||||||
console.log('maxPlayers', maxPlayers);
|
minAge,
|
||||||
const exactMinAge = form.get('exactMinAge') || false;
|
minPlayers,
|
||||||
const exactMinPlayers = form.get('exactMinPlayers') || false;
|
maxPlayers,
|
||||||
const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
exactMinAge,
|
||||||
|
exactMinPlayers,
|
||||||
|
exactMaxPlayers
|
||||||
|
} = search_schema.parse(formData);
|
||||||
|
|
||||||
if (minAge) {
|
|
||||||
if (exactMinAge) {
|
if (minAge) {
|
||||||
queryParams.min_age = +minAge;
|
if (exactMinAge) {
|
||||||
} else {
|
queryParams.min_age = minAge;
|
||||||
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
|
} 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 (exactMaxPlayers) {
|
if (minPlayers) {
|
||||||
queryParams.max_players = +maxPlayers;
|
if (exactMinPlayers) {
|
||||||
} else {
|
queryParams.min_players = minPlayers;
|
||||||
queryParams.lt_max_players = +maxPlayers + 1;
|
} 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();
|
if (name) {
|
||||||
console.log('name', 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'
|
'content-type': 'application/json'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log('board game response', response);
|
// console.log('board game response', response);
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
console.log('Status not 200', response.status);
|
console.log('Status not 200', response.status);
|
||||||
|
|
@ -110,7 +119,7 @@ export const actions: Actions = {
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
const gameResponse = await response.json();
|
const gameResponse = await response.json();
|
||||||
console.log('gameResponse', gameResponse);
|
// console.log('gameResponse', gameResponse);
|
||||||
const gameList = gameResponse?.games;
|
const gameList = gameResponse?.games;
|
||||||
const totalCount = gameResponse?.count;
|
const totalCount = gameResponse?.count;
|
||||||
console.log('totalCount', totalCount);
|
console.log('totalCount', totalCount);
|
||||||
|
|
@ -119,13 +128,13 @@ export const actions: Actions = {
|
||||||
games.push(mapAPIGameToBoredGame(game));
|
games.push(mapAPIGameToBoredGame(game));
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('returning from search', games)
|
// console.log('returning from search', games)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
games,
|
games,
|
||||||
totalCount,
|
totalCount,
|
||||||
limit: +limit,
|
limit: parseInt(limit),
|
||||||
skip: +skip,
|
skip: parseInt(skip),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} 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 = {
|
const config = {
|
||||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: preprocess(),
|
preprocess: [
|
||||||
|
preprocess({
|
||||||
|
postcss: true
|
||||||
|
})
|
||||||
|
],
|
||||||
kit: {
|
kit: {
|
||||||
adapter: adapter(),
|
adapter: adapter(),
|
||||||
alias: {
|
alias: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue