Accords-Library-Archive/accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added tailwindcss prettier

Browse Source
This commit is contained in:
DrMint 2022-05-21 13:18:57 +02:00
parent 435785f31b
commit 88b60077df
47 changed files with 404 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
next.config.js
View File

@ -26,6 +26,11 @@ module.exports = {
destination: "https://discord.com/invite/5mcXcRAczj", destination: "https://discord.com/invite/5mcXcRAczj",
permanent: false, permanent: false,
}, },
{
source: "/gallery",
destination: "https://gallery.accords-library.com/",
permanent: false,
},
]; ];
}, },
}; };

102
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@fontsource/vollkorn": "^4.5.9", "@fontsource/vollkorn": "^4.5.9",
"@fontsource/zen-maru-gothic": "^4.5.11", "@fontsource/zen-maru-gothic": "^4.5.11",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
"autoprefixer": "^10.4.7",
"graphql-request": "^4.2.0", "graphql-request": "^4.2.0",
"markdown-to-jsx": "^7.1.7", "markdown-to-jsx": "^7.1.7",
"next": "^12.1.6", "next": "^12.1.6",
@ -3133,6 +3134,38 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/autoprefixer": {
"version": "10.4.7",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
"integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
}
],
"dependencies": {
"browserslist": "^4.20.3",
"caniuse-lite": "^1.0.30001335",
"fraction.js": "^4.2.0",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/axe-core": { "node_modules/axe-core": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
@ -3279,7 +3312,6 @@
"version": "4.20.3", "version": "4.20.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
"integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==", "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -4324,8 +4356,7 @@
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.137", "version": "1.4.137",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==", "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
"dev": true
}, },
"node_modules/elegant-spinner": { "node_modules/elegant-spinner": {
"version": "1.0.1", "version": "1.0.1",
@ -4427,7 +4458,6 @@
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true,
"engines": { "engines": {
"node": ">=6" "node": ">=6"
} }
@ -5106,6 +5136,18 @@
"node": ">= 12" "node": ">= 12"
} }
}, },
"node_modules/fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://www.patreon.com/infusion"
}
},
"node_modules/fs.realpath": { "node_modules/fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -6845,8 +6887,7 @@
"node_modules/node-releases": { "node_modules/node-releases": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==", "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
"dev": true
}, },
"node_modules/nodemailer": { "node_modules/nodemailer": {
"version": "6.7.5", "version": "6.7.5",
@ -6865,6 +6906,14 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/normalize-url": { "node_modules/normalize-url": {
"version": "4.5.1", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
@ -7341,7 +7390,6 @@
"version": "8.4.12", "version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -7444,8 +7492,7 @@
"node_modules/postcss-value-parser": { "node_modules/postcss-value-parser": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
"dev": true
}, },
"node_modules/prelude-ls": { "node_modules/prelude-ls": {
"version": "1.2.1", "version": "1.2.1",
@ -11254,6 +11301,19 @@
"integrity": "sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==", "integrity": "sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==",
"dev": true "dev": true
}, },
"autoprefixer": {
"version": "10.4.7",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
"integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
"requires": {
"browserslist": "^4.20.3",
"caniuse-lite": "^1.0.30001335",
"fraction.js": "^4.2.0",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
}
},
"axe-core": { "axe-core": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
@ -11374,7 +11434,6 @@
"version": "4.20.3", "version": "4.20.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
"integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==", "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
"dev": true,
"requires": { "requires": {
"caniuse-lite": "^1.0.30001332", "caniuse-lite": "^1.0.30001332",
"electron-to-chromium": "^1.4.118", "electron-to-chromium": "^1.4.118",
@ -12234,8 +12293,7 @@
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.137", "version": "1.4.137",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==", "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
"dev": true
}, },
"elegant-spinner": { "elegant-spinner": {
"version": "1.0.1", "version": "1.0.1",
@ -12321,8 +12379,7 @@
"escalade": { "escalade": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
"dev": true
}, },
"escape-string-regexp": { "escape-string-regexp": {
"version": "4.0.0", "version": "4.0.0",
@ -12862,6 +12919,11 @@
} }
} }
}, },
"fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
},
"fs.realpath": { "fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -14136,8 +14198,7 @@
"node-releases": { "node-releases": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==", "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
"dev": true
}, },
"nodemailer": { "nodemailer": {
"version": "6.7.5", "version": "6.7.5",
@ -14150,6 +14211,11 @@
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true "dev": true
}, },
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
},
"normalize-url": { "normalize-url": {
"version": "4.5.1", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
@ -14495,7 +14561,6 @@
"version": "8.4.12", "version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"requires": { "requires": {
"nanoid": "^3.3.1", "nanoid": "^3.3.1",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
@ -14543,8 +14608,7 @@
"postcss-value-parser": { "postcss-value-parser": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
"dev": true
}, },
"prelude-ls": { "prelude-ls": {
"version": "1.2.1", "version": "1.2.1",

1
package.json
View File

@ -18,6 +18,7 @@
"@fontsource/vollkorn": "^4.5.9", "@fontsource/vollkorn": "^4.5.9",
"@fontsource/zen-maru-gothic": "^4.5.11", "@fontsource/zen-maru-gothic": "^4.5.11",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
"autoprefixer": "^10.4.7",
"graphql-request": "^4.2.0", "graphql-request": "^4.2.0",
"markdown-to-jsx": "^7.1.7", "markdown-to-jsx": "^7.1.7",
"next": "^12.1.6", "next": "^12.1.6",

51
src/components/AppLayout.tsx
View File

@ -164,7 +164,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
> >
<div <div
{...handlers} {...handlers}
className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid className={`fixed inset-0 m-0 grid touch-pan-y bg-light p-0 text-black
[grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr] [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr]
mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`} mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
> >
@ -198,15 +198,15 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Background when navbar is opened */} {/* Background when navbar is opened */}
<div <div
className={`[grid-area:content] mobile:z-10 absolute className={`absolute inset-0 transition-[backdrop-filter]
inset-0 transition-[backdrop-filter] duration-500 ${ duration-500 [grid-area:content] mobile:z-10 ${
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
? "[backdrop-filter:blur(2px)]" ? "[backdrop-filter:blur(2px)]"
: "pointer-events-none touch-none " : "pointer-events-none touch-none "
}`} }`}
> >
<div <div
className={`absolute bg-shade inset-0 transition-opacity duration-500 className={`absolute inset-0 bg-shade transition-opacity duration-500
${turnSubIntoContent ? "" : ""} ${turnSubIntoContent ? "" : ""}
${ ${
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
@ -223,18 +223,18 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Content panel */} {/* Content panel */}
<div <div
id={AnchorIds.CONTENT_PANEL} id={AnchorIds.CONTENT_PANEL}
className={`[grid-area:content] overflow-y-scroll bg-light texture-paper-dots`} className={`texture-paper-dots overflow-y-scroll bg-light [grid-area:content]`}
> >
{contentPanel ? ( {contentPanel ? (
contentPanel contentPanel
) : ( ) : (
<div className="grid place-content-center h-full"> <div className="grid h-full place-content-center">
<div <div
className="text-dark border-dark border-2 border-dotted rounded-2xl className="grid grid-flow-col place-items-center gap-9 rounded-2xl
p-8 grid grid-flow-col place-items-center gap-9 opacity-40" border-2 border-dotted border-dark p-8 text-dark opacity-40"
> >
<p className="text-4xl">❮</p> <p className="text-4xl">❮</p>
<p className="text-2xl w-64">{langui.select_option_sidebar}</p> <p className="w-64 text-2xl">{langui.select_option_sidebar}</p>
</div> </div>
</div> </div>
)} )}
@ -243,13 +243,14 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Sub panel */} {/* Sub panel */}
{subPanel && ( {subPanel && (
<div <div
className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] className={`texture-paper-dots overflow-y-scroll border-r-[1px] border-dotted
mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black bg-light transition-transform duration-300 [grid-area:sub]
border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] webkit-scrollbar:w-0 mobile:z-10 mobile:w-[90%]
[scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots mobile:justify-self-end mobile:border-r-0 mobile:border-l-[1px]
mobile:[grid-area:content]
${ ${
turnSubIntoContent turnSubIntoContent
? "mobile:border-l-0 mobile:w-full" ? "mobile:w-full mobile:border-l-0"
: !appLayout.subPanelOpen && "mobile:translate-x-[100vw]" : !appLayout.subPanelOpen && "mobile:translate-x-[100vw]"
}`} }`}
> >
@ -259,10 +260,10 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Main panel */} {/* Main panel */}
<div <div
className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] className={`texture-paper-dots overflow-y-scroll border-r-[1px] border-dotted
mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll border-black bg-light transition-transform duration-300 [grid-area:main]
webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light [scrollbar-width:none] webkit-scrollbar:w-0 mobile:z-10 mobile:w-[90%]
texture-paper-dots ${ mobile:justify-self-start mobile:[grid-area:content] ${
appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full" appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
}`} }`}
> >
@ -271,8 +272,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Navbar */} {/* Navbar */}
<div <div
className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid className="texture-paper-dots grid grid-cols-[5rem_1fr_5rem] place-items-center
grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots" border-t-[1px] border-dotted border-black bg-light [grid-area:navbar] desktop:hidden"
> >
<span <span
className="material-icons mt-[.1em] cursor-pointer" className="material-icons mt-[.1em] cursor-pointer"
@ -284,10 +285,10 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
{appLayout.mainPanelOpen ? "close" : "menu"} {appLayout.mainPanelOpen ? "close" : "menu"}
</span> </span>
<p <p
className={`font-black font-headers text-center overflow-hidden ${ className={`overflow-hidden text-center font-headers font-black ${
ogTitle && ogTitle.length > 30 ogTitle && ogTitle.length > 30
? "text-xl max-h-14" ? "max-h-14 text-xl"
: "text-2xl max-h-16" : "max-h-16 text-2xl"
}`} }`}
> >
{ogTitle} {ogTitle}
@ -314,7 +315,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
<h2 className="text-2xl">{langui.settings}</h2> <h2 className="text-2xl">{langui.settings}</h2>
<div <div
className="mt-4 grid gap-16 justify-items-center className="mt-4 grid justify-items-center gap-16
text-center desktop:grid-cols-[auto_auto]" text-center desktop:grid-cols-[auto_auto]"
> >
{router.locales && ( {router.locales && (
@ -358,7 +359,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
)} )}
</div> </div>
)} )}
<div className="grid gap-8 place-items-center text-center desktop:grid-cols-2"> <div className="grid place-items-center gap-8 text-center desktop:grid-cols-2">
<div> <div>
<h3 className="text-xl">{langui.theme}</h3> <h3 className="text-xl">{langui.theme}</h3>
<div className="flex flex-row"> <div className="flex flex-row">

4
src/components/Chip.tsx
View File

@ -8,8 +8,8 @@ interface Props {
export function Chip(props: Immutable<Props>): JSX.Element { export function Chip(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`grid place-content-center place-items-center text-xs pb-[0.14rem] className={`grid place-content-center place-items-center whitespace-nowrap rounded-full
whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70 border-[1px] px-1.5 pb-[0.14rem] text-xs opacity-70
transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`} transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
> >
{props.children} {props.children}

2
src/components/HorizontalLine.tsx
View File

@ -7,7 +7,7 @@ interface Props {
export function HorizontalLine(props: Immutable<Props>): JSX.Element { export function HorizontalLine(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`h-0 w-full my-8 border-t-[3px] border-dotted border-black ${props.className}`} className={`my-8 h-0 w-full border-t-[3px] border-dotted border-black ${props.className}`}
></div> ></div>
); );
} }

16
src/components/Inputs/Button.tsx
View File

@ -35,19 +35,19 @@ export function Button(props: Immutable<Props>): JSX.Element {
draggable={draggable} draggable={draggable}
id={id} id={id}
onClick={onClick} onClick={onClick}
className={`grid place-content-center place-items-center border-[1px] className={`--opacityBadge:100 grid select-none place-content-center
border-dark text-dark rounded-full px-4 pt-[0.4rem] pb-[0.5rem] place-items-center rounded-full border-[1px] border-dark px-4 pt-[0.4rem]
transition-all select-none hover:[--opacityBadge:0] --opacityBadge:100 ${className} ${ pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${
active active
? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed" ? "cursor-not-allowed !border-black bg-black text-light drop-shadow-black-lg"
: `cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg : `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg
active:bg-black active:text-light active:drop-shadow-black-lg active:border-black` active:border-black active:bg-black active:text-light active:drop-shadow-black-lg`
}`} }`}
> >
{badgeNumber && ( {badgeNumber && (
<div <div
className="opacity-[var(--opacityBadge)] transition-opacity grid place-items-center className="absolute -top-3 -right-2 grid h-8 w-8 place-items-center rounded-full bg-dark
absolute -top-3 -right-2 bg-dark w-8 h-8 text-light font-bold rounded-full" font-bold text-light opacity-[var(--opacityBadge)] transition-opacity"
> >
{badgeNumber} {badgeNumber}
</div> </div>

11
src/components/Inputs/OrderableList.tsx
View File

@ -56,16 +56,15 @@ export function OrderableList(props: Immutable<Props>): JSX.Element {
); );
updateOrder(sourceIndex, targetIndex); updateOrder(sourceIndex, targetIndex);
}} }}
className="grid grid-cols-[auto_1fr] place-content-center className="grid cursor-grab select-none grid-cols-[auto_1fr] place-content-center gap-2
border-[1px] transition-all hover:text-light hover:bg-dark rounded-full border-[1px] border-dark bg-light px-1 py-2 pr-4 text-dark transition-all
hover:drop-shadow-shade-lg border-dark bg-light text-dark hover:bg-dark hover:text-light hover:drop-shadow-shade-lg"
rounded-full cursor-grab select-none px-1 py-2 pr-4 gap-2"
draggable draggable
> >
<div className="grid grid-rows-[.8em_.8em] place-items-center"> <div className="grid grid-rows-[.8em_.8em] place-items-center">
{index > 0 && ( {index > 0 && (
<span <span
className="material-icons cursor-pointer row-start-1" className="material-icons row-start-1 cursor-pointer"
onClick={() => { onClick={() => {
updateOrder(index, index - 1); updateOrder(index, index - 1);
}} }}
@ -75,7 +74,7 @@ export function OrderableList(props: Immutable<Props>): JSX.Element {
)} )}
{index < items.size - 1 && ( {index < items.size - 1 && (
<span <span
className="material-icons cursor-pointer row-start-2" className="material-icons row-start-2 cursor-pointer"
onClick={() => { onClick={() => {
updateOrder(index, index + 1); updateOrder(index, index + 1);
}} }}

2
src/components/Inputs/PageSelector.tsx
View File

@ -13,7 +13,7 @@ export function PageSelector(props: Immutable<Props>): JSX.Element {
const { page, setPage, maxPage } = props; const { page, setPage, maxPage } = props;
return ( return (
<div className={`flex place-content-center flex-row ${props.className}`}> <div className={`flex flex-row place-content-center ${props.className}`}>
<Button <Button
onClick={() => { onClick={() => {
if (page > 0) setPage(page - 1); if (page > 0) setPage(page - 1);

14
src/components/Inputs/Select.tsx
View File

@ -17,14 +17,14 @@ export function Select(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`relative text-center transition-[filter] ${ className={`relative text-center transition-[filter] ${
opened && "drop-shadow-shade-lg z-10" opened && "z-10 drop-shadow-shade-lg"
} ${className}`} } ${className}`}
> >
<div <div
className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] className={`grid cursor-pointer grid-flow-col grid-cols-[1fr_auto_auto] place-items-center
bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center rounded-[1em] bg-light p-1 outline outline-2 outline-offset-[-2px] outline-mid
cursor-pointer hover:bg-mid transition-all ${ transition-all hover:bg-mid hover:outline-[transparent] ${
opened && "outline-[transparent] rounded-b-none bg-highlight" opened && "rounded-b-none bg-highlight outline-[transparent]"
}`} }`}
> >
<p onClick={() => setOpened(!opened)} className="w-full"> <p onClick={() => setOpened(!opened)} className="w-full">
@ -53,8 +53,8 @@ export function Select(props: Immutable<Props>): JSX.Element {
<div <div
className={` ${ className={` ${
opened ? "bg-highlight" : "bg-light" opened ? "bg-highlight" : "bg-light"
} hover:bg-mid transition-colors } cursor-pointer p-1
cursor-pointer p-1 last-of-type:rounded-b-[1em]`} transition-colors last-of-type:rounded-b-[1em] hover:bg-mid`}
id={option} id={option}
onClick={() => { onClick={() => {
setOpened(false); setOpened(false);

8
src/components/Inputs/Switch.tsx
View File

@ -12,8 +12,8 @@ export function Switch(props: Immutable<Props>): JSX.Element {
const { state, setState, className, disabled } = props; const { state, setState, className, disabled } = props;
return ( return (
<div <div
className={`h-6 w-12 rounded-full border-2 border-mid grid className={`relative grid h-6 w-12 rounded-full border-2
transition-colors relative ${ border-mid transition-colors ${
disabled ? "cursor-not-allowed" : "cursor-pointer" disabled ? "cursor-not-allowed" : "cursor-pointer"
} ${className} ${state ? "bg-mid" : "bg-light"}`} } ${className} ${state ? "bg-mid" : "bg-light"}`}
onClick={() => { onClick={() => {
@ -21,8 +21,8 @@ export function Switch(props: Immutable<Props>): JSX.Element {
}} }}
> >
<div <div
className={`bg-dark aspect-square rounded-full absolute className={`absolute top-0 bottom-0 left-0
top-0 bottom-0 left-0 transition-transform ${ aspect-square rounded-full bg-dark transition-transform ${
state && "translate-x-[115%]" state && "translate-x-[115%]"
}`} }`}
></div> ></div>

2
src/components/InsetBox.tsx
View File

@ -10,7 +10,7 @@ export function InsetBox(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
id={props.id} id={props.id}
className={`w-full shadow-inner-sm shadow-shade bg-mid rounded-xl p-8 ${props.className}`} className={`w-full rounded-xl bg-mid p-8 shadow-inner-sm shadow-shade ${props.className}`}
> >
{props.children} {props.children}
</div> </div>

10
src/components/Library/ContentLine.tsx
View File

@ -26,13 +26,13 @@ export function ContentLine(props: Immutable<Props>): JSX.Element {
if (content.attributes) { if (content.attributes) {
return ( return (
<div <div
className={`grid gap-2 px-4 rounded-lg ${ className={`grid gap-2 rounded-lg px-4 ${
opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2" opened && "my-2 h-auto bg-mid py-3 shadow-inner-sm shadow-shade"
}`} }`}
> >
<div <div
className="grid gap-4 place-items-center className="grid grid-cols-[auto_auto_1fr_auto_12ch] place-items-center
grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]" gap-4 thin:grid-cols-[auto_auto_1fr_auto]"
> >
<a> <a>
<h3 className="cursor-pointer" onClick={() => setOpened(!opened)}> <h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
@ -55,7 +55,7 @@ export function ContentLine(props: Immutable<Props>): JSX.Element {
) )
)} )}
</div> </div>
<p className="border-b-2 h-4 w-full border-black border-dotted opacity-30"></p> <p className="h-4 w-full border-b-2 border-dotted border-black opacity-30"></p>
<p> <p>
{content.attributes.range[0]?.__typename === {content.attributes.range[0]?.__typename ===
"ComponentRangePageRange" "ComponentRangePageRange"

21
src/components/Library/ScanSet.tsx
View File

@ -84,7 +84,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
<div> <div>
<div <div
className="flex flex-row flex-wrap place-items-center className="flex flex-row flex-wrap place-items-center
gap-6 text-base pt-10 first-of-type:pt-0" gap-6 pt-10 text-base first-of-type:pt-0"
> >
<h2 id={slug} className="text-2xl"> <h2 id={slug} className="text-2xl">
{title} {title}
@ -98,7 +98,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
</Chip> </Chip>
</div> </div>
<div className="flex flex-row flex-wrap gap-4 pb-6 place-items-center"> <div className="flex flex-row flex-wrap place-items-center gap-4 pb-6">
{content?.data?.attributes?.slug && ( {content?.data?.attributes?.slug && (
<Button href={`/contents/${content.data.attributes.slug}`}> <Button href={`/contents/${content.data.attributes.slug}`}>
{langui.open_content} {langui.open_content}
@ -107,7 +107,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
<LanguageSwitcher /> <LanguageSwitcher />
<div className="grid place-items-center place-content-center"> <div className="grid place-content-center place-items-center">
<p className="font-headers">{langui.status}:</p> <p className="font-headers">{langui.status}:</p>
<ToolTip <ToolTip
content={getStatusDescription(selectedScan.status, langui)} content={getStatusDescription(selectedScan.status, langui)}
@ -120,7 +120,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && ( {selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Scanners"}:</p> <p className="font-headers">{"Scanners"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.scanners.data.map((scanner) => ( {selectedScan.scanners.data.map((scanner) => (
<Fragment key={scanner.id}> <Fragment key={scanner.id}>
{scanner.attributes && ( {scanner.attributes && (
@ -138,7 +138,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && ( {selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Cleaners"}:</p> <p className="font-headers">{"Cleaners"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.cleaners.data.map((cleaner) => ( {selectedScan.cleaners.data.map((cleaner) => (
<Fragment key={cleaner.id}> <Fragment key={cleaner.id}>
{cleaner.attributes && ( {cleaner.attributes && (
@ -157,7 +157,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
selectedScan.typesetters.data.length > 0 && ( selectedScan.typesetters.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Typesetters"}:</p> <p className="font-headers">{"Typesetters"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.typesetters.data.map((typesetter) => ( {selectedScan.typesetters.data.map((typesetter) => (
<Fragment key={typesetter.id}> <Fragment key={typesetter.id}>
{typesetter.attributes && ( {typesetter.attributes && (
@ -180,15 +180,14 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
</div> </div>
<div <div
className="grid gap-8 items-end mobile:grid-cols-2 className="grid items-end gap-8 border-b-[3px] border-dotted pb-12 last-of-type:border-0
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] mobile:grid-cols-2"
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
> >
{selectedScan.pages?.data.map((page, index) => ( {selectedScan.pages?.data.map((page, index) => (
<div <div
key={page.id} key={page.id}
className="drop-shadow-shade-lg hover:scale-[1.02] className="cursor-pointer transition-transform
cursor-pointer transition-transform" drop-shadow-shade-lg hover:scale-[1.02]"
onClick={() => { onClick={() => {
const images: string[] = []; const images: string[] = [];
selectedScan.pages?.data.map((image) => { selectedScan.pages?.data.map((image) => {

22
src/components/Library/ScanSetCover.tsx
View File

@ -56,7 +56,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
<div> <div>
<div <div
className="flex flex-row flex-wrap place-items-center className="flex flex-row flex-wrap place-items-center
gap-6 text-base pt-10 first-of-type:pt-0" gap-6 pt-10 text-base first-of-type:pt-0"
> >
<h2 id="cover" className="text-2xl"> <h2 id="cover" className="text-2xl">
{"Cover"} {"Cover"}
@ -70,10 +70,10 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
</Chip> </Chip>
</div> </div>
<div className="flex flex-row flex-wrap gap-4 pb-6 place-items-center"> <div className="flex flex-row flex-wrap place-items-center gap-4 pb-6">
<LanguageSwitcher /> <LanguageSwitcher />
<div className="grid place-items-center place-content-center"> <div className="grid place-content-center place-items-center">
<p className="font-headers">{langui.status}:</p> <p className="font-headers">{langui.status}:</p>
<ToolTip <ToolTip
content={getStatusDescription(selectedScan.status, langui)} content={getStatusDescription(selectedScan.status, langui)}
@ -86,7 +86,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && ( {selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Scanners"}:</p> <p className="font-headers">{"Scanners"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.scanners.data.map((scanner) => ( {selectedScan.scanners.data.map((scanner) => (
<Fragment key={scanner.id}> <Fragment key={scanner.id}>
{scanner.attributes && ( {scanner.attributes && (
@ -104,7 +104,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && ( {selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Cleaners"}:</p> <p className="font-headers">{"Cleaners"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.cleaners.data.map((cleaner) => ( {selectedScan.cleaners.data.map((cleaner) => (
<Fragment key={cleaner.id}> <Fragment key={cleaner.id}>
{cleaner.attributes && ( {cleaner.attributes && (
@ -123,7 +123,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
selectedScan.typesetters.data.length > 0 && ( selectedScan.typesetters.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Typesetters"}:</p> <p className="font-headers">{"Typesetters"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedScan.typesetters.data.map((typesetter) => ( {selectedScan.typesetters.data.map((typesetter) => (
<Fragment key={typesetter.id}> <Fragment key={typesetter.id}>
{typesetter.attributes && ( {typesetter.attributes && (
@ -140,15 +140,15 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
</div> </div>
<div <div
className="grid gap-8 items-end mobile:grid-cols-2 className="grid items-end gap-8 border-b-[3px] border-dotted pb-12
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] last-of-type:border-0 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0" mobile:grid-cols-2"
> >
{coverImages.map((image, index) => ( {coverImages.map((image, index) => (
<div <div
key={image.url} key={image.url}
className="drop-shadow-shade-lg hover:scale-[1.02] className="cursor-pointer transition-transform
cursor-pointer transition-transform" drop-shadow-shade-lg hover:scale-[1.02]"
onClick={() => { onClick={() => {
const imgs: string[] = []; const imgs: string[] = [];
coverImages.map((img) => { coverImages.map((img) => {

7
src/components/LightBox.tsx
View File

@ -57,10 +57,9 @@ export function LightBox(props: Immutable<Props>): JSX.Element {
<Popup setState={setState} state={state} padding={false} fillViewport> <Popup setState={setState} state={state} padding={false} fillViewport>
<div <div
{...handlers} {...handlers}
className={`grid grid-cols-[4em,1fr,4em] mobile:grid-cols-2 className={`grid h-full w-full grid-cols-[4em,1fr,4em] place-items-center
[grid-template-areas:"left_image_right"] overflow-hidden [grid-template-areas:"left_image_right"] first-letter:gap-4
mobile:[grid-template-areas:"image_image""left_right"] mobile:grid-cols-2 mobile:[grid-template-areas:"image_image""left_right"]`}
place-items-center first-letter:gap-4 w-full h-full overflow-hidden`}
> >
<div className="[grid-area:left]"> <div className="[grid-area:left]">
{index > 0 && ( {index > 0 && (

8
src/components/Markdown/Markdawn.tsx
View File

@ -132,7 +132,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
component: (compProps: { id: string }) => ( component: (compProps: { id: string }) => (
<div <div
id={compProps.id} id={compProps.id}
className={"h-0 text-center text-3xl text-dark mt-16 mb-20"} className={"mt-16 mb-20 h-0 text-center text-3xl text-dark"}
> >
* * * * * *
</div> </div>
@ -169,7 +169,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
}, },
Transcript: { Transcript: {
component: (compProps) => ( component: (compProps) => (
<div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2"> <div className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 mobile:grid-cols-1">
{compProps.children} {compProps.children}
</div> </div>
), ),
@ -245,7 +245,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
name?: string; name?: string;
}) => ( }) => (
<div <div
className="my-8 cursor-pointer place-content-center grid" className="my-8 grid cursor-pointer place-content-center"
onClick={() => { onClick={() => {
openLightBox([ openLightBox([
compProps.src.startsWith("/uploads/") compProps.src.startsWith("/uploads/")
@ -285,7 +285,7 @@ function HeaderToolTip(props: { id: string }) {
> >
<ToolTip content={"Copied! 👍"} trigger="click" className="text-sm"> <ToolTip content={"Copied! 👍"} trigger="click" className="text-sm">
<span <span
className="material-icons transition-color hover:text-dark cursor-pointer" className="material-icons transition-color cursor-pointer hover:text-dark"
onClick={() => { onClick={() => {
navigator.clipboard.writeText( navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname}#${ `${process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname}#${

6
src/components/Markdown/TOC.tsx
View File

@ -17,8 +17,8 @@ export function TOC(props: Immutable<Props>): JSX.Element {
return ( return (
<> <>
<h3 className="text-xl">Table of content</h3> <h3 className="text-xl">Table of content</h3>
<div className="text-left max-w-[14.5rem]"> <div className="max-w-[14.5rem] text-left">
<p className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap text-left"> <p className="relative my-2 overflow-x-hidden text-ellipsis whitespace-nowrap text-left">
<a className="" onClick={async () => router.replace(`#${toc.slug}`)}> <a className="" onClick={async () => router.replace(`#${toc.slug}`)}>
{<abbr title={toc.title}>{toc.title}</abbr>} {<abbr title={toc.title}>{toc.title}</abbr>}
</a> </a>
@ -41,7 +41,7 @@ function TOCLevel(props: LevelProps): JSX.Element {
<ol className="pl-4 text-left"> <ol className="pl-4 text-left">
{tocchildren.map((child, childIndex) => ( {tocchildren.map((child, childIndex) => (
<Fragment key={child.slug}> <Fragment key={child.slug}>
<li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap"> <li className="my-2 w-full overflow-x-hidden text-ellipsis whitespace-nowrap">
<span className="text-dark">{`${parentNumbering}${ <span className="text-dark">{`${parentNumbering}${
childIndex + 1 childIndex + 1
}.`}</span>{" "} }.`}</span>{" "}

2
src/components/PanelComponents/NavOption.tsx
View File

@ -50,7 +50,7 @@ export function NavOption(props: Immutable<Props>): JSX.Element {
} }
} }
}} }}
className={`relative grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${ className={`relative grid auto-cols-fr grid-flow-col grid-cols-[auto] justify-center ${
props.icon ? "text-left" : "text-center" props.icon ? "text-left" : "text-center"
} ${divCommon}`} } ${divCommon}`}
> >

4
src/components/PanelComponents/PanelHeader.tsx
View File

@ -10,9 +10,9 @@ interface Props {
export function PanelHeader(props: Immutable<Props>): JSX.Element { export function PanelHeader(props: Immutable<Props>): JSX.Element {
return ( return (
<> <>
<div className="w-full grid place-items-center"> <div className="grid w-full place-items-center">
{props.icon && ( {props.icon && (
<span className="material-icons !text-4xl mb-3">{props.icon}</span> <span className="material-icons mb-3 !text-4xl">{props.icon}</span>
)} )}
<h2 className="text-2xl">{props.title}</h2> <h2 className="text-2xl">{props.title}</h2>
{props.description ? <p>{props.description}</p> : ""} {props.description ? <p>{props.description}</p> : ""}

2
src/components/Panels/ContentPanel.tsx
View File

@ -17,7 +17,7 @@ export function ContentPanel(props: Immutable<Props>): JSX.Element {
width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full"; width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";
return ( return (
<div className={`grid pt-10 pb-20 px-4 desktop:py-20 desktop:px-10`}> <div className={`grid px-4 pt-10 pb-20 desktop:py-20 desktop:px-10`}>
<main <main
className={`${ className={`${
props.autoformat && "formatted" props.autoformat && "formatted"

42
src/components/Panels/MainPanel.tsx
View File

@ -20,14 +20,14 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`flex flex-col justify-center content-start className={`flex flex-col content-start justify-center
gap-y-2 justify-items-center text-center p-8 ${ justify-items-center gap-y-2 p-8 text-center ${
appLayout.mainPanelReduced && isDesktop && "px-4" appLayout.mainPanelReduced && isDesktop && "px-4"
}`} }`}
> >
{/* Reduce/expand main menu */} {/* Reduce/expand main menu */}
<div <div
className={`mobile:hidden top-1/2 fixed ${ className={`fixed top-1/2 mobile:hidden ${
appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]" appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
}`} }`}
onClick={() => onClick={() =>
@ -45,9 +45,9 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
<div <div
className={`${ className={`${
appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2" appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')] } mb-4 aspect-square cursor-pointer bg-black
![mask-size:contain] ![mask-repeat:no-repeat] transition-colors [mask:url('/icons/accords.svg')]
![mask-position:center] bg-black hover:bg-dark mb-4`} ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark`}
></div> ></div>
</Link> </Link>
@ -166,7 +166,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
*/} */}
<NavOption <NavOption
url="/gallery" url="https://gallery.accords-library.com/"
icon="collections" icon="collections"
title={langui.gallery} title={langui.gallery}
reduced={appLayout.mainPanelReduced && isDesktop} reduced={appLayout.mainPanelReduced && isDesktop}
@ -200,7 +200,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
</p> </p>
<a <a
aria-label="Read more about the license we use for this website" aria-label="Read more about the license we use for this website"
className="transition-[filter] colorize-black hover:colorize-dark" className="colorize-black hover:colorize-dark transition-[filter]"
href="https://creativecommons.org/licenses/by-sa/4.0/" href="https://creativecommons.org/licenses/by-sa/4.0/"
> >
<div <div
@ -208,16 +208,18 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
hover:[--theme-color-black:var(--theme-color-dark)]" hover:[--theme-color-black:var(--theme-color-dark)]"
> >
<div <div
className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')] className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]"
/> />
<div <div
className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')] className="aspect-square w-6 bg-black
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" [mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center]"
/> />
<div <div
className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')] className="aspect-square w-6 bg-black
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center]"
/> />
</div> </div>
</a> </a>
@ -229,18 +231,18 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8"> <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
<a <a
aria-label="Browse our GitHub repository, which include this website source code" aria-label="Browse our GitHub repository, which include this website source code"
className="transition-colors [mask:url('/icons/github-brands.svg')] className="aspect-square w-10
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black transition-colors [mask:url('/icons/github-brands.svg')]
w-10 aspect-square bg-black hover:bg-dark" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
href="https://github.com/Accords-Library" href="https://github.com/Accords-Library"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
></a> ></a>
<a <a
aria-label="Join our Discord server!" aria-label="Join our Discord server!"
className="transition-colors [mask:url('/icons/discord-brands.svg')] className="aspect-square w-10
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black transition-colors [mask:url('/icons/discord-brands.svg')]
w-10 aspect-square bg-black hover:bg-dark" ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
href="/discord" href="/discord"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

2
src/components/Panels/SubPanel.tsx
View File

@ -6,7 +6,7 @@ interface Props {
export function SubPanel(props: Immutable<Props>): JSX.Element { export function SubPanel(props: Immutable<Props>): JSX.Element {
return ( return (
<div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center"> <div className="grid gap-y-2 px-6 pt-10 pb-20 text-center desktop:py-8 desktop:px-10">
{props.children} {props.children}
</div> </div>
); );

6
src/components/Popup.tsx
View File

@ -46,7 +46,7 @@ export function Popup(props: Immutable<Props>): JSX.Element {
}`} }`}
> >
<div <div
className={`fixed bg-shade inset-0 transition-all duration-500 ${ className={`fixed inset-0 bg-shade transition-all duration-500 ${
state ? "bg-opacity-50" : "bg-opacity-0" state ? "bg-opacity-50" : "bg-opacity-0"
}`} }`}
onClick={() => { onClick={() => {
@ -57,14 +57,14 @@ export function Popup(props: Immutable<Props>): JSX.Element {
<div <div
className={`${ className={`${
padding && "p-10 mobile:p-6" padding && "p-10 mobile:p-6"
} grid gap-4 place-items-center transition-transform ${ } grid place-items-center gap-4 transition-transform ${
state ? "scale-100" : "scale-0" state ? "scale-100" : "scale-0"
} ${ } ${
fillViewport fillViewport
? "absolute inset-10" ? "absolute inset-10"
: "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]" : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]"
} ${ } ${
hideBackground ? "" : "bg-light rounded-lg shadow-2xl shadow-shade" hideBackground ? "" : "rounded-lg bg-light shadow-2xl shadow-shade"
}`} }`}
> >
{children} {children}

6
src/components/PostPage.tsx
View File

@ -78,7 +78,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
{displayCredits && ( {displayCredits && (
<> <>
{selectedTranslation && ( {selectedTranslation && (
<div className="grid grid-flow-col place-items-center place-content-center gap-2"> <div className="grid grid-flow-col place-content-center place-items-center gap-2">
<p className="font-headers">{langui.status}:</p> <p className="font-headers">{langui.status}:</p>
<ToolTip <ToolTip
@ -96,7 +96,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
{post.authors && post.authors.data.length > 0 && ( {post.authors && post.authors.data.length > 0 && (
<div> <div>
<p className="font-headers">{"Authors"}:</p> <p className="font-headers">{"Authors"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{post.authors.data.map((author) => ( {post.authors.data.map((author) => (
<Fragment key={author.id}> <Fragment key={author.id}>
{author.attributes && ( {author.attributes && (
@ -152,7 +152,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
</div> </div>
)} )}
{displayTitle && ( {displayTitle && (
<h1 className="text-center flex gap-3 justify-center text-4xl my-16"> <h1 className="my-16 flex justify-center gap-3 text-center text-4xl">
{title} {title}
</h1> </h1>
)} )}

76
src/components/PreviewCard.tsx
View File

@ -66,18 +66,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
const metadataJSX = const metadataJSX =
metadata && (metadata.release_date || metadata.price) ? ( metadata && (metadata.release_date || metadata.price) ? (
<div className="flex flex-row flex-wrap gap-x-3 w-full"> <div className="flex w-full flex-row flex-wrap gap-x-3">
{metadata.release_date && ( {metadata.release_date && (
<p className="mobile:text-xs text-sm"> <p className="text-sm mobile:text-xs">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
event event
</span> </span>
{prettyDate(metadata.release_date)} {prettyDate(metadata.release_date)}
</p> </p>
)} )}
{metadata.price && metadata.currencies && ( {metadata.price && metadata.currencies && (
<p className="mobile:text-xs text-sm justify-self-end"> <p className="justify-self-end text-sm mobile:text-xs">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
shopping_cart shopping_cart
</span> </span>
{prettyPrice( {prettyPrice(
@ -88,16 +88,16 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</p> </p>
)} )}
{metadata.views && ( {metadata.views && (
<p className="mobile:text-xs text-sm"> <p className="text-sm mobile:text-xs">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
visibility visibility
</span> </span>
{prettyShortenNumber(metadata.views)} {prettyShortenNumber(metadata.views)}
</p> </p>
)} )}
{metadata.author && ( {metadata.author && (
<p className="mobile:text-xs text-sm"> <p className="text-sm mobile:text-xs">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
person person
</span> </span>
{metadata.author} {metadata.author}
@ -111,18 +111,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
return ( return (
<Link href={href} passHref> <Link href={href} passHref>
<div <div
className="drop-shadow-shade-xl cursor-pointer grid items-end className="grid cursor-pointer items-end transition-transform
fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] drop-shadow-shade-xl [--bg-opacity:0] [--play-opacity:0]
[--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0] [--stacked-top:0] hover:scale-[1.02] hover:[--cover-opacity:1]
hover:[--play-opacity:100] transition-transform hover:[--bg-opacity:0.5] hover:[--play-opacity:100]
[--stacked-top:0] hover:[--stacked-top:1]" hover:[--stacked-top:1] fine:[--cover-opacity:0]"
> >
{stackNumber > 0 && ( {stackNumber > 0 && (
<> <>
<div <div
className="bg-light rounded-md overflow-hidden absolute transition-[top_transform] className="absolute inset-0 -top-[var(--stacked-top)*2.1rem]
inset-0 -top-[var(--stacked-top)*2.1rem] brightness-[0.8] sepia-[0.5] scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden rounded-md bg-light
scale-[calc(1-0.15*var(--stacked-top))]" brightness-[0.8] sepia-[0.5] transition-[top_transform]"
> >
{thumbnail && ( {thumbnail && (
<Img <Img
@ -134,9 +134,9 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</div> </div>
<div <div
className="bg-light rounded-md overflow-hidden absolute transition-[top_transform] className="absolute inset-0 -top-[var(--stacked-top)*1rem]
-top-[var(--stacked-top)*1rem] inset-0 brightness-[0.9] sepia-[0.2] scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden rounded-md bg-light
scale-[calc(1-0.06*var(--stacked-top))]" brightness-[0.9] sepia-[0.2] transition-[top_transform]"
> >
{thumbnail && ( {thumbnail && (
<Img <Img
@ -162,8 +162,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
/> />
{stackNumber > 0 && ( {stackNumber > 0 && (
<div <div
className="absolute right-2 top-2 text-light bg-black className="absolute right-2 top-2 rounded-full bg-black
bg-opacity-60 px-2 rounded-full" bg-opacity-60 px-2 text-light"
> >
{stackNumber} {stackNumber}
</div> </div>
@ -171,9 +171,9 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
{hoverlay && hoverlay.__typename === "Video" && ( {hoverlay && hoverlay.__typename === "Video" && (
<> <>
<div <div
className="absolute inset-0 text-light grid className="absolute inset-0 grid place-content-center
place-content-center drop-shadow-shade-lg bg-shade bg-shade bg-opacity-[var(--bg-opacity)] text-light
bg-opacity-[var(--bg-opacity)] transition-colors" transition-colors drop-shadow-shade-lg"
> >
<span <span
className="material-icons text-6xl className="material-icons text-6xl
@ -183,8 +183,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</span> </span>
</div> </div>
<div <div
className="absolute right-2 bottom-2 text-light bg-black className="absolute right-2 bottom-2 rounded-full bg-black
bg-opacity-60 px-2 rounded-full" bg-opacity-60 px-2 text-light"
> >
{prettyDuration(hoverlay.duration)} {prettyDuration(hoverlay.duration)}
</div> </div>
@ -194,7 +194,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
) : ( ) : (
<div <div
style={{ aspectRatio: thumbnailAspectRatio }} style={{ aspectRatio: thumbnailAspectRatio }}
className={`w-full bg-light relative ${ className={`relative w-full bg-light ${
keepInfoVisible keepInfoVisible
? "rounded-t-md" ? "rounded-t-md"
: "rounded-md coarse:rounded-b-none" : "rounded-md coarse:rounded-b-none"
@ -202,8 +202,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
> >
{stackNumber > 0 && ( {stackNumber > 0 && (
<div <div
className="absolute right-2 top-2 text-light bg-black className="absolute right-2 top-2 rounded-full bg-black
bg-opacity-60 px-2 rounded-full" bg-opacity-60 px-2 text-light"
> >
{stackNumber} {stackNumber}
</div> </div>
@ -213,13 +213,13 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
<div <div
className={`linearbg-obi ${ className={`linearbg-obi ${
!keepInfoVisible && !keepInfoVisible &&
`fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md `-inset-x-0.5 bottom-2 opacity-[var(--cover-opacity)]
bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]` coarse:rounded-b-md fine:absolute fine:drop-shadow-shade-lg`
} transition-opacity z-20 grid p-4 gap-2`} } z-20 grid gap-2 p-4 transition-opacity`}
> >
{metadata?.position === "Top" && metadataJSX} {metadata?.position === "Top" && metadataJSX}
{topChips && topChips.length > 0 && ( {topChips && topChips.length > 0 && (
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start"> <div className="grid grid-flow-col place-content-start gap-1 overflow-hidden">
{topChips.map((text, index) => ( {topChips.map((text, index) => (
<Chip key={index}>{text}</Chip> <Chip key={index}>{text}</Chip>
))} ))}
@ -227,18 +227,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
)} )}
<div className="my-1"> <div className="my-1">
{pre_title && ( {pre_title && (
<p className="leading-none mb-1 break-words">{pre_title}</p> <p className="mb-1 break-words leading-none">{pre_title}</p>
)} )}
{title && ( {title && (
<p className="font-headers text-lg leading-none break-words"> <p className="break-words font-headers text-lg leading-none">
{title} {title}
</p> </p>
)} )}
{subtitle && <p className="leading-none break-words">{subtitle}</p>} {subtitle && <p className="break-words leading-none">{subtitle}</p>}
</div> </div>
{description && <p>{description}</p>} {description && <p>{description}</p>}
{bottomChips && bottomChips.length > 0 && ( {bottomChips && bottomChips.length > 0 && (
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start"> <div className="grid grid-flow-col place-content-start gap-1 overflow-hidden">
{bottomChips.map((text, index) => ( {bottomChips.map((text, index) => (
<Chip key={index} className="text-sm"> <Chip key={index} className="text-sm">
{text} {text}

16
src/components/PreviewLine.tsx
View File

@ -31,12 +31,12 @@ export function PreviewLine(props: Immutable<Props>): JSX.Element {
return ( return (
<Link href={href} passHref> <Link href={href} passHref>
<div <div
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer className="flex h-36 w-full cursor-pointer
hover:scale-[1.02] transition-transform flex flex-row gap-4 flex-row place-items-center gap-4 overflow-hidden rounded-md
overflow-hidden place-items-center pr-4 w-full h-36" bg-light pr-4 transition-transform drop-shadow-shade-xl hover:scale-[1.02]"
> >
{thumbnail ? ( {thumbnail ? (
<div className="h-full aspect-[3/2]"> <div className="aspect-[3/2] h-full">
<Img image={thumbnail} quality={ImageQuality.Medium} /> <Img image={thumbnail} quality={ImageQuality.Medium} />
</div> </div>
) : ( ) : (
@ -44,21 +44,21 @@ export function PreviewLine(props: Immutable<Props>): JSX.Element {
)} )}
<div className="grid gap-2"> <div className="grid gap-2">
{topChips && topChips.length > 0 && ( {topChips && topChips.length > 0 && (
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start"> <div className="grid grid-flow-col place-content-start gap-1 overflow-hidden">
{topChips.map((text, index) => ( {topChips.map((text, index) => (
<Chip key={index}>{text}</Chip> <Chip key={index}>{text}</Chip>
))} ))}
</div> </div>
)} )}
<div className="flex flex-col my-1"> <div className="my-1 flex flex-col">
{pre_title && <p className="leading-none mb-1">{pre_title}</p>} {pre_title && <p className="mb-1 leading-none">{pre_title}</p>}
{title && ( {title && (
<p className="font-headers text-lg leading-none">{title}</p> <p className="font-headers text-lg leading-none">{title}</p>
)} )}
{subtitle && <p className="leading-none">{subtitle}</p>} {subtitle && <p className="leading-none">{subtitle}</p>}
</div> </div>
{bottomChips && bottomChips.length > 0 && ( {bottomChips && bottomChips.length > 0 && (
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start"> <div className="grid grid-flow-col place-content-start gap-1 overflow-hidden">
{bottomChips.map((text, index) => ( {bottomChips.map((text, index) => (
<Chip key={index} className="text-sm"> <Chip key={index} className="text-sm">
{text} {text}

4
src/components/RecorderChip.tsx
View File

@ -19,8 +19,8 @@ export function RecorderChip(props: Immutable<Props>): JSX.Element {
return ( return (
<ToolTip <ToolTip
content={ content={
<div className="text-left p-2 py-5 grid gap-8"> <div className="grid gap-8 p-2 py-5 text-left">
<div className="grid grid-flow-col gap-6 place-items-center place-content-start"> <div className="grid grid-flow-col place-content-start place-items-center gap-6">
{recorder.avatar?.data?.attributes && ( {recorder.avatar?.data?.attributes && (
<Img <Img
className="w-20 rounded-full border-4 border-mid" className="w-20 rounded-full border-4 border-mid"

8
src/components/ThumbnailHeader.tsx
View File

@ -43,11 +43,11 @@ export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
return ( return (
<> <>
<LightBox /> <LightBox />
<div className="grid place-items-center gap-12 mb-12"> <div className="mb-12 grid place-items-center gap-12">
<div className="drop-shadow-shade-lg"> <div className="drop-shadow-shade-lg">
{thumbnail ? ( {thumbnail ? (
<Img <Img
className="rounded-xl cursor-pointer" className="cursor-pointer rounded-xl"
image={thumbnail} image={thumbnail}
quality={ImageQuality.Medium} quality={ImageQuality.Medium}
onClick={() => { onClick={() => {
@ -55,7 +55,7 @@ export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
}} }}
/> />
) : ( ) : (
<div className="w-96 aspect-[4/3] bg-light rounded-xl"></div> <div className="aspect-[4/3] w-96 rounded-xl bg-light"></div>
)} )}
</div> </div>
<div <div
@ -70,7 +70,7 @@ export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
</div> </div>
</div> </div>
<div className="flex place-content-center flex-row flew-wrap gap-8"> <div className="flew-wrap flex flex-row place-content-center gap-8">
{type?.data?.attributes && ( {type?.data?.attributes && (
<div className="flex flex-col place-items-center gap-2"> <div className="flex flex-col place-items-center gap-2">
<h3 className="text-xl">{langui.type}</h3> <h3 className="text-xl">{langui.type}</h3>

20
src/components/Wiki/Chronology/ChronologyItemComponent.tsx
View File

@ -70,8 +70,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
if (props.item.attributes) { if (props.item.attributes) {
return ( return (
<div <div
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] className="grid grid-cols-[4em] grid-rows-[auto_1fr] place-content-start
py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4" rounded-2xl py-4 px-8 target:my-4 target:bg-mid target:py-8"
id={generateAnchor( id={generateAnchor(
props.item.attributes.year, props.item.attributes.year,
props.item.attributes.month, props.item.attributes.month,
@ -79,7 +79,7 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
)} )}
> >
{props.displayYear && ( {props.displayYear && (
<p className="text-lg mt-[-.2em] font-bold"> <p className="mt-[-.2em] text-lg font-bold">
{generateYear( {generateYear(
props.item.attributes.displayed_date, props.item.attributes.displayed_date,
props.item.attributes.year props.item.attributes.year
@ -87,11 +87,11 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
</p> </p>
)} )}
<p className="col-start-1 text-dark text-sm"> <p className="col-start-1 text-sm text-dark">
{generateDate(props.item.attributes.month, props.item.attributes.day)} {generateDate(props.item.attributes.month, props.item.attributes.day)}
</p> </p>
<div className="col-start-2 row-start-1 row-span-2 grid gap-4"> <div className="col-start-2 row-span-2 row-start-1 grid gap-4">
{props.item.attributes.events?.map((event) => ( {props.item.attributes.events?.map((event) => (
<Fragment key={event?.id}> <Fragment key={event?.id}>
{event && ( {event && (
@ -101,8 +101,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
{translation && ( {translation && (
<Fragment> <Fragment>
<div <div
className="place-items-start className="grid
place-content-start grid grid-flow-col gap-2" grid-flow-col place-content-start place-items-start gap-2"
> >
{translation.status !== {translation.status !==
Enum_Componenttranslationschronologyitem_Status.Done && ( Enum_Componenttranslationschronologyitem_Status.Done && (
@ -128,8 +128,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
className={ className={
event.translations && event.translations &&
event.translations.length > 1 event.translations.length > 1
? `before:content-['-'] before:text-dark before:inline-block ? `mt-2 whitespace-pre-line before:ml-[-1em] before:inline-block
before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line` before:w-4 before:text-dark before:content-['-']`
: "whitespace-pre-line" : "whitespace-pre-line"
} }
> >
@ -146,7 +146,7 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
</Fragment> </Fragment>
))} ))}
<p className="text-dark text-xs grid place-self-start grid-flow-col gap-1 mt-1"> <p className="mt-1 grid grid-flow-col gap-1 place-self-start text-xs text-dark">
{event.source?.data ? ( {event.source?.data ? (
`(${event.source.data.attributes?.name})` `(${event.source.data.attributes?.name})`
) : ( ) : (

2
src/components/Wiki/Chronology/ChronologyYearComponent.tsx
View File

@ -16,7 +16,7 @@ export function ChronologyYearComponent(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className="target:bg-mid rounded-2xl target:py-4 target:my-4" className="rounded-2xl target:my-4 target:bg-mid target:py-4"
id={props.items.length > 1 ? props.year.toString() : undefined} id={props.items.length > 1 ? props.year.toString() : undefined}
> >
{props.items.map((item, index) => ( {props.items.map((item, index) => (

8
src/pages/about-us/contact.tsx
View File

@ -27,9 +27,9 @@ export default function AboutUs(
const contactForm = ( const contactForm = (
<div className="flex flex-col gap-8 text-center"> <div className="flex flex-col gap-8 text-center">
<form <form
className={`gap-8 grid ${ className={`grid gap-8 ${
formState !== "stale" && formState !== "stale" &&
"opacity-60 cursor-not-allowed touch-none pointer-events-none" "pointer-events-none cursor-not-allowed touch-none opacity-60"
}`} }`}
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
@ -114,12 +114,12 @@ export default function AboutUs(
required required
disabled={formState !== "stale"} disabled={formState !== "stale"}
/> />
<p className="text-sm text-dark italic opacity-70"> <p className="text-sm italic text-dark opacity-70">
{langui.email_gdpr_notice} {langui.email_gdpr_notice}
</p> </p>
</div> </div>
<div className="flex flex-col place-items-center gap-1 w-full"> <div className="flex w-full flex-col place-items-center gap-1">
<label htmlFor="message">{langui.message}:</label> <label htmlFor="message">{langui.message}:</label>
<textarea <textarea
name="message" name="message"

7
src/pages/archives/videos/c/[uid].tsx
View File

@ -48,7 +48,7 @@ export default function Channel(props: Props): JSX.Element {
description={langui.archives_description} description={langui.archives_description}
/> />
<div className="flex flex-row gap-2 place-items-center coarse:hidden"> <div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p> <p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
@ -62,9 +62,8 @@ export default function Channel(props: Props): JSX.Element {
<p>{channel?.subscribers.toLocaleString()} subscribers</p> <p>{channel?.subscribers.toLocaleString()} subscribers</p>
</div> </div>
<div <div
className="grid gap-8 items-start mobile:grid-cols-2 className="grid items-start gap-8 border-b-[3px] border-dotted pb-12 last-of-type:border-0
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] mobile:grid-cols-2"
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
> >
{channel?.videos?.data.map((video) => ( {channel?.videos?.data.map((video) => (
<Fragment key={video.id}> <Fragment key={video.id}>

8
src/pages/archives/videos/index.tsx
View File

@ -66,7 +66,7 @@ export default function Videos(props: Props): JSX.Element {
description={langui.archives_description} description={langui.archives_description}
/> />
<div className="flex flex-row gap-2 place-items-center coarse:hidden"> <div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p> <p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
@ -83,9 +83,9 @@ export default function Videos(props: Props): JSX.Element {
/> />
<div <div
className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2 className="grid items-start gap-8 border-b-[3px] border-dotted pb-12 last-of-type:border-0
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] mobile:grid-cols-2
pb-12 border-b-[3px] border-dotted last-of-type:border-0" thin:grid-cols-1"
> >
{paginatedVideos[page].map((video) => ( {paginatedVideos[page].map((video) => (
<Fragment key={video.id}> <Fragment key={video.id}>

23
src/pages/archives/videos/v/[uid].tsx
View File

@ -80,10 +80,10 @@ export default function Video(props: Props): JSX.Element {
className="mb-10" className="mb-10"
/> />
<div className="grid gap-12 place-items-center"> <div className="grid place-items-center gap-12">
<div <div
id="video" id="video"
className="w-full rounded-xl shadow-shade shadow-lg overflow-hidden" className="w-full overflow-hidden rounded-xl shadow-lg shadow-shade"
> >
{video.gone ? ( {video.gone ? (
<video <video
@ -94,7 +94,7 @@ export default function Video(props: Props): JSX.Element {
) : ( ) : (
<iframe <iframe
src={`https://www.youtube-nocookie.com/embed/${video.uid}`} src={`https://www.youtube-nocookie.com/embed/${video.uid}`}
className="w-full aspect-video" className="aspect-video w-full"
title="YouTube video player" title="YouTube video player"
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; allow="accelerometer; autoplay; clipboard-write;
@ -103,17 +103,17 @@ export default function Video(props: Props): JSX.Element {
></iframe> ></iframe>
)} )}
<div className="p-6 mt-2"> <div className="mt-2 p-6">
<h1 className="text-2xl">{video.title}</h1> <h1 className="text-2xl">{video.title}</h1>
<div className="flex flex-row flex-wrap gap-x-6 w-full"> <div className="flex w-full flex-row flex-wrap gap-x-6">
<p> <p>
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
event event
</span> </span>
{prettyDate(video.published_date)} {prettyDate(video.published_date)}
</p> </p>
<p> <p>
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
visibility visibility
</span> </span>
{isMobile {isMobile
@ -122,7 +122,7 @@ export default function Video(props: Props): JSX.Element {
</p> </p>
{video.channel?.data?.attributes && ( {video.channel?.data?.attributes && (
<p> <p>
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <span className="material-icons mr-1 translate-y-[.15em] !text-base">
thumb_up thumb_up
</span> </span>
{isMobile {isMobile
@ -143,7 +143,7 @@ export default function Video(props: Props): JSX.Element {
{video.channel?.data?.attributes && ( {video.channel?.data?.attributes && (
<InsetBox id="channel" className="grid place-items-center"> <InsetBox id="channel" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-4 text-center"> <div className="grid w-[clamp(0px,100%,42rem)] place-items-center gap-4 text-center">
<h2 className="text-2xl">{langui.channel}</h2> <h2 className="text-2xl">{langui.channel}</h2>
<div> <div>
<Button <Button
@ -153,7 +153,8 @@ export default function Video(props: Props): JSX.Element {
</Button> </Button>
<p> <p>
{`${video.channel.data.attributes.subscribers.toLocaleString()} ${langui.subscribers?.toLowerCase()}`} {`${video.channel.data.attributes.subscribers.toLocaleString()}
${langui.subscribers?.toLowerCase()}`}
</p> </p>
</div> </div>
</div> </div>
@ -161,7 +162,7 @@ export default function Video(props: Props): JSX.Element {
)} )}
<InsetBox id="description" className="grid place-items-center"> <InsetBox id="description" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8"> <div className="grid w-[clamp(0px,100%,42rem)] place-items-center gap-8">
<h2 className="text-2xl">{langui.description}</h2> <h2 className="text-2xl">{langui.description}</h2>
<p className="whitespace-pre-line">{video.description}</p> <p className="whitespace-pre-line">{video.description}</p>
</div> </div>

14
src/pages/contents/[slug]/index.tsx
View File

@ -96,7 +96,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
</div> </div>
)} )}
<div className="grid grid-flow-col place-items-center place-content-center gap-2"> <div className="grid grid-flow-col place-content-center place-items-center gap-2">
<p className="font-headers">{langui.status}:</p> <p className="font-headers">{langui.status}:</p>
<ToolTip <ToolTip
@ -114,7 +114,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
selectedTranslation.text_set.transcribers.data.length > 0 && ( selectedTranslation.text_set.transcribers.data.length > 0 && (
<div> <div>
<p className="font-headers">{langui.transcribers}:</p> <p className="font-headers">{langui.transcribers}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedTranslation.text_set.transcribers.data.map( {selectedTranslation.text_set.transcribers.data.map(
(recorder) => ( (recorder) => (
<Fragment key={recorder.id}> <Fragment key={recorder.id}>
@ -135,7 +135,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
selectedTranslation.text_set.translators.data.length > 0 && ( selectedTranslation.text_set.translators.data.length > 0 && (
<div> <div>
<p className="font-headers">{langui.translators}:</p> <p className="font-headers">{langui.translators}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedTranslation.text_set.translators.data.map( {selectedTranslation.text_set.translators.data.map(
(recorder) => ( (recorder) => (
<Fragment key={recorder.id}> <Fragment key={recorder.id}>
@ -156,7 +156,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
selectedTranslation.text_set.proofreaders.data.length > 0 && ( selectedTranslation.text_set.proofreaders.data.length > 0 && (
<div> <div>
<p className="font-headers">{langui.proofreaders}:</p> <p className="font-headers">{langui.proofreaders}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
{selectedTranslation.text_set.proofreaders.data.map( {selectedTranslation.text_set.proofreaders.data.map(
(recorder) => ( (recorder) => (
<Fragment key={recorder.id}> <Fragment key={recorder.id}>
@ -176,7 +176,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
{selectedTranslation.text_set.notes && ( {selectedTranslation.text_set.notes && (
<div> <div>
<p className="font-headers">{"Notes"}:</p> <p className="font-headers">{"Notes"}:</p>
<div className="grid place-items-center place-content-center gap-2"> <div className="grid place-content-center place-items-center gap-2">
<Markdawn text={selectedTranslation.text_set.notes} /> <Markdawn text={selectedTranslation.text_set.notes} />
</div> </div>
</div> </div>
@ -224,7 +224,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
{previousContent?.attributes && ( {previousContent?.attributes && (
<div className="mt-12 mb-8 w-full"> <div className="mt-12 mb-8 w-full">
<h2 className="text-center text-2xl mb-4"> <h2 className="mb-4 text-center text-2xl">
{langui.previous_content} {langui.previous_content}
</h2> </h2>
<PreviewLine <PreviewLine
@ -272,7 +272,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
{nextContent?.attributes && ( {nextContent?.attributes && (
<> <>
<HorizontalLine /> <HorizontalLine />
<h2 className="text-center text-2xl mb-4"> <h2 className="mb-4 text-center text-2xl">
{langui.followup_content} {langui.followup_content}
</h2> </h2>
<PreviewLine <PreviewLine

18
src/pages/contents/index.tsx
View File

@ -71,7 +71,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
/> />
<input <input
className="w-full mb-6" className="mb-6 w-full"
type="text" type="text"
name="name" name="name"
id="name" id="name"
@ -82,7 +82,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
}} }}
/> />
<div className="flex flex-row gap-2 place-items-center"> <div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.group_by}:</p> <p className="flex-shrink-0">{langui.group_by}:</p>
<Select <Select
className="w-full" className="w-full"
@ -94,9 +94,9 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
</div> </div>
<div <div
className={`flex flex-row gap-2 place-items-center coarse:hidden ${ className={`flex flex-row place-items-center gap-2 coarse:hidden ${
searchName.length > 1 searchName.length > 1
? "text-dark grayscale contrast-75 brightness-150" ? "text-dark brightness-150 contrast-75 grayscale"
: "" : ""
}`} }`}
> >
@ -108,7 +108,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
/> />
</div> </div>
<div className="flex flex-row gap-2 place-items-center coarse:hidden"> <div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p> <p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
@ -123,8 +123,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
{name && ( {name && (
<h2 <h2
key={`h2${name}`} key={`h2${name}`}
className="text-2xl pb-2 pt-10 first-of-type:pt-0 className="flex flex-row place-items-center gap-2
flex flex-row place-items-center gap-2" pb-2 pt-10 text-2xl first-of-type:pt-0"
> >
{name} {name}
<Chip>{`${items.reduce((currentSum, item) => { <Chip>{`${items.reduce((currentSum, item) => {
@ -147,8 +147,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
)} )}
<div <div
key={`items${name}`} key={`items${name}`}
className="grid gap-8 mobile:gap-4 items-end grid-cols-2 className="grid grid-cols-2 items-end gap-8
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]" desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] mobile:gap-4"
> >
{items.map((item) => ( {items.map((item) => (
<Fragment key={item.id}> <Fragment key={item.id}>

14
src/pages/dev/checkup/contents.tsx
View File

@ -24,7 +24,7 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
{<h2 className="text-2xl">{testReport.title}</h2>} {<h2 className="text-2xl">{testReport.title}</h2>}
<div className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center my-4"> <div className="my-4 grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center gap-2">
<p></p> <p></p>
<p></p> <p></p>
<p className="font-headers">Ref</p> <p className="font-headers">Ref</p>
@ -37,20 +37,20 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
{testReport.lines.map((line, index) => ( {testReport.lines.map((line, index) => (
<div <div
key={index} key={index}
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] className="mb-2 grid
gap-2 items-center mb-2 justify-items-start" grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center justify-items-start gap-2"
> >
<Button <Button
href={line.frontendUrl} href={line.frontendUrl}
target="_blank" target="_blank"
className="text-xs w-4" className="w-4 text-xs"
> >
F F
</Button> </Button>
<Button <Button
href={line.backendUrl} href={line.backendUrl}
target="_blank" target="_blank"
className="text-xs w-4" className="w-4 text-xs"
> >
B B
</Button> </Button>
@ -60,9 +60,9 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
<Chip <Chip
className={ className={
line.severity === "Very High" line.severity === "Very High"
? "bg-[#f00] !opacity-100 font-bold" ? "bg-[#f00] font-bold !opacity-100"
: line.severity === "High" : line.severity === "High"
? "bg-[#ff6600] !opacity-100 font-bold" ? "bg-[#ff6600] font-bold !opacity-100"
: line.severity === "Medium" : line.severity === "Medium"
? "bg-[#fff344] !opacity-100" ? "bg-[#fff344] !opacity-100"
: "" : ""

14
src/pages/dev/checkup/libraryitems.tsx
View File

@ -29,7 +29,7 @@ export default function CheckupLibraryItems(
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
{<h2 className="text-2xl">{testReport.title}</h2>} {<h2 className="text-2xl">{testReport.title}</h2>}
<div className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center my-4"> <div className="my-4 grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center gap-2">
<p></p> <p></p>
<p></p> <p></p>
<p className="font-headers">Ref</p> <p className="font-headers">Ref</p>
@ -42,20 +42,20 @@ export default function CheckupLibraryItems(
{testReport.lines.map((line, index) => ( {testReport.lines.map((line, index) => (
<div <div
key={index} key={index}
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] className="mb-2 grid
gap-2 items-center mb-2 justify-items-start" grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center justify-items-start gap-2"
> >
<Button <Button
href={line.frontendUrl} href={line.frontendUrl}
target="_blank" target="_blank"
className="text-xs w-4" className="w-4 text-xs"
> >
F F
</Button> </Button>
<Button <Button
href={line.backendUrl} href={line.backendUrl}
target="_blank" target="_blank"
className="text-xs w-4" className="w-4 text-xs"
> >
B B
</Button> </Button>
@ -65,9 +65,9 @@ export default function CheckupLibraryItems(
<Chip <Chip
className={ className={
line.severity === "Very High" line.severity === "Very High"
? "bg-[#f00] !opacity-100 font-bold" ? "bg-[#f00] font-bold !opacity-100"
: line.severity === "High" : line.severity === "High"
? "bg-[#ff6600] !opacity-100 font-bold" ? "bg-[#ff6600] font-bold !opacity-100"
: line.severity === "Medium" : line.severity === "Medium"
? "bg-[#fff344] !opacity-100" ? "bg-[#fff344] !opacity-100"
: "" : ""

10
src/pages/dev/editor.tsx
View File

@ -75,10 +75,10 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
target.select(); target.select();
event.preventDefault(); event.preventDefault();
}} }}
className="font-monospace w-[50vw] h-[50vh] mobile:w-[75vw]" className="h-[50vh] w-[50vw] font-monospace mobile:w-[75vw]"
/> />
</Popup> </Popup>
<div className="flex flex-row gap-2 mb-4"> <div className="mb-4 flex flex-row gap-2">
<ToolTip <ToolTip
placement="bottom" placement="bottom"
content={ content={
@ -339,15 +339,15 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
const textarea = event.target as HTMLTextAreaElement; const textarea = event.target as HTMLTextAreaElement;
handleInput(textarea.value); handleInput(textarea.value);
}} }}
className="bg-mid !bg-opacity-40 rounded-xl className="h-[70vh] w-full rounded-xl
outline-none p-8 w-full text-black font-monospace h-[70vh]" bg-mid !bg-opacity-40 p-8 font-monospace text-black outline-none"
value={markdown} value={markdown}
title="Input textarea" title="Input textarea"
/> />
</div> </div>
<div> <div>
<h2>Preview</h2> <h2>Preview</h2>
<div className="bg-mid bg-opacity-40 rounded-xl p-8 h-[70vh] overflow-scroll"> <div className="h-[70vh] overflow-scroll rounded-xl bg-mid bg-opacity-40 p-8">
<Markdawn className="w-full" text={markdown} /> <Markdawn className="w-full" text={markdown} />
</div> </div>
</div> </div>

35
src/pages/gallery/index.tsx
View File

@ -1,35 +0,0 @@
import { AppLayout } from "components/AppLayout";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { Immutable } from "helpers/types";
import { GetStaticPropsContext } from "next";
interface Props extends AppStaticProps {}
export default function Gallery(props: Immutable<Props>): JSX.Element {
const { langui } = props;
const contentPanel = (
<iframe
className="w-full h-screen"
src="https://gallery.accords-library.com/posts"
></iframe>
);
return (
<AppLayout
navTitle={langui.gallery}
contentPanel={contentPanel}
{...props}
/>
);
}
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {
props: props,
};
}

12
src/pages/index.tsx
View File

@ -14,14 +14,14 @@ export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
langui={langui} langui={langui}
post={post} post={post}
prependBody={ prependBody={
<div className="grid place-items-center place-content-center w-full gap-5 text-center"> <div className="grid w-full place-content-center place-items-center gap-5 text-center">
<div <div
className="[mask:url('/icons/accords.svg')] [mask-size:contain] className="aspect-square w-32
[mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square bg-black [mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat]
mobile:w-[50vw] bg-black" [mask-position:center] mobile:w-[50vw]"
/> />
<h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1> <h1 className="mb-0 text-5xl">Accord&rsquo;s Library</h1>
<h2 className="text-xl -mt-5"> <h2 className="-mt-5 text-xl">
Discover • Analyze • Translate • Archive Discover • Analyze • Translate • Archive
</h2> </h2>
</div> </div>

54
src/pages/library/[slug]/index.tsx
View File

@ -126,8 +126,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
/> />
<div className="grid place-items-center gap-12"> <div className="grid place-items-center gap-12">
<div <div
className="drop-shadow-shade-xl w-full h-[50vh] className="relative h-[50vh] w-full
mobile:h-[60vh] desktop:mb-16 relative cursor-pointer" cursor-pointer drop-shadow-shade-xl desktop:mb-16 mobile:h-[60vh]"
onClick={() => { onClick={() => {
if (item?.thumbnail?.data?.attributes) { if (item?.thumbnail?.data?.attributes) {
openLightBox([ openLightBox([
@ -143,15 +143,15 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
<Img <Img
image={item.thumbnail.data.attributes} image={item.thumbnail.data.attributes}
quality={ImageQuality.Large} quality={ImageQuality.Large}
className="w-full h-full object-contain" className="h-full w-full object-contain"
/> />
) : ( ) : (
<div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div> <div className="aspect-[21/29.7] w-full rounded-xl bg-light"></div>
)} )}
</div> </div>
<InsetBox id="summary" className="grid place-items-center"> <InsetBox id="summary" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8"> <div className="grid w-[clamp(0px,100%,42rem)] place-items-center gap-8">
{item?.subitem_of?.data[0]?.attributes && ( {item?.subitem_of?.data[0]?.attributes && (
<div className="grid place-items-center"> <div className="grid place-items-center">
<p>{langui.subitem_of}</p> <p>{langui.subitem_of}</p>
@ -204,18 +204,18 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
</InsetBox> </InsetBox>
{item?.gallery && item.gallery.data.length > 0 && ( {item?.gallery && item.gallery.data.length > 0 && (
<div id="gallery" className="grid place-items-center gap-8 w-full"> <div id="gallery" className="grid w-full place-items-center gap-8">
<h2 className="text-2xl">{langui.gallery}</h2> <h2 className="text-2xl">{langui.gallery}</h2>
<div <div
className="grid w-full gap-8 items-end className="grid w-full grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-end
grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]" gap-8"
> >
{item.gallery.data.map((galleryItem, index) => ( {item.gallery.data.map((galleryItem, index) => (
<Fragment key={galleryItem.id}> <Fragment key={galleryItem.id}>
{galleryItem.attributes && ( {galleryItem.attributes && (
<div <div
className="relative aspect-square hover:scale-[1.02] className="relative aspect-square cursor-pointer
transition-transform cursor-pointer" transition-transform hover:scale-[1.02]"
onClick={() => { onClick={() => {
if (item.gallery?.data) { if (item.gallery?.data) {
const images: string[] = []; const images: string[] = [];
@ -233,8 +233,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
}} }}
> >
<Img <Img
className="bg-light rounded-lg drop-shadow-shade-md className="h-full w-full rounded-lg
w-full h-full object-cover" bg-light object-cover drop-shadow-shade-md"
image={galleryItem.attributes} image={galleryItem.attributes}
/> />
</div> </div>
@ -246,11 +246,11 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
)} )}
<InsetBox id="details" className="grid place-items-center"> <InsetBox id="details" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8"> <div className="place-items grid w-[clamp(0px,100%,42rem)] gap-8">
<h2 className="text-2xl text-center">{langui.details}</h2> <h2 className="text-center text-2xl">{langui.details}</h2>
<div className="grid grid-flow-col w-full place-content-between"> <div className="grid w-full grid-flow-col place-content-between">
{item?.metadata?.[0] && ( {item?.metadata?.[0] && (
<div className="grid place-items-center place-content-start"> <div className="grid place-content-start place-items-center">
<h3 className="text-xl">{langui.type}</h3> <h3 className="text-xl">{langui.type}</h3>
<div className="grid grid-flow-col gap-1"> <div className="grid grid-flow-col gap-1">
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip> <Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
@ -261,14 +261,14 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
)} )}
{item?.release_date && ( {item?.release_date && (
<div className="grid place-items-center place-content-start"> <div className="grid place-content-start place-items-center">
<h3 className="text-xl">{langui.release_date}</h3> <h3 className="text-xl">{langui.release_date}</h3>
<p>{prettyDate(item.release_date)}</p> <p>{prettyDate(item.release_date)}</p>
</div> </div>
)} )}
{item?.price && ( {item?.price && (
<div className="grid place-items-center text-center place-content-start"> <div className="grid place-content-start place-items-center text-center">
<h3 className="text-xl">{langui.price}</h3> <h3 className="text-xl">{langui.price}</h3>
<p> <p>
{prettyPrice( {prettyPrice(
@ -302,7 +302,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{item?.size && ( {item?.size && (
<> <>
<h3 className="text-xl">{langui.size}</h3> <h3 className="text-xl">{langui.size}</h3>
<div className="grid grid-flow-col w-full place-content-between"> <div className="grid w-full grid-flow-col place-content-between">
<div className="flex flex-row flex-wrap place-items-start gap-4"> <div className="flex flex-row flex-wrap place-items-start gap-4">
<p className="font-bold">{langui.width}:</p> <p className="font-bold">{langui.width}:</p>
<div> <div>
@ -334,7 +334,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
item?.metadata?.[0]?.__typename !== "ComponentMetadataOther" && ( item?.metadata?.[0]?.__typename !== "ComponentMetadataOther" && (
<> <>
<h3 className="text-xl">{langui.type_information}</h3> <h3 className="text-xl">{langui.type_information}</h3>
<div className="grid grid-cols-2 w-full place-content-between"> <div className="grid w-full grid-cols-2 place-content-between">
{item?.metadata?.[0]?.__typename === {item?.metadata?.[0]?.__typename ===
"ComponentMetadataBooks" && ( "ComponentMetadataBooks" && (
<> <>
@ -385,19 +385,19 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{item?.subitems && item.subitems.data.length > 0 && ( {item?.subitems && item.subitems.data.length > 0 && (
<div <div
id={isVariantSet ? "variants" : "subitems"} id={isVariantSet ? "variants" : "subitems"}
className="grid place-items-center gap-8 w-full" className="grid w-full place-items-center gap-8"
> >
<h2 className="text-2xl"> <h2 className="text-2xl">
{isVariantSet ? langui.variants : langui.subitems} {isVariantSet ? langui.variants : langui.subitems}
</h2> </h2>
<div className="-mt-6 mb-8 flex flex-row gap-2 place-items-center coarse:hidden"> <div className="-mt-6 mb-8 flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p> <p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
<div <div
className="grid gap-8 items-end mobile:grid-cols-2 className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] items-end
grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full" gap-8 mobile:grid-cols-2"
> >
{item.subitems.data.map((subitem) => ( {item.subitems.data.map((subitem) => (
<Fragment key={subitem.id}> <Fragment key={subitem.id}>
@ -434,14 +434,14 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
)} )}
{item?.contents && item.contents.data.length > 0 && ( {item?.contents && item.contents.data.length > 0 && (
<div id="contents" className="w-full grid place-items-center gap-8"> <div id="contents" className="grid w-full place-items-center gap-8">
<h2 className="text-2xl -mb-6">{langui.contents}</h2> <h2 className="-mb-6 text-2xl">{langui.contents}</h2>
{displayOpenScans && ( {displayOpenScans && (
<Button href={`/library/${item.slug}/scans`}> <Button href={`/library/${item.slug}/scans`}>
{langui.view_scans} {langui.view_scans}
</Button> </Button>
)} )}
<div className="grid gap-4 w-full"> <div className="grid w-full gap-4">
{item.contents.data.map((content) => ( {item.contents.data.map((content) => (
<ContentLine <ContentLine
langui={langui} langui={langui}

24
src/pages/library/index.tsx
View File

@ -92,7 +92,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
/> />
<input <input
className="w-full mb-6" className="mb-6 w-full"
type="text" type="text"
name="name" name="name"
id="name" id="name"
@ -103,7 +103,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
}} }}
/> />
<div className="flex flex-row gap-2 place-items-center"> <div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.group_by}:</p> <p className="flex-shrink-0">{langui.group_by}:</p>
<Select <Select
className="w-full" className="w-full"
@ -118,7 +118,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
/> />
</div> </div>
<div className="flex flex-row gap-2 place-items-center"> <div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.order_by}:</p> <p className="flex-shrink-0">{langui.order_by}:</p>
<Select <Select
className="w-full" className="w-full"
@ -132,22 +132,22 @@ export default function Library(props: Immutable<Props>): JSX.Element {
/> />
</div> </div>
<div className="flex flex-row gap-2 place-items-center place-content-between"> <div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_subitems}:</p> <p className="text-left">{langui.show_subitems}:</p>
<Switch state={showSubitems} setState={setShowSubitems} /> <Switch state={showSubitems} setState={setShowSubitems} />
</div> </div>
<div className="flex flex-row gap-2 place-items-center place-content-between"> <div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_primary_items}:</p> <p className="text-left">{langui.show_primary_items}:</p>
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} /> <Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
</div> </div>
<div className="flex flex-row gap-2 place-items-center place-content-between"> <div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_secondary_items}:</p> <p className="text-left">{langui.show_secondary_items}:</p>
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} /> <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
</div> </div>
<div className="flex flex-row gap-2 place-items-center coarse:hidden place-content-between"> <div className="flex flex-row place-content-between place-items-center gap-2 coarse:hidden">
<p className="text-left">{langui.always_show_info}:</p> <p className="text-left">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
@ -161,8 +161,8 @@ export default function Library(props: Immutable<Props>): JSX.Element {
<> <>
{name && ( {name && (
<h2 <h2
className="text-2xl pb-2 pt-10 first-of-type:pt-0 className="flex flex-row place-items-center gap-2
flex flex-row place-items-center gap-2" pb-2 pt-10 text-2xl first-of-type:pt-0"
> >
{name} {name}
<Chip>{`${items.length} ${ <Chip>{`${items.length} ${
@ -173,9 +173,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
</h2> </h2>
)} )}
<div <div
className="grid gap-8 mobile:gap-4 items-end mobile:grid-cols-2 className="grid items-end gap-8 border-b-[3px] border-dotted pb-12
desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] last-of-type:border-0 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0" mobile:grid-cols-2 mobile:gap-4"
> >
{items.map((item) => ( {items.map((item) => (
<Fragment key={item.id}> <Fragment key={item.id}>

4
src/pages/news/index.tsx
View File

@ -33,7 +33,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
description={langui.news_description} description={langui.news_description}
/> />
<div className="flex flex-row gap-2 place-items-center coarse:hidden"> <div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p> <p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
@ -43,7 +43,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
const contentPanel = ( const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div <div
className="grid gap-8 items-end grid-cols-1 className="grid grid-cols-1 items-end gap-8
desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]" desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
> >
{posts.map((post) => ( {posts.map((post) => (

2
src/pages/wiki/chronology.tsx
View File

@ -104,7 +104,7 @@ export default function Chronology(props: Props): JSX.Element {
<Fragment key={eraIndex}> <Fragment key={eraIndex}>
<InsetBox <InsetBox
id={chronologyEras[eraIndex].attributes?.slug} id={chronologyEras[eraIndex].attributes?.slug}
className="grid text-center my-8 gap-4" className="my-8 grid gap-4 text-center"
> >
<h2 className="text-2xl"> <h2 className="text-2xl">
{chronologyEras[eraIndex].attributes?.title?.[0] {chronologyEras[eraIndex].attributes?.title?.[0]

44
src/tailwind.css
View File

@ -3,7 +3,7 @@
@tailwind utilities; @tailwind utilities;
* { * {
@apply box-border font-body font-medium scroll-smooth scroll-m-8; @apply box-border scroll-m-8 scroll-smooth font-body font-medium;
} }
h1, h1,
@ -16,7 +16,7 @@ h6 {
} }
a { a {
@apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark cursor-pointer; @apply cursor-pointer underline decoration-dark decoration-dotted underline-offset-2 transition-colors hover:text-dark;
} }
*::selection { *::selection {
@ -42,7 +42,7 @@ mark {
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
@apply bg-dark rounded-full border-[3px] border-solid border-light; @apply rounded-full border-[3px] border-solid border-light bg-dark;
} }
/* CHANGE FORMATTED DEFAULTS */ /* CHANGE FORMATTED DEFAULTS */
@ -53,11 +53,11 @@ mark {
.formatted h4, .formatted h4,
.formatted h5, .formatted h5,
.formatted h6 { .formatted h6 {
@apply text-center flex gap-3 justify-center; @apply flex justify-center gap-3 text-center;
} }
.formatted h1 { .formatted h1 {
@apply text-4xl my-16; @apply my-16 text-4xl;
} }
.formatted h1 + h2 { .formatted h1 + h2 {
@ -65,7 +65,7 @@ mark {
} }
.formatted h2 { .formatted h2 {
@apply text-3xl my-12; @apply my-12 text-3xl;
} }
.formatted h2 + h3 { .formatted h2 + h3 {
@ -73,7 +73,7 @@ mark {
} }
.formatted h3 { .formatted h3 {
@apply text-2xl my-8; @apply my-8 text-2xl;
} }
.formatted h3 + h4 { .formatted h3 + h4 {
@ -81,11 +81,11 @@ mark {
} }
.formatted h4 { .formatted h4 {
@apply text-xl my-6; @apply my-6 text-xl;
} }
.formatted h5 { .formatted h5 {
@apply text-lg my-4; @apply my-4 text-lg;
} }
.formatted p, .formatted p,
@ -102,7 +102,7 @@ mark {
} }
.formatted footer > div { .formatted footer > div {
@apply my-2 px-6 py-4 rounded-xl; @apply my-2 rounded-xl px-6 py-4;
} }
.formatted footer > div:target { .formatted footer > div:target {
@ -126,18 +126,18 @@ mark {
} }
.formatted blockquote { .formatted blockquote {
@apply border-2 border-mid rounded-lg p-5 text-center my-8; @apply my-8 rounded-lg border-2 border-mid p-5 text-center;
} }
.formatted blockquote cite { .formatted blockquote cite {
@apply text-dark block; @apply block text-dark;
} }
/* INPUT */ /* INPUT */
input, input,
textarea { textarea {
@apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all placeholder:text-dark placeholder:opacity-60; @apply rounded-full bg-light p-2 text-center text-dark outline outline-2 outline-offset-[-2px] outline-mid transition-all placeholder:text-dark placeholder:opacity-60 hover:bg-mid hover:outline-[transparent];
} }
input::placeholder { input::placeholder {
@ -146,19 +146,19 @@ input::placeholder {
input:focus-visible, input:focus-visible,
textarea:focus-within { textarea:focus-within {
@apply outline-none bg-mid shadow-inner-sm shadow-shade; @apply bg-mid shadow-inner-sm shadow-shade outline-none;
} }
textarea { textarea {
@apply rounded-2xl text-left p-6; @apply rounded-2xl p-6 text-left;
} }
input[type="submit"] { input[type="submit"] {
@apply grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full px-4 pt-[0.4rem] pb-[0.5rem] transition-all cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black; @apply grid cursor-pointer place-content-center place-items-center rounded-full border-[1px] border-dark px-4 pt-[0.4rem] pb-[0.5rem] text-dark transition-all hover:bg-dark hover:text-light hover:drop-shadow-shade-lg active:border-black active:bg-black active:text-light active:drop-shadow-black-lg;
} }
.texture-paper-dots { .texture-paper-dots {
@apply [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)] bg-local bg-[length:10cm]; @apply bg-[length:10cm] bg-local [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)];
} }
/* TIPPY */ /* TIPPY */
@ -170,7 +170,7 @@ input[type="submit"] {
max-width: calc(100vw - 10px); max-width: calc(100vw - 10px);
} }
.tippy-box { .tippy-box {
@apply relative bg-light drop-shadow-shade-xl rounded-lg transition-[transform,_visibility,_opacity]; @apply relative rounded-lg bg-light transition-[transform,_visibility,_opacity] drop-shadow-shade-xl;
} }
.tippy-box[data-placement^="top"] > .tippy-arrow { .tippy-box[data-placement^="top"] > .tippy-arrow {
@apply bottom-0; @apply bottom-0;
@ -223,7 +223,7 @@ input[type="submit"] {
border-style: solid; border-style: solid;
} }
.tippy-content { .tippy-content {
@apply relative px-6 py-4 z-10; @apply relative z-10 px-6 py-4;
} }
/* LIGHTBOX */ /* LIGHTBOX */
@ -238,7 +238,7 @@ input[type="submit"] {
} }
.ril__outer { .ril__outer {
@apply h-full w-full touch-none outline-none bg-shade bg-opacity-50 [backdrop-filter:blur(2px)]; @apply h-full w-full touch-none bg-shade bg-opacity-50 outline-none [backdrop-filter:blur(2px)];
} }
.ril__outerClosing { .ril__outerClosing {
@ -260,7 +260,7 @@ input[type="submit"] {
} }
.ril__navButtons { .ril__navButtons {
@apply absolute inset-y-0 w-5 h-8 px-10 py-8 cursor-pointer m-auto; @apply absolute inset-y-0 m-auto h-8 w-5 cursor-pointer px-10 py-8;
} }
.ril__navButtons:hover { .ril__navButtons:hover {
opacity: 1; opacity: 1;
@ -285,7 +285,7 @@ input[type="submit"] {
.ril__caption, .ril__caption,
.ril__toolbar { .ril__toolbar {
@apply bg-shade bg-opacity-50 absolute inset-x-0 flex justify-between; @apply absolute inset-x-0 flex justify-between bg-shade bg-opacity-50;
} }
.ril__caption { .ril__caption {