Added tailwindcss prettier
This commit is contained in:
DrMint
parent
435785f31b
commit
88b60077df
@ -26,6 +26,11 @@ module.exports = {
|
||||
destination: "https://discord.com/invite/5mcXcRAczj",
|
||||
permanent: false,
|
||||
},
|
||||
{
|
||||
source: "/gallery",
|
||||
destination: "https://gallery.accords-library.com/",
|
||||
permanent: false,
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
102
package-lock.json
generated
102
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@fontsource/vollkorn": "^4.5.9",
|
||||
"@fontsource/zen-maru-gothic": "^4.5.11",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"graphql-request": "^4.2.0",
|
||||
"markdown-to-jsx": "^7.1.7",
|
||||
"next": "^12.1.6",
|
||||
@ -3133,6 +3134,38 @@
|
||||
"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": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
|
||||
@ -3279,7 +3312,6 @@
|
||||
"version": "4.20.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
|
||||
"integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@ -4324,8 +4356,7 @@
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.137",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
|
||||
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
|
||||
},
|
||||
"node_modules/elegant-spinner": {
|
||||
"version": "1.0.1",
|
||||
@ -4427,7 +4458,6 @@
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
@ -5106,6 +5136,18 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@ -6845,8 +6887,7 @@
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
|
||||
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
|
||||
},
|
||||
"node_modules/nodemailer": {
|
||||
"version": "6.7.5",
|
||||
@ -6865,6 +6906,14 @@
|
||||
"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": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
|
||||
@ -7341,7 +7390,6 @@
|
||||
"version": "8.4.12",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
|
||||
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@ -7444,8 +7492,7 @@
|
||||
"node_modules/postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
@ -11254,6 +11301,19 @@
|
||||
"integrity": "sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==",
|
||||
"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": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
|
||||
@ -11374,7 +11434,6 @@
|
||||
"version": "4.20.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
|
||||
"integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001332",
|
||||
"electron-to-chromium": "^1.4.118",
|
||||
@ -12234,8 +12293,7 @@
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.137",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
|
||||
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
|
||||
},
|
||||
"elegant-spinner": {
|
||||
"version": "1.0.1",
|
||||
@ -12321,8 +12379,7 @@
|
||||
"escalade": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@ -14136,8 +14198,7 @@
|
||||
"node-releases": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
|
||||
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
|
||||
},
|
||||
"nodemailer": {
|
||||
"version": "6.7.5",
|
||||
@ -14150,6 +14211,11 @@
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"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": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
|
||||
@ -14495,7 +14561,6 @@
|
||||
"version": "8.4.12",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
|
||||
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"nanoid": "^3.3.1",
|
||||
"picocolors": "^1.0.0",
|
||||
@ -14543,8 +14608,7 @@
|
||||
"postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"@fontsource/vollkorn": "^4.5.9",
|
||||
"@fontsource/zen-maru-gothic": "^4.5.11",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"graphql-request": "^4.2.0",
|
||||
"markdown-to-jsx": "^7.1.7",
|
||||
"next": "^12.1.6",
|
||||
|
||||
@ -164,7 +164,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
>
|
||||
<div
|
||||
{...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]
|
||||
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 */}
|
||||
<div
|
||||
className={`[grid-area:content] mobile:z-10 absolute
|
||||
inset-0 transition-[backdrop-filter] duration-500 ${
|
||||
className={`absolute inset-0 transition-[backdrop-filter]
|
||||
duration-500 [grid-area:content] mobile:z-10 ${
|
||||
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
||||
? "[backdrop-filter:blur(2px)]"
|
||||
: "pointer-events-none touch-none "
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute bg-shade inset-0 transition-opacity duration-500
|
||||
className={`absolute inset-0 bg-shade transition-opacity duration-500
|
||||
${turnSubIntoContent ? "" : ""}
|
||||
${
|
||||
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
||||
@ -223,18 +223,18 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
{/* Content panel */}
|
||||
<div
|
||||
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
|
||||
) : (
|
||||
<div className="grid place-content-center h-full">
|
||||
<div className="grid h-full place-content-center">
|
||||
<div
|
||||
className="text-dark border-dark border-2 border-dotted rounded-2xl
|
||||
p-8 grid grid-flow-col place-items-center gap-9 opacity-40"
|
||||
className="grid grid-flow-col place-items-center gap-9 rounded-2xl
|
||||
border-2 border-dotted border-dark p-8 text-dark opacity-40"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
@ -243,13 +243,14 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
{/* Sub panel */}
|
||||
{subPanel && (
|
||||
<div
|
||||
className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px]
|
||||
border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0
|
||||
[scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||
className={`texture-paper-dots overflow-y-scroll border-r-[1px] border-dotted
|
||||
border-black bg-light transition-transform duration-300 [grid-area:sub]
|
||||
[scrollbar-width:none] webkit-scrollbar:w-0 mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-end mobile:border-r-0 mobile:border-l-[1px]
|
||||
mobile:[grid-area:content]
|
||||
${
|
||||
turnSubIntoContent
|
||||
? "mobile:border-l-0 mobile:w-full"
|
||||
? "mobile:w-full mobile:border-l-0"
|
||||
: !appLayout.subPanelOpen && "mobile:translate-x-[100vw]"
|
||||
}`}
|
||||
>
|
||||
@ -259,10 +260,10 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
{/* Main panel */}
|
||||
<div
|
||||
className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll
|
||||
webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light
|
||||
texture-paper-dots ${
|
||||
className={`texture-paper-dots overflow-y-scroll border-r-[1px] border-dotted
|
||||
border-black bg-light transition-transform duration-300 [grid-area:main]
|
||||
[scrollbar-width:none] webkit-scrollbar:w-0 mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-start mobile:[grid-area:content] ${
|
||||
appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
@ -271,8 +272,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
{/* Navbar */}
|
||||
<div
|
||||
className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid
|
||||
grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots"
|
||||
className="texture-paper-dots grid grid-cols-[5rem_1fr_5rem] place-items-center
|
||||
border-t-[1px] border-dotted border-black bg-light [grid-area:navbar] desktop:hidden"
|
||||
>
|
||||
<span
|
||||
className="material-icons mt-[.1em] cursor-pointer"
|
||||
@ -284,10 +285,10 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
{appLayout.mainPanelOpen ? "close" : "menu"}
|
||||
</span>
|
||||
<p
|
||||
className={`font-black font-headers text-center overflow-hidden ${
|
||||
className={`overflow-hidden text-center font-headers font-black ${
|
||||
ogTitle && ogTitle.length > 30
|
||||
? "text-xl max-h-14"
|
||||
: "text-2xl max-h-16"
|
||||
? "max-h-14 text-xl"
|
||||
: "max-h-16 text-2xl"
|
||||
}`}
|
||||
>
|
||||
{ogTitle}
|
||||
@ -314,7 +315,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
<h2 className="text-2xl">{langui.settings}</h2>
|
||||
|
||||
<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]"
|
||||
>
|
||||
{router.locales && (
|
||||
@ -358,7 +359,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
</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>
|
||||
<h3 className="text-xl">{langui.theme}</h3>
|
||||
<div className="flex flex-row">
|
||||
|
||||
@ -8,8 +8,8 @@ interface Props {
|
||||
export function Chip(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={`grid place-content-center place-items-center text-xs pb-[0.14rem]
|
||||
whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70
|
||||
className={`grid place-content-center place-items-center whitespace-nowrap rounded-full
|
||||
border-[1px] px-1.5 pb-[0.14rem] text-xs opacity-70
|
||||
transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
|
||||
>
|
||||
{props.children}
|
||||
|
||||
@ -7,7 +7,7 @@ interface Props {
|
||||
export function HorizontalLine(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -35,19 +35,19 @@ export function Button(props: Immutable<Props>): JSX.Element {
|
||||
draggable={draggable}
|
||||
id={id}
|
||||
onClick={onClick}
|
||||
className={`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 select-none hover:[--opacityBadge:0] --opacityBadge:100 ${className} ${
|
||||
className={`--opacityBadge:100 grid select-none 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:[--opacityBadge:0] ${className} ${
|
||||
active
|
||||
? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed"
|
||||
: `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`
|
||||
? "cursor-not-allowed !border-black bg-black text-light drop-shadow-black-lg"
|
||||
: `cursor-pointer 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`
|
||||
}`}
|
||||
>
|
||||
{badgeNumber && (
|
||||
<div
|
||||
className="opacity-[var(--opacityBadge)] transition-opacity grid place-items-center
|
||||
absolute -top-3 -right-2 bg-dark w-8 h-8 text-light font-bold rounded-full"
|
||||
className="absolute -top-3 -right-2 grid h-8 w-8 place-items-center rounded-full bg-dark
|
||||
font-bold text-light opacity-[var(--opacityBadge)] transition-opacity"
|
||||
>
|
||||
{badgeNumber}
|
||||
</div>
|
||||
|
||||
@ -56,16 +56,15 @@ export function OrderableList(props: Immutable<Props>): JSX.Element {
|
||||
);
|
||||
updateOrder(sourceIndex, targetIndex);
|
||||
}}
|
||||
className="grid grid-cols-[auto_1fr] place-content-center
|
||||
border-[1px] transition-all hover:text-light hover:bg-dark
|
||||
hover:drop-shadow-shade-lg border-dark bg-light text-dark
|
||||
rounded-full cursor-grab select-none px-1 py-2 pr-4 gap-2"
|
||||
className="grid cursor-grab select-none grid-cols-[auto_1fr] place-content-center gap-2
|
||||
rounded-full border-[1px] border-dark bg-light px-1 py-2 pr-4 text-dark transition-all
|
||||
hover:bg-dark hover:text-light hover:drop-shadow-shade-lg"
|
||||
draggable
|
||||
>
|
||||
<div className="grid grid-rows-[.8em_.8em] place-items-center">
|
||||
{index > 0 && (
|
||||
<span
|
||||
className="material-icons cursor-pointer row-start-1"
|
||||
className="material-icons row-start-1 cursor-pointer"
|
||||
onClick={() => {
|
||||
updateOrder(index, index - 1);
|
||||
}}
|
||||
@ -75,7 +74,7 @@ export function OrderableList(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
{index < items.size - 1 && (
|
||||
<span
|
||||
className="material-icons cursor-pointer row-start-2"
|
||||
className="material-icons row-start-2 cursor-pointer"
|
||||
onClick={() => {
|
||||
updateOrder(index, index + 1);
|
||||
}}
|
||||
|
||||
@ -13,7 +13,7 @@ export function PageSelector(props: Immutable<Props>): JSX.Element {
|
||||
const { page, setPage, maxPage } = props;
|
||||
|
||||
return (
|
||||
<div className={`flex place-content-center flex-row ${props.className}`}>
|
||||
<div className={`flex flex-row place-content-center ${props.className}`}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (page > 0) setPage(page - 1);
|
||||
|
||||
@ -17,14 +17,14 @@ export function Select(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={`relative text-center transition-[filter] ${
|
||||
opened && "drop-shadow-shade-lg z-10"
|
||||
opened && "z-10 drop-shadow-shade-lg"
|
||||
} ${className}`}
|
||||
>
|
||||
<div
|
||||
className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]
|
||||
bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center
|
||||
cursor-pointer hover:bg-mid transition-all ${
|
||||
opened && "outline-[transparent] rounded-b-none bg-highlight"
|
||||
className={`grid cursor-pointer 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
|
||||
transition-all hover:bg-mid hover:outline-[transparent] ${
|
||||
opened && "rounded-b-none bg-highlight outline-[transparent]"
|
||||
}`}
|
||||
>
|
||||
<p onClick={() => setOpened(!opened)} className="w-full">
|
||||
@ -53,8 +53,8 @@ export function Select(props: Immutable<Props>): JSX.Element {
|
||||
<div
|
||||
className={` ${
|
||||
opened ? "bg-highlight" : "bg-light"
|
||||
} hover:bg-mid transition-colors
|
||||
cursor-pointer p-1 last-of-type:rounded-b-[1em]`}
|
||||
} cursor-pointer p-1
|
||||
transition-colors last-of-type:rounded-b-[1em] hover:bg-mid`}
|
||||
id={option}
|
||||
onClick={() => {
|
||||
setOpened(false);
|
||||
|
||||
@ -12,8 +12,8 @@ export function Switch(props: Immutable<Props>): JSX.Element {
|
||||
const { state, setState, className, disabled } = props;
|
||||
return (
|
||||
<div
|
||||
className={`h-6 w-12 rounded-full border-2 border-mid grid
|
||||
transition-colors relative ${
|
||||
className={`relative grid h-6 w-12 rounded-full border-2
|
||||
border-mid transition-colors ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} ${className} ${state ? "bg-mid" : "bg-light"}`}
|
||||
onClick={() => {
|
||||
@ -21,8 +21,8 @@ export function Switch(props: Immutable<Props>): JSX.Element {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`bg-dark aspect-square rounded-full absolute
|
||||
top-0 bottom-0 left-0 transition-transform ${
|
||||
className={`absolute top-0 bottom-0 left-0
|
||||
aspect-square rounded-full bg-dark transition-transform ${
|
||||
state && "translate-x-[115%]"
|
||||
}`}
|
||||
></div>
|
||||
|
||||
@ -10,7 +10,7 @@ export function InsetBox(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
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}
|
||||
</div>
|
||||
|
||||
@ -26,13 +26,13 @@ export function ContentLine(props: Immutable<Props>): JSX.Element {
|
||||
if (content.attributes) {
|
||||
return (
|
||||
<div
|
||||
className={`grid gap-2 px-4 rounded-lg ${
|
||||
opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2"
|
||||
className={`grid gap-2 rounded-lg px-4 ${
|
||||
opened && "my-2 h-auto bg-mid py-3 shadow-inner-sm shadow-shade"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="grid gap-4 place-items-center
|
||||
grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]"
|
||||
className="grid grid-cols-[auto_auto_1fr_auto_12ch] place-items-center
|
||||
gap-4 thin:grid-cols-[auto_auto_1fr_auto]"
|
||||
>
|
||||
<a>
|
||||
<h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
|
||||
@ -55,7 +55,7 @@ export function ContentLine(props: Immutable<Props>): JSX.Element {
|
||||
)
|
||||
)}
|
||||
</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>
|
||||
{content.attributes.range[0]?.__typename ===
|
||||
"ComponentRangePageRange"
|
||||
|
||||
@ -84,7 +84,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
<div>
|
||||
<div
|
||||
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">
|
||||
{title}
|
||||
@ -98,7 +98,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
</Chip>
|
||||
</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 && (
|
||||
<Button href={`/contents/${content.data.attributes.slug}`}>
|
||||
{langui.open_content}
|
||||
@ -107,7 +107,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
<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>
|
||||
<ToolTip
|
||||
content={getStatusDescription(selectedScan.status, langui)}
|
||||
@ -120,7 +120,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={scanner.id}>
|
||||
{scanner.attributes && (
|
||||
@ -138,7 +138,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={cleaner.id}>
|
||||
{cleaner.attributes && (
|
||||
@ -157,7 +157,7 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
selectedScan.typesetters.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={typesetter.id}>
|
||||
{typesetter.attributes && (
|
||||
@ -180,15 +180,14 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
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))] mobile:grid-cols-2"
|
||||
>
|
||||
{selectedScan.pages?.data.map((page, index) => (
|
||||
<div
|
||||
key={page.id}
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02]
|
||||
cursor-pointer transition-transform"
|
||||
className="cursor-pointer transition-transform
|
||||
drop-shadow-shade-lg hover:scale-[1.02]"
|
||||
onClick={() => {
|
||||
const images: string[] = [];
|
||||
selectedScan.pages?.data.map((image) => {
|
||||
|
||||
@ -56,7 +56,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
<div>
|
||||
<div
|
||||
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">
|
||||
{"Cover"}
|
||||
@ -70,10 +70,10 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
</Chip>
|
||||
</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 />
|
||||
|
||||
<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>
|
||||
<ToolTip
|
||||
content={getStatusDescription(selectedScan.status, langui)}
|
||||
@ -86,7 +86,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
{selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={scanner.id}>
|
||||
{scanner.attributes && (
|
||||
@ -104,7 +104,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
{selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={cleaner.id}>
|
||||
{cleaner.attributes && (
|
||||
@ -123,7 +123,7 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
selectedScan.typesetters.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={typesetter.id}>
|
||||
{typesetter.attributes && (
|
||||
@ -140,15 +140,15 @@ export function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
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))]
|
||||
mobile:grid-cols-2"
|
||||
>
|
||||
{coverImages.map((image, index) => (
|
||||
<div
|
||||
key={image.url}
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02]
|
||||
cursor-pointer transition-transform"
|
||||
className="cursor-pointer transition-transform
|
||||
drop-shadow-shade-lg hover:scale-[1.02]"
|
||||
onClick={() => {
|
||||
const imgs: string[] = [];
|
||||
coverImages.map((img) => {
|
||||
|
||||
@ -57,10 +57,9 @@ export function LightBox(props: Immutable<Props>): JSX.Element {
|
||||
<Popup setState={setState} state={state} padding={false} fillViewport>
|
||||
<div
|
||||
{...handlers}
|
||||
className={`grid grid-cols-[4em,1fr,4em] mobile:grid-cols-2
|
||||
[grid-template-areas:"left_image_right"]
|
||||
mobile:[grid-template-areas:"image_image""left_right"]
|
||||
place-items-center first-letter:gap-4 w-full h-full overflow-hidden`}
|
||||
className={`grid h-full w-full grid-cols-[4em,1fr,4em] place-items-center
|
||||
overflow-hidden [grid-template-areas:"left_image_right"] first-letter:gap-4
|
||||
mobile:grid-cols-2 mobile:[grid-template-areas:"image_image""left_right"]`}
|
||||
>
|
||||
<div className="[grid-area:left]">
|
||||
{index > 0 && (
|
||||
|
||||
@ -132,7 +132,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
|
||||
component: (compProps: { id: string }) => (
|
||||
<div
|
||||
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>
|
||||
@ -169,7 +169,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
|
||||
},
|
||||
Transcript: {
|
||||
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}
|
||||
</div>
|
||||
),
|
||||
@ -245,7 +245,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
|
||||
name?: string;
|
||||
}) => (
|
||||
<div
|
||||
className="my-8 cursor-pointer place-content-center grid"
|
||||
className="my-8 grid cursor-pointer place-content-center"
|
||||
onClick={() => {
|
||||
openLightBox([
|
||||
compProps.src.startsWith("/uploads/")
|
||||
@ -285,7 +285,7 @@ function HeaderToolTip(props: { id: string }) {
|
||||
>
|
||||
<ToolTip content={"Copied! 👍"} trigger="click" className="text-sm">
|
||||
<span
|
||||
className="material-icons transition-color hover:text-dark cursor-pointer"
|
||||
className="material-icons transition-color cursor-pointer hover:text-dark"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname}#${
|
||||
|
||||
@ -17,8 +17,8 @@ export function TOC(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<h3 className="text-xl">Table of content</h3>
|
||||
<div className="text-left max-w-[14.5rem]">
|
||||
<p className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap text-left">
|
||||
<div className="max-w-[14.5rem] text-left">
|
||||
<p className="relative my-2 overflow-x-hidden text-ellipsis whitespace-nowrap text-left">
|
||||
<a className="" onClick={async () => router.replace(`#${toc.slug}`)}>
|
||||
{<abbr title={toc.title}>{toc.title}</abbr>}
|
||||
</a>
|
||||
@ -41,7 +41,7 @@ function TOCLevel(props: LevelProps): JSX.Element {
|
||||
<ol className="pl-4 text-left">
|
||||
{tocchildren.map((child, childIndex) => (
|
||||
<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}${
|
||||
childIndex + 1
|
||||
}.`}</span>{" "}
|
||||
|
||||
@ -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"
|
||||
} ${divCommon}`}
|
||||
>
|
||||
|
||||
@ -10,9 +10,9 @@ interface Props {
|
||||
export function PanelHeader(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full grid place-items-center">
|
||||
<div className="grid w-full place-items-center">
|
||||
{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>
|
||||
{props.description ? <p>{props.description}</p> : ""}
|
||||
|
||||
@ -17,7 +17,7 @@ export function ContentPanel(props: Immutable<Props>): JSX.Element {
|
||||
width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";
|
||||
|
||||
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
|
||||
className={`${
|
||||
props.autoformat && "formatted"
|
||||
|
||||
@ -20,14 +20,14 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col justify-center content-start
|
||||
gap-y-2 justify-items-center text-center p-8 ${
|
||||
className={`flex flex-col content-start justify-center
|
||||
justify-items-center gap-y-2 p-8 text-center ${
|
||||
appLayout.mainPanelReduced && isDesktop && "px-4"
|
||||
}`}
|
||||
>
|
||||
{/* Reduce/expand main menu */}
|
||||
<div
|
||||
className={`mobile:hidden top-1/2 fixed ${
|
||||
className={`fixed top-1/2 mobile:hidden ${
|
||||
appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
|
||||
}`}
|
||||
onClick={() =>
|
||||
@ -45,9 +45,9 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
<div
|
||||
className={`${
|
||||
appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
|
||||
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat]
|
||||
![mask-position:center] bg-black hover:bg-dark mb-4`}
|
||||
} mb-4 aspect-square cursor-pointer bg-black
|
||||
transition-colors [mask:url('/icons/accords.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark`}
|
||||
></div>
|
||||
</Link>
|
||||
|
||||
@ -166,7 +166,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
*/}
|
||||
|
||||
<NavOption
|
||||
url="/gallery"
|
||||
url="https://gallery.accords-library.com/"
|
||||
icon="collections"
|
||||
title={langui.gallery}
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
@ -200,7 +200,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
</p>
|
||||
<a
|
||||
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/"
|
||||
>
|
||||
<div
|
||||
@ -208,16 +208,18 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
hover:[--theme-color-black:var(--theme-color-dark)]"
|
||||
>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]"
|
||||
/>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
className="aspect-square w-6 bg-black
|
||||
[mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain]
|
||||
![mask-repeat:no-repeat] ![mask-position:center]"
|
||||
/>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
className="aspect-square w-6 bg-black
|
||||
[mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain]
|
||||
![mask-repeat:no-repeat] ![mask-position:center]"
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<a
|
||||
aria-label="Browse our GitHub repository, which include this website source code"
|
||||
className="transition-colors [mask:url('/icons/github-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
|
||||
w-10 aspect-square bg-black hover:bg-dark"
|
||||
className="aspect-square w-10
|
||||
bg-black transition-colors [mask:url('/icons/github-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
|
||||
href="https://github.com/Accords-Library"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
></a>
|
||||
<a
|
||||
aria-label="Join our Discord server!"
|
||||
className="transition-colors [mask:url('/icons/discord-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
|
||||
w-10 aspect-square bg-black hover:bg-dark"
|
||||
className="aspect-square w-10
|
||||
bg-black transition-colors [mask:url('/icons/discord-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] hover:bg-dark"
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
@ -6,7 +6,7 @@ interface Props {
|
||||
|
||||
export function SubPanel(props: Immutable<Props>): JSX.Element {
|
||||
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}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -46,7 +46,7 @@ export function Popup(props: Immutable<Props>): JSX.Element {
|
||||
}`}
|
||||
>
|
||||
<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"
|
||||
}`}
|
||||
onClick={() => {
|
||||
@ -57,14 +57,14 @@ export function Popup(props: Immutable<Props>): JSX.Element {
|
||||
<div
|
||||
className={`${
|
||||
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"
|
||||
} ${
|
||||
fillViewport
|
||||
? "absolute inset-10"
|
||||
: "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}
|
||||
|
||||
@ -78,7 +78,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
|
||||
{displayCredits && (
|
||||
<>
|
||||
{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>
|
||||
|
||||
<ToolTip
|
||||
@ -96,7 +96,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
|
||||
{post.authors && post.authors.data.length > 0 && (
|
||||
<div>
|
||||
<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) => (
|
||||
<Fragment key={author.id}>
|
||||
{author.attributes && (
|
||||
@ -152,7 +152,7 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
{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}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
@ -66,18 +66,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
const metadataJSX =
|
||||
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 && (
|
||||
<p className="mobile:text-xs text-sm">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
<p className="text-sm mobile:text-xs">
|
||||
<span className="material-icons mr-1 translate-y-[.15em] !text-base">
|
||||
event
|
||||
</span>
|
||||
{prettyDate(metadata.release_date)}
|
||||
</p>
|
||||
)}
|
||||
{metadata.price && metadata.currencies && (
|
||||
<p className="mobile:text-xs text-sm justify-self-end">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
<p className="justify-self-end text-sm mobile:text-xs">
|
||||
<span className="material-icons mr-1 translate-y-[.15em] !text-base">
|
||||
shopping_cart
|
||||
</span>
|
||||
{prettyPrice(
|
||||
@ -88,16 +88,16 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
</p>
|
||||
)}
|
||||
{metadata.views && (
|
||||
<p className="mobile:text-xs text-sm">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
<p className="text-sm mobile:text-xs">
|
||||
<span className="material-icons mr-1 translate-y-[.15em] !text-base">
|
||||
visibility
|
||||
</span>
|
||||
{prettyShortenNumber(metadata.views)}
|
||||
</p>
|
||||
)}
|
||||
{metadata.author && (
|
||||
<p className="mobile:text-xs text-sm">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
<p className="text-sm mobile:text-xs">
|
||||
<span className="material-icons mr-1 translate-y-[.15em] !text-base">
|
||||
person
|
||||
</span>
|
||||
{metadata.author}
|
||||
@ -111,18 +111,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<div
|
||||
className="drop-shadow-shade-xl cursor-pointer grid items-end
|
||||
fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02]
|
||||
[--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0]
|
||||
hover:[--play-opacity:100] transition-transform
|
||||
[--stacked-top:0] hover:[--stacked-top:1]"
|
||||
className="grid cursor-pointer items-end transition-transform
|
||||
drop-shadow-shade-xl [--bg-opacity:0] [--play-opacity:0]
|
||||
[--stacked-top:0] hover:scale-[1.02] hover:[--cover-opacity:1]
|
||||
hover:[--bg-opacity:0.5] hover:[--play-opacity:100]
|
||||
hover:[--stacked-top:1] fine:[--cover-opacity:0]"
|
||||
>
|
||||
{stackNumber > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
|
||||
inset-0 -top-[var(--stacked-top)*2.1rem] brightness-[0.8] sepia-[0.5]
|
||||
scale-[calc(1-0.15*var(--stacked-top))]"
|
||||
className="absolute inset-0 -top-[var(--stacked-top)*2.1rem]
|
||||
scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden rounded-md bg-light
|
||||
brightness-[0.8] sepia-[0.5] transition-[top_transform]"
|
||||
>
|
||||
{thumbnail && (
|
||||
<Img
|
||||
@ -134,9 +134,9 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
|
||||
-top-[var(--stacked-top)*1rem] inset-0 brightness-[0.9] sepia-[0.2]
|
||||
scale-[calc(1-0.06*var(--stacked-top))]"
|
||||
className="absolute inset-0 -top-[var(--stacked-top)*1rem]
|
||||
scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden rounded-md bg-light
|
||||
brightness-[0.9] sepia-[0.2] transition-[top_transform]"
|
||||
>
|
||||
{thumbnail && (
|
||||
<Img
|
||||
@ -162,8 +162,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
{stackNumber > 0 && (
|
||||
<div
|
||||
className="absolute right-2 top-2 text-light bg-black
|
||||
bg-opacity-60 px-2 rounded-full"
|
||||
className="absolute right-2 top-2 rounded-full bg-black
|
||||
bg-opacity-60 px-2 text-light"
|
||||
>
|
||||
{stackNumber}
|
||||
</div>
|
||||
@ -171,9 +171,9 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
{hoverlay && hoverlay.__typename === "Video" && (
|
||||
<>
|
||||
<div
|
||||
className="absolute inset-0 text-light grid
|
||||
place-content-center drop-shadow-shade-lg bg-shade
|
||||
bg-opacity-[var(--bg-opacity)] transition-colors"
|
||||
className="absolute inset-0 grid place-content-center
|
||||
bg-shade bg-opacity-[var(--bg-opacity)] text-light
|
||||
transition-colors drop-shadow-shade-lg"
|
||||
>
|
||||
<span
|
||||
className="material-icons text-6xl
|
||||
@ -183,8 +183,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="absolute right-2 bottom-2 text-light bg-black
|
||||
bg-opacity-60 px-2 rounded-full"
|
||||
className="absolute right-2 bottom-2 rounded-full bg-black
|
||||
bg-opacity-60 px-2 text-light"
|
||||
>
|
||||
{prettyDuration(hoverlay.duration)}
|
||||
</div>
|
||||
@ -194,7 +194,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
) : (
|
||||
<div
|
||||
style={{ aspectRatio: thumbnailAspectRatio }}
|
||||
className={`w-full bg-light relative ${
|
||||
className={`relative w-full bg-light ${
|
||||
keepInfoVisible
|
||||
? "rounded-t-md"
|
||||
: "rounded-md coarse:rounded-b-none"
|
||||
@ -202,8 +202,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
>
|
||||
{stackNumber > 0 && (
|
||||
<div
|
||||
className="absolute right-2 top-2 text-light bg-black
|
||||
bg-opacity-60 px-2 rounded-full"
|
||||
className="absolute right-2 top-2 rounded-full bg-black
|
||||
bg-opacity-60 px-2 text-light"
|
||||
>
|
||||
{stackNumber}
|
||||
</div>
|
||||
@ -213,13 +213,13 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
<div
|
||||
className={`linearbg-obi ${
|
||||
!keepInfoVisible &&
|
||||
`fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
|
||||
bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]`
|
||||
} transition-opacity z-20 grid p-4 gap-2`}
|
||||
`-inset-x-0.5 bottom-2 opacity-[var(--cover-opacity)]
|
||||
coarse:rounded-b-md fine:absolute fine:drop-shadow-shade-lg`
|
||||
} z-20 grid gap-2 p-4 transition-opacity`}
|
||||
>
|
||||
{metadata?.position === "Top" && metadataJSX}
|
||||
{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) => (
|
||||
<Chip key={index}>{text}</Chip>
|
||||
))}
|
||||
@ -227,18 +227,18 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
<div className="my-1">
|
||||
{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 && (
|
||||
<p className="font-headers text-lg leading-none break-words">
|
||||
<p className="break-words font-headers text-lg leading-none">
|
||||
{title}
|
||||
</p>
|
||||
)}
|
||||
{subtitle && <p className="leading-none break-words">{subtitle}</p>}
|
||||
{subtitle && <p className="break-words leading-none">{subtitle}</p>}
|
||||
</div>
|
||||
{description && <p>{description}</p>}
|
||||
{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) => (
|
||||
<Chip key={index} className="text-sm">
|
||||
{text}
|
||||
|
||||
@ -31,12 +31,12 @@ export function PreviewLine(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<div
|
||||
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
|
||||
hover:scale-[1.02] transition-transform flex flex-row gap-4
|
||||
overflow-hidden place-items-center pr-4 w-full h-36"
|
||||
className="flex h-36 w-full cursor-pointer
|
||||
flex-row place-items-center gap-4 overflow-hidden rounded-md
|
||||
bg-light pr-4 transition-transform drop-shadow-shade-xl hover:scale-[1.02]"
|
||||
>
|
||||
{thumbnail ? (
|
||||
<div className="h-full aspect-[3/2]">
|
||||
<div className="aspect-[3/2] h-full">
|
||||
<Img image={thumbnail} quality={ImageQuality.Medium} />
|
||||
</div>
|
||||
) : (
|
||||
@ -44,21 +44,21 @@ export function PreviewLine(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
<div className="grid gap-2">
|
||||
{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) => (
|
||||
<Chip key={index}>{text}</Chip>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col my-1">
|
||||
{pre_title && <p className="leading-none mb-1">{pre_title}</p>}
|
||||
<div className="my-1 flex flex-col">
|
||||
{pre_title && <p className="mb-1 leading-none">{pre_title}</p>}
|
||||
{title && (
|
||||
<p className="font-headers text-lg leading-none">{title}</p>
|
||||
)}
|
||||
{subtitle && <p className="leading-none">{subtitle}</p>}
|
||||
</div>
|
||||
{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) => (
|
||||
<Chip key={index} className="text-sm">
|
||||
{text}
|
||||
|
||||
@ -19,8 +19,8 @@ export function RecorderChip(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<ToolTip
|
||||
content={
|
||||
<div className="text-left p-2 py-5 grid gap-8">
|
||||
<div className="grid grid-flow-col gap-6 place-items-center place-content-start">
|
||||
<div className="grid gap-8 p-2 py-5 text-left">
|
||||
<div className="grid grid-flow-col place-content-start place-items-center gap-6">
|
||||
{recorder.avatar?.data?.attributes && (
|
||||
<Img
|
||||
className="w-20 rounded-full border-4 border-mid"
|
||||
|
||||
@ -43,11 +43,11 @@ export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
{thumbnail ? (
|
||||
<Img
|
||||
className="rounded-xl cursor-pointer"
|
||||
className="cursor-pointer rounded-xl"
|
||||
image={thumbnail}
|
||||
quality={ImageQuality.Medium}
|
||||
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
|
||||
@ -70,7 +70,7 @@ export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
|
||||
</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 && (
|
||||
<div className="flex flex-col place-items-center gap-2">
|
||||
<h3 className="text-xl">{langui.type}</h3>
|
||||
|
||||
@ -70,8 +70,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
if (props.item.attributes) {
|
||||
return (
|
||||
<div
|
||||
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em]
|
||||
py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
|
||||
className="grid grid-cols-[4em] grid-rows-[auto_1fr] place-content-start
|
||||
rounded-2xl py-4 px-8 target:my-4 target:bg-mid target:py-8"
|
||||
id={generateAnchor(
|
||||
props.item.attributes.year,
|
||||
props.item.attributes.month,
|
||||
@ -79,7 +79,7 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
>
|
||||
{props.displayYear && (
|
||||
<p className="text-lg mt-[-.2em] font-bold">
|
||||
<p className="mt-[-.2em] text-lg font-bold">
|
||||
{generateYear(
|
||||
props.item.attributes.displayed_date,
|
||||
props.item.attributes.year
|
||||
@ -87,11 +87,11 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
</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)}
|
||||
</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) => (
|
||||
<Fragment key={event?.id}>
|
||||
{event && (
|
||||
@ -101,8 +101,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
{translation && (
|
||||
<Fragment>
|
||||
<div
|
||||
className="place-items-start
|
||||
place-content-start grid grid-flow-col gap-2"
|
||||
className="grid
|
||||
grid-flow-col place-content-start place-items-start gap-2"
|
||||
>
|
||||
{translation.status !==
|
||||
Enum_Componenttranslationschronologyitem_Status.Done && (
|
||||
@ -128,8 +128,8 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
className={
|
||||
event.translations &&
|
||||
event.translations.length > 1
|
||||
? `before:content-['-'] before:text-dark before:inline-block
|
||||
before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line`
|
||||
? `mt-2 whitespace-pre-line before:ml-[-1em] before:inline-block
|
||||
before:w-4 before:text-dark before:content-['-']`
|
||||
: "whitespace-pre-line"
|
||||
}
|
||||
>
|
||||
@ -146,7 +146,7 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
|
||||
</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.attributes?.name})`
|
||||
) : (
|
||||
|
||||
@ -16,7 +16,7 @@ export function ChronologyYearComponent(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
return (
|
||||
<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}
|
||||
>
|
||||
{props.items.map((item, index) => (
|
||||
|
||||
@ -27,9 +27,9 @@ export default function AboutUs(
|
||||
const contactForm = (
|
||||
<div className="flex flex-col gap-8 text-center">
|
||||
<form
|
||||
className={`gap-8 grid ${
|
||||
className={`grid gap-8 ${
|
||||
formState !== "stale" &&
|
||||
"opacity-60 cursor-not-allowed touch-none pointer-events-none"
|
||||
"pointer-events-none cursor-not-allowed touch-none opacity-60"
|
||||
}`}
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
@ -114,12 +114,12 @@ export default function AboutUs(
|
||||
required
|
||||
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}
|
||||
</p>
|
||||
</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>
|
||||
<textarea
|
||||
name="message"
|
||||
|
||||
@ -48,7 +48,7 @@ export default function Channel(props: Props): JSX.Element {
|
||||
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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
@ -62,9 +62,8 @@ export default function Channel(props: Props): JSX.Element {
|
||||
<p>{channel?.subscribers.toLocaleString()} subscribers</p>
|
||||
</div>
|
||||
<div
|
||||
className="grid gap-8 items-start mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
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))] mobile:grid-cols-2"
|
||||
>
|
||||
{channel?.videos?.data.map((video) => (
|
||||
<Fragment key={video.id}>
|
||||
|
||||
@ -66,7 +66,7 @@ export default function Videos(props: Props): JSX.Element {
|
||||
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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
@ -83,9 +83,9 @@ export default function Videos(props: Props): JSX.Element {
|
||||
/>
|
||||
|
||||
<div
|
||||
className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
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))] mobile:grid-cols-2
|
||||
thin:grid-cols-1"
|
||||
>
|
||||
{paginatedVideos[page].map((video) => (
|
||||
<Fragment key={video.id}>
|
||||
|
||||
@ -80,10 +80,10 @@ export default function Video(props: Props): JSX.Element {
|
||||
className="mb-10"
|
||||
/>
|
||||
|
||||
<div className="grid gap-12 place-items-center">
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div
|
||||
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
|
||||
@ -94,7 +94,7 @@ export default function Video(props: Props): JSX.Element {
|
||||
) : (
|
||||
<iframe
|
||||
src={`https://www.youtube-nocookie.com/embed/${video.uid}`}
|
||||
className="w-full aspect-video"
|
||||
className="aspect-video w-full"
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write;
|
||||
@ -103,17 +103,17 @@ export default function Video(props: Props): JSX.Element {
|
||||
></iframe>
|
||||
)}
|
||||
|
||||
<div className="p-6 mt-2">
|
||||
<div className="mt-2 p-6">
|
||||
<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>
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
<span className="material-icons mr-1 translate-y-[.15em] !text-base">
|
||||
event
|
||||
</span>
|
||||
{prettyDate(video.published_date)}
|
||||
</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
|
||||
</span>
|
||||
{isMobile
|
||||
@ -122,7 +122,7 @@ export default function Video(props: Props): JSX.Element {
|
||||
</p>
|
||||
{video.channel?.data?.attributes && (
|
||||
<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
|
||||
</span>
|
||||
{isMobile
|
||||
@ -143,7 +143,7 @@ export default function Video(props: Props): JSX.Element {
|
||||
|
||||
{video.channel?.data?.attributes && (
|
||||
<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>
|
||||
<div>
|
||||
<Button
|
||||
@ -153,7 +153,8 @@ export default function Video(props: Props): JSX.Element {
|
||||
</Button>
|
||||
|
||||
<p>
|
||||
{`${video.channel.data.attributes.subscribers.toLocaleString()} ${langui.subscribers?.toLowerCase()}`}
|
||||
{`${video.channel.data.attributes.subscribers.toLocaleString()}
|
||||
${langui.subscribers?.toLowerCase()}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -161,7 +162,7 @@ export default function Video(props: Props): JSX.Element {
|
||||
)}
|
||||
|
||||
<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>
|
||||
<p className="whitespace-pre-line">{video.description}</p>
|
||||
</div>
|
||||
|
||||
@ -96,7 +96,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
</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>
|
||||
|
||||
<ToolTip
|
||||
@ -114,7 +114,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
selectedTranslation.text_set.transcribers.data.length > 0 && (
|
||||
<div>
|
||||
<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(
|
||||
(recorder) => (
|
||||
<Fragment key={recorder.id}>
|
||||
@ -135,7 +135,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
selectedTranslation.text_set.translators.data.length > 0 && (
|
||||
<div>
|
||||
<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(
|
||||
(recorder) => (
|
||||
<Fragment key={recorder.id}>
|
||||
@ -156,7 +156,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
selectedTranslation.text_set.proofreaders.data.length > 0 && (
|
||||
<div>
|
||||
<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(
|
||||
(recorder) => (
|
||||
<Fragment key={recorder.id}>
|
||||
@ -176,7 +176,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
{selectedTranslation.text_set.notes && (
|
||||
<div>
|
||||
<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} />
|
||||
</div>
|
||||
</div>
|
||||
@ -224,7 +224,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
{previousContent?.attributes && (
|
||||
<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}
|
||||
</h2>
|
||||
<PreviewLine
|
||||
@ -272,7 +272,7 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
{nextContent?.attributes && (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
<h2 className="text-center text-2xl mb-4">
|
||||
<h2 className="mb-4 text-center text-2xl">
|
||||
{langui.followup_content}
|
||||
</h2>
|
||||
<PreviewLine
|
||||
|
||||
@ -71,7 +71,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full mb-6"
|
||||
className="mb-6 w-full"
|
||||
type="text"
|
||||
name="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>
|
||||
<Select
|
||||
className="w-full"
|
||||
@ -94,9 +94,9 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
</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
|
||||
? "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 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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
@ -123,8 +123,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
{name && (
|
||||
<h2
|
||||
key={`h2${name}`}
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0
|
||||
flex flex-row place-items-center gap-2"
|
||||
className="flex flex-row place-items-center gap-2
|
||||
pb-2 pt-10 text-2xl first-of-type:pt-0"
|
||||
>
|
||||
{name}
|
||||
<Chip>{`${items.reduce((currentSum, item) => {
|
||||
@ -147,8 +147,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
<div
|
||||
key={`items${name}`}
|
||||
className="grid gap-8 mobile:gap-4 items-end grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||
className="grid grid-cols-2 items-end gap-8
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] mobile:gap-4"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Fragment key={item.id}>
|
||||
|
||||
@ -24,7 +24,7 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
{<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 className="font-headers">Ref</p>
|
||||
@ -37,20 +37,20 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
|
||||
{testReport.lines.map((line, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
|
||||
gap-2 items-center mb-2 justify-items-start"
|
||||
className="mb-2 grid
|
||||
grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center justify-items-start gap-2"
|
||||
>
|
||||
<Button
|
||||
href={line.frontendUrl}
|
||||
target="_blank"
|
||||
className="text-xs w-4"
|
||||
className="w-4 text-xs"
|
||||
>
|
||||
F
|
||||
</Button>
|
||||
<Button
|
||||
href={line.backendUrl}
|
||||
target="_blank"
|
||||
className="text-xs w-4"
|
||||
className="w-4 text-xs"
|
||||
>
|
||||
B
|
||||
</Button>
|
||||
@ -60,9 +60,9 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
|
||||
<Chip
|
||||
className={
|
||||
line.severity === "Very High"
|
||||
? "bg-[#f00] !opacity-100 font-bold"
|
||||
? "bg-[#f00] font-bold !opacity-100"
|
||||
: line.severity === "High"
|
||||
? "bg-[#ff6600] !opacity-100 font-bold"
|
||||
? "bg-[#ff6600] font-bold !opacity-100"
|
||||
: line.severity === "Medium"
|
||||
? "bg-[#fff344] !opacity-100"
|
||||
: ""
|
||||
|
||||
@ -29,7 +29,7 @@ export default function CheckupLibraryItems(
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
{<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 className="font-headers">Ref</p>
|
||||
@ -42,20 +42,20 @@ export default function CheckupLibraryItems(
|
||||
{testReport.lines.map((line, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
|
||||
gap-2 items-center mb-2 justify-items-start"
|
||||
className="mb-2 grid
|
||||
grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center justify-items-start gap-2"
|
||||
>
|
||||
<Button
|
||||
href={line.frontendUrl}
|
||||
target="_blank"
|
||||
className="text-xs w-4"
|
||||
className="w-4 text-xs"
|
||||
>
|
||||
F
|
||||
</Button>
|
||||
<Button
|
||||
href={line.backendUrl}
|
||||
target="_blank"
|
||||
className="text-xs w-4"
|
||||
className="w-4 text-xs"
|
||||
>
|
||||
B
|
||||
</Button>
|
||||
@ -65,9 +65,9 @@ export default function CheckupLibraryItems(
|
||||
<Chip
|
||||
className={
|
||||
line.severity === "Very High"
|
||||
? "bg-[#f00] !opacity-100 font-bold"
|
||||
? "bg-[#f00] font-bold !opacity-100"
|
||||
: line.severity === "High"
|
||||
? "bg-[#ff6600] !opacity-100 font-bold"
|
||||
? "bg-[#ff6600] font-bold !opacity-100"
|
||||
: line.severity === "Medium"
|
||||
? "bg-[#fff344] !opacity-100"
|
||||
: ""
|
||||
|
||||
@ -75,10 +75,10 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
|
||||
target.select();
|
||||
event.preventDefault();
|
||||
}}
|
||||
className="font-monospace w-[50vw] h-[50vh] mobile:w-[75vw]"
|
||||
className="h-[50vh] w-[50vw] font-monospace mobile:w-[75vw]"
|
||||
/>
|
||||
</Popup>
|
||||
<div className="flex flex-row gap-2 mb-4">
|
||||
<div className="mb-4 flex flex-row gap-2">
|
||||
<ToolTip
|
||||
placement="bottom"
|
||||
content={
|
||||
@ -339,15 +339,15 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
|
||||
const textarea = event.target as HTMLTextAreaElement;
|
||||
handleInput(textarea.value);
|
||||
}}
|
||||
className="bg-mid !bg-opacity-40 rounded-xl
|
||||
outline-none p-8 w-full text-black font-monospace h-[70vh]"
|
||||
className="h-[70vh] w-full rounded-xl
|
||||
bg-mid !bg-opacity-40 p-8 font-monospace text-black outline-none"
|
||||
value={markdown}
|
||||
title="Input textarea"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<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} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -14,14 +14,14 @@ export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
|
||||
langui={langui}
|
||||
post={post}
|
||||
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
|
||||
className="[mask:url('/icons/accords.svg')] [mask-size:contain]
|
||||
[mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square
|
||||
mobile:w-[50vw] bg-black"
|
||||
className="aspect-square w-32
|
||||
bg-black [mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat]
|
||||
[mask-position:center] mobile:w-[50vw]"
|
||||
/>
|
||||
<h1 className="text-5xl mb-0">Accord’s Library</h1>
|
||||
<h2 className="text-xl -mt-5">
|
||||
<h1 className="mb-0 text-5xl">Accord’s Library</h1>
|
||||
<h2 className="-mt-5 text-xl">
|
||||
Discover • Analyze • Translate • Archive
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@ -126,8 +126,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div
|
||||
className="drop-shadow-shade-xl w-full h-[50vh]
|
||||
mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
|
||||
className="relative h-[50vh] w-full
|
||||
cursor-pointer drop-shadow-shade-xl desktop:mb-16 mobile:h-[60vh]"
|
||||
onClick={() => {
|
||||
if (item?.thumbnail?.data?.attributes) {
|
||||
openLightBox([
|
||||
@ -143,15 +143,15 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
<Img
|
||||
image={item.thumbnail.data.attributes}
|
||||
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>
|
||||
|
||||
<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 && (
|
||||
<div className="grid place-items-center">
|
||||
<p>{langui.subitem_of}</p>
|
||||
@ -204,18 +204,18 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
</InsetBox>
|
||||
|
||||
{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>
|
||||
<div
|
||||
className="grid w-full gap-8 items-end
|
||||
grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||
className="grid w-full grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-end
|
||||
gap-8"
|
||||
>
|
||||
{item.gallery.data.map((galleryItem, index) => (
|
||||
<Fragment key={galleryItem.id}>
|
||||
{galleryItem.attributes && (
|
||||
<div
|
||||
className="relative aspect-square hover:scale-[1.02]
|
||||
transition-transform cursor-pointer"
|
||||
className="relative aspect-square cursor-pointer
|
||||
transition-transform hover:scale-[1.02]"
|
||||
onClick={() => {
|
||||
if (item.gallery?.data) {
|
||||
const images: string[] = [];
|
||||
@ -233,8 +233,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
className="bg-light rounded-lg drop-shadow-shade-md
|
||||
w-full h-full object-cover"
|
||||
className="h-full w-full rounded-lg
|
||||
bg-light object-cover drop-shadow-shade-md"
|
||||
image={galleryItem.attributes}
|
||||
/>
|
||||
</div>
|
||||
@ -246,11 +246,11 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
|
||||
<InsetBox id="details" className="grid place-items-center">
|
||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
||||
<h2 className="text-2xl text-center">{langui.details}</h2>
|
||||
<div className="grid grid-flow-col w-full place-content-between">
|
||||
<div className="place-items grid w-[clamp(0px,100%,42rem)] gap-8">
|
||||
<h2 className="text-center text-2xl">{langui.details}</h2>
|
||||
<div className="grid w-full grid-flow-col place-content-between">
|
||||
{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>
|
||||
<div className="grid grid-flow-col gap-1">
|
||||
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
|
||||
@ -261,14 +261,14 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
|
||||
{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>
|
||||
<p>{prettyDate(item.release_date)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
<p>
|
||||
{prettyPrice(
|
||||
@ -302,7 +302,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
{item?.size && (
|
||||
<>
|
||||
<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">
|
||||
<p className="font-bold">{langui.width}:</p>
|
||||
<div>
|
||||
@ -334,7 +334,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
item?.metadata?.[0]?.__typename !== "ComponentMetadataOther" && (
|
||||
<>
|
||||
<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 ===
|
||||
"ComponentMetadataBooks" && (
|
||||
<>
|
||||
@ -385,19 +385,19 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
{item?.subitems && item.subitems.data.length > 0 && (
|
||||
<div
|
||||
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">
|
||||
{isVariantSet ? langui.variants : langui.subitems}
|
||||
</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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full"
|
||||
className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] items-end
|
||||
gap-8 mobile:grid-cols-2"
|
||||
>
|
||||
{item.subitems.data.map((subitem) => (
|
||||
<Fragment key={subitem.id}>
|
||||
@ -434,14 +434,14 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
|
||||
{item?.contents && item.contents.data.length > 0 && (
|
||||
<div id="contents" className="w-full grid place-items-center gap-8">
|
||||
<h2 className="text-2xl -mb-6">{langui.contents}</h2>
|
||||
<div id="contents" className="grid w-full place-items-center gap-8">
|
||||
<h2 className="-mb-6 text-2xl">{langui.contents}</h2>
|
||||
{displayOpenScans && (
|
||||
<Button href={`/library/${item.slug}/scans`}>
|
||||
{langui.view_scans}
|
||||
</Button>
|
||||
)}
|
||||
<div className="grid gap-4 w-full">
|
||||
<div className="grid w-full gap-4">
|
||||
{item.contents.data.map((content) => (
|
||||
<ContentLine
|
||||
langui={langui}
|
||||
|
||||
@ -92,7 +92,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full mb-6"
|
||||
className="mb-6 w-full"
|
||||
type="text"
|
||||
name="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>
|
||||
<Select
|
||||
className="w-full"
|
||||
@ -118,7 +118,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
</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>
|
||||
<Select
|
||||
className="w-full"
|
||||
@ -132,22 +132,22 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
</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>
|
||||
<Switch state={showSubitems} setState={setShowSubitems} />
|
||||
</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>
|
||||
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
|
||||
</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>
|
||||
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
|
||||
</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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
@ -161,8 +161,8 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
<>
|
||||
{name && (
|
||||
<h2
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0
|
||||
flex flex-row place-items-center gap-2"
|
||||
className="flex flex-row place-items-center gap-2
|
||||
pb-2 pt-10 text-2xl first-of-type:pt-0"
|
||||
>
|
||||
{name}
|
||||
<Chip>{`${items.length} ${
|
||||
@ -173,9 +173,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
</h2>
|
||||
)}
|
||||
<div
|
||||
className="grid gap-8 mobile:gap-4 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
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(13rem,1fr))]
|
||||
mobile:grid-cols-2 mobile:gap-4"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Fragment key={item.id}>
|
||||
|
||||
@ -33,7 +33,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
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>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
@ -43,7 +43,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
const contentPanel = (
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
<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))]"
|
||||
>
|
||||
{posts.map((post) => (
|
||||
|
||||
@ -104,7 +104,7 @@ export default function Chronology(props: Props): JSX.Element {
|
||||
<Fragment key={eraIndex}>
|
||||
<InsetBox
|
||||
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">
|
||||
{chronologyEras[eraIndex].attributes?.title?.[0]
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@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,
|
||||
@ -16,7 +16,7 @@ h6 {
|
||||
}
|
||||
|
||||
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 {
|
||||
@ -42,7 +42,7 @@ mark {
|
||||
}
|
||||
|
||||
*::-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 */
|
||||
@ -53,11 +53,11 @@ mark {
|
||||
.formatted h4,
|
||||
.formatted h5,
|
||||
.formatted h6 {
|
||||
@apply text-center flex gap-3 justify-center;
|
||||
@apply flex justify-center gap-3 text-center;
|
||||
}
|
||||
|
||||
.formatted h1 {
|
||||
@apply text-4xl my-16;
|
||||
@apply my-16 text-4xl;
|
||||
}
|
||||
|
||||
.formatted h1 + h2 {
|
||||
@ -65,7 +65,7 @@ mark {
|
||||
}
|
||||
|
||||
.formatted h2 {
|
||||
@apply text-3xl my-12;
|
||||
@apply my-12 text-3xl;
|
||||
}
|
||||
|
||||
.formatted h2 + h3 {
|
||||
@ -73,7 +73,7 @@ mark {
|
||||
}
|
||||
|
||||
.formatted h3 {
|
||||
@apply text-2xl my-8;
|
||||
@apply my-8 text-2xl;
|
||||
}
|
||||
|
||||
.formatted h3 + h4 {
|
||||
@ -81,11 +81,11 @@ mark {
|
||||
}
|
||||
|
||||
.formatted h4 {
|
||||
@apply text-xl my-6;
|
||||
@apply my-6 text-xl;
|
||||
}
|
||||
|
||||
.formatted h5 {
|
||||
@apply text-lg my-4;
|
||||
@apply my-4 text-lg;
|
||||
}
|
||||
|
||||
.formatted p,
|
||||
@ -102,7 +102,7 @@ mark {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -126,18 +126,18 @@ mark {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply text-dark block;
|
||||
@apply block text-dark;
|
||||
}
|
||||
|
||||
/* INPUT */
|
||||
|
||||
input,
|
||||
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 {
|
||||
@ -146,19 +146,19 @@ input::placeholder {
|
||||
|
||||
input:focus-visible,
|
||||
textarea:focus-within {
|
||||
@apply outline-none bg-mid shadow-inner-sm shadow-shade;
|
||||
@apply bg-mid shadow-inner-sm shadow-shade outline-none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@apply rounded-2xl text-left p-6;
|
||||
@apply rounded-2xl p-6 text-left;
|
||||
}
|
||||
|
||||
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 {
|
||||
@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 */
|
||||
@ -170,7 +170,7 @@ input[type="submit"] {
|
||||
max-width: calc(100vw - 10px);
|
||||
}
|
||||
.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 {
|
||||
@apply bottom-0;
|
||||
@ -223,7 +223,7 @@ input[type="submit"] {
|
||||
border-style: solid;
|
||||
}
|
||||
.tippy-content {
|
||||
@apply relative px-6 py-4 z-10;
|
||||
@apply relative z-10 px-6 py-4;
|
||||
}
|
||||
|
||||
/* LIGHTBOX */
|
||||
@ -238,7 +238,7 @@ input[type="submit"] {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -260,7 +260,7 @@ input[type="submit"] {
|
||||
}
|
||||
|
||||
.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 {
|
||||
opacity: 1;
|
||||
@ -285,7 +285,7 @@ input[type="submit"] {
|
||||
|
||||
.ril__caption,
|
||||
.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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user