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

Improvements here and there

This commit is contained in:
DrMint 2022-06-12 13:54:17 +02:00
parent b0fb445518
commit 1ee5ff1292
16 changed files with 166 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
design.config.js
View File

@ -27,16 +27,19 @@ const fonts = {
openDyslexic: "OpenDyslexic",
vollkorn: "Vollkorn",
zenMaruGothic: "Zen Maru Gothic",
shareTechMono: "Share Tech Mono",
};
const fontFamilies = {
standard: {
body: fonts.zenMaruGothic,
headers: fonts.vollkorn,
mono: fonts.shareTechMono,
},
dyslexic: {
body: fonts.openDyslexic,
headers: fonts.openDyslexic,
mono: fonts.shareTechMono,
},
};

11
package-lock.json generated
View File

@ -8,6 +8,7 @@
"dependencies": {
"@fontsource/material-icons": "^4.5.4",
"@fontsource/opendyslexic": "^4.5.4",
"@fontsource/share-tech-mono": "^4.5.8",
"@fontsource/vollkorn": "^4.5.10",
"@fontsource/zen-maru-gothic": "^4.5.11",
"@tippyjs/react": "^4.2.6",
@ -1087,6 +1088,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",
"integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig=="
},
"node_modules/@fontsource/share-tech-mono": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/share-tech-mono/-/share-tech-mono-4.5.8.tgz",
"integrity": "sha512-z/4SQIrVgaanGUU7LBSpBNlAd3WMJsL8IpweLOThCtDRhDMwqaWb8AVSphAJv1OATIH2RcuiWrDkza714UIRwQ=="
},
"node_modules/@fontsource/vollkorn": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.10.tgz",
@ -9804,6 +9810,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz",
"integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig=="
},
"@fontsource/share-tech-mono": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/share-tech-mono/-/share-tech-mono-4.5.8.tgz",
"integrity": "sha512-z/4SQIrVgaanGUU7LBSpBNlAd3WMJsL8IpweLOThCtDRhDMwqaWb8AVSphAJv1OATIH2RcuiWrDkza714UIRwQ=="
},
"@fontsource/vollkorn": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.10.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"dependencies": {
"@fontsource/material-icons": "^4.5.4",
"@fontsource/opendyslexic": "^4.5.4",
"@fontsource/share-tech-mono": "^4.5.8",
"@fontsource/vollkorn": "^4.5.10",
"@fontsource/zen-maru-gothic": "^4.5.11",
"@tippyjs/react": "^4.2.6",

15
src/components/AppLayout.tsx
View File

@ -13,6 +13,7 @@ import { useRouter } from "next/router";
import { useEffect, useMemo, useState } from "react";
import { useSwipeable } from "react-swipeable";
import { Ico, Icon } from "./Ico";
import { ButtonGroup } from "./Inputs/ButtonGroup";
import { OrderableList } from "./Inputs/OrderableList";
import { Select } from "./Inputs/Select";
import { TextInput } from "./Inputs/TextInput";
@ -381,7 +382,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
<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">
<ButtonGroup>
<Button
onClick={() => {
appLayout.setDarkMode(false);
@ -391,7 +392,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
appLayout.selectedThemeMode === true &&
appLayout.darkMode === false
}
className="rounded-r-none"
text={langui.light}
/>
<Button
@ -399,7 +399,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
appLayout.setSelectedThemeMode(false);
}}
active={appLayout.selectedThemeMode === false}
className="rounded-l-none rounded-r-none border-x-0"
text={langui.auto}
/>
<Button
@ -411,10 +410,9 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
appLayout.selectedThemeMode === true &&
appLayout.darkMode === true
}
className="rounded-l-none"
text={langui.dark}
/>
</div>
</ButtonGroup>
</div>
<div>
@ -431,9 +429,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
<div>
<h3 className="text-xl">{langui.font_size}</h3>
<div className="flex flex-row">
<ButtonGroup>
<Button
className="rounded-r-none"
onClick={() =>
appLayout.setFontSize(
appLayout.fontSize
@ -444,7 +441,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
icon={Icon.TextDecrease}
/>
<Button
className="rounded-l-none rounded-r-none border-x-0"
onClick={() => appLayout.setFontSize(1)}
text={`${((appLayout.fontSize ?? 1) * 100).toLocaleString(
undefined,
@ -454,7 +450,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
)}%`}
/>
<Button
className="rounded-l-none"
onClick={() =>
appLayout.setFontSize(
appLayout.fontSize
@ -464,7 +459,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
}
icon={Icon.TextIncrease}
/>
</div>
</ButtonGroup>
</div>
<div>

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

@ -38,25 +38,25 @@ export function Button(props: Immutable<Props>): JSX.Element {
draggable={draggable}
id={id}
onClick={onClick}
className={`--opacityBadge:100 grid select-none grid-flow-col place-content-center
place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem]
pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${
className={`component-button group grid select-none grid-flow-col place-content-center
place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] pb-[0.5rem]
text-dark transition-all ${
active
? "!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`
}`}
} ${className}`}
>
{badgeNumber && (
<div
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"
font-bold text-light transition-opacity group-hover:opacity-0"
>
<p className="-translate-y-[0.05em]">{badgeNumber}</p>
</div>
)}
{icon && <Ico className="translate-y-[0.04em]" icon={icon} />}
{text && <p className="-translate-y-[0.05em]">{text}</p>}
{icon && <Ico className="translate-y-[0.04em] !text-base" icon={icon} />}
{text && <p className="-translate-y-[0.05em] text-center">{text}</p>}
</div>
);

41
src/components/Inputs/ButtonGroup.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Immutable } from "helpers/types";
import { useEffect, useRef } from "react";
interface Props {
children: React.ReactNode;
className?: string;
}
export function ButtonGroup(props: Immutable<Props>): JSX.Element {
const { children, className } = props;
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
const buttons = ref.current.querySelectorAll(".component-button");
buttons.forEach((button, index) => {
button.classList.remove("rounded-full");
button.classList.remove("border-[1px]");
if (index === 0) {
button.classList.add("rounded-l-full");
button.classList.add("border-l-[1px]");
} else if (index === buttons.length - 1) {
button.classList.add("rounded-r-full");
button.classList.add("border-r-[1px]");
} else {
button.classList.add("rounded-none");
}
button.classList.add("border-y-[1px]");
});
}
}, [children]);
return (
<div
ref={ref}
className={`grid grid-flow-col ${className}`}
>
{children}
</div>
);
}

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

@ -21,8 +21,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
return (
<div
className={`flex flex-col content-start justify-center
justify-items-center gap-y-2 p-8 text-center ${
className={`grid content-start justify-center gap-y-2 p-8 text-center ${
appLayout.mainPanelReduced && isDesktop && "px-4"
}`}
>
@ -131,9 +130,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
icon={Icon.WatchLater}
title={langui.chronicles}
subtitle={langui.chronicles_short_description}
reduced={appLayout.mainPanelReduced && isDesktop}
/>
*/}
@ -151,9 +148,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
url="/merch"
icon={Icon.Store}
title={langui.merch}
reduced={appLayout.mainPanelReduced && isDesktop}
/>
*/}
@ -193,23 +188,23 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
<div className="mt-4 mb-8 grid place-content-center">
<a
aria-label="Read more about the license we use for this website"
className="grid grid-flow-col place-content-center gap-1 transition-[filter]
hover:[--theme-color-black:var(--theme-color-dark)]"
className="group grid grid-flow-col place-content-center gap-1 transition-[filter]"
href="https://creativecommons.org/licenses/by-sa/4.0/"
>
<div
className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]"
className="aspect-square w-6 bg-black transition-colors
[mask:url('/icons/creative-commons-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center] group-hover:bg-dark"
/>
<div
className="aspect-square w-6 bg-black
className="aspect-square w-6 bg-black transition-colors
[mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center]"
![mask-repeat:no-repeat] ![mask-position:center] group-hover:bg-dark"
/>
<div
className="aspect-square w-6 bg-black
className="aspect-square w-6 bg-black transition-colors
[mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center]"
![mask-repeat:no-repeat] ![mask-position:center] group-hover:bg-dark"
/>
</a>
</div>

62
src/components/PreviewCard.tsx
View File

@ -23,6 +23,7 @@ import { Img } from "./Img";
interface Props {
thumbnail?: UploadImageFragment | string | null | undefined;
thumbnailAspectRatio?: string;
thumbnailForceAspectRatio?: boolean;
thumbnailRounded?: boolean;
href: string;
pre_title?: string | null | undefined;
@ -55,6 +56,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
href,
thumbnail,
thumbnailAspectRatio = "4/3",
thumbnailForceAspectRatio = false,
thumbnailRounded = true,
pre_title,
title,
@ -122,20 +124,16 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
return (
<Link href={href} passHref>
<div
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] hoverable:[--cover-opacity:0]"
className="group grid cursor-pointer items-end transition-transform drop-shadow-shade-xl
hover:scale-[1.02]"
>
{stackNumber > 0 && (
<>
<div
className={`absolute inset-0 -top-[var(--stacked-top)*2.1rem]
scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden ${
className={`absolute inset-0 scale-[.85] overflow-hidden bg-light brightness-[0.8]
sepia-[0.5] transition-[top_transform] group-hover:-top-8 ${
thumbnailRounded && "rounded-md"
} bg-light
brightness-[0.8] sepia-[0.5] transition-[top_transform]`}
}`}
>
{thumbnail && (
<Img
@ -147,11 +145,10 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</div>
<div
className={`absolute inset-0 -top-[var(--stacked-top)*1rem]
scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden ${
className={`absolute inset-0 overflow-hidden bg-light brightness-[0.9] sepia-[0.2]
transition-[top_transform] group-hover:-top-4 group-hover:scale-[.94] ${
thumbnailRounded && "rounded-md"
} bg-light
brightness-[0.9] sepia-[0.2] transition-[top_transform]`}
}`}
>
{thumbnail && (
<Img
@ -165,15 +162,21 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
)}
{thumbnail ? (
<div className="relative">
<div
className="relative"
style={{
aspectRatio: thumbnailForceAspectRatio
? thumbnailAspectRatio
: "unset",
}}
>
<Img
className={
thumbnailRounded
? keepInfoVisible
className={`${
thumbnailRounded &&
(keepInfoVisible
? "rounded-t-md"
: "rounded-md notHoverable:rounded-b-none"
: undefined
}
: "rounded-md notHoverable:rounded-b-none")
} ${thumbnailForceAspectRatio && "h-full w-full object-cover"}`}
image={thumbnail}
quality={ImageQuality.Medium}
/>
@ -188,13 +191,12 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
{hoverlay && hoverlay.__typename === "Video" && (
<>
<div
className="absolute inset-0 grid place-content-center
bg-shade bg-opacity-[var(--bg-opacity)] text-light
transition-colors drop-shadow-shade-lg"
className="absolute inset-0 grid place-content-center bg-shade bg-opacity-0
text-light transition-colors drop-shadow-shade-lg group-hover:bg-opacity-50"
>
<Ico
icon={Icon.PlayCircleOutline}
className="text-6xl opacity-[var(--play-opacity)] transition-opacity"
className="text-6xl opacity-0 transition-opacity group-hover:opacity-100"
/>
</div>
<div
@ -226,11 +228,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</div>
)}
<div
className={`linearbg-obi ${
className={`z-20 grid gap-2 p-4 transition-opacity linearbg-obi ${
!keepInfoVisible &&
`-inset-x-0.5 bottom-2 opacity-[var(--cover-opacity)]
hoverable:absolute hoverable:drop-shadow-shade-lg notHoverable:rounded-b-md`
} z-20 grid gap-2 p-4 transition-opacity`}
`-inset-x-0.5 bottom-2 opacity-0 group-hover:opacity-100 hoverable:absolute
hoverable:drop-shadow-shade-lg notHoverable:rounded-b-md`
}`}
>
{metadata?.position === "Top" && metadataJSX}
{topChips && topChips.length > 0 && (
@ -272,12 +274,13 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
}
interface TranslatedProps
extends Omit<Props, "pre_title" | "subtitle" | "title"> {
extends Omit<Props, "description" | "pre_title" | "subtitle" | "title"> {
translations:
| {
pre_title?: string | null | undefined;
title: string | null | undefined;
subtitle?: string | null | undefined;
description?: string | null | undefined;
language: string | undefined;
}[]
| undefined;
@ -305,6 +308,7 @@ export function TranslatedPreviewCard(
pre_title={selectedTranslation?.pre_title}
title={selectedTranslation?.title ?? prettySlug(slug)}
subtitle={selectedTranslation?.subtitle}
description={selectedTranslation?.description}
{...props}
/>
);

1
src/pages/_app.tsx
View File

@ -1,5 +1,6 @@
import "@fontsource/material-icons";
import "@fontsource/opendyslexic/400.css";
import "@fontsource/share-tech-mono/400.css";
import "@fontsource/opendyslexic/700.css";
import "@fontsource/vollkorn/700.css";
import "@fontsource/zen-maru-gothic/500.css";

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

@ -196,6 +196,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
languages={languages}
thumbnail={item.attributes.thumbnail?.data?.attributes}
thumbnailAspectRatio="3/2"
thumbnailForceAspectRatio
stackNumber={
effectiveCombineRelatedContent &&
item.attributes.group?.data?.attributes?.combine

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

@ -407,7 +407,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
handleInput(textarea.value);
}}
className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8
text-black outline-none"
text-black font-mono outline-none"
value={markdown}
title="Input textarea"
/>

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

@ -170,7 +170,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
/>
</div>
)}
<div className="grid place-items-center">
<div className="grid place-items-center text-center">
<h1 className="text-3xl">{item?.title}</h1>
{item?.subtitle && <h2 className="text-2xl">{item.subtitle}</h2>}
</div>
@ -261,7 +261,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
<InsetBox id="details" className="grid place-items-center">
<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">
<div
className="grid place-items-center gap-y-8
desktop:grid-flow-col desktop:place-content-between"
>
{item?.metadata?.[0] && (
<div className="grid place-content-start place-items-center">
<h3 className="text-xl">{langui.type}</h3>
@ -313,17 +316,26 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
)}
{item?.size && (
<>
<div className="grid gap-8 mobile:place-items-center">
<h3 className="text-xl">{langui.size}</h3>
<div className="grid w-full grid-flow-col place-content-between">
<div className="flex flex-row flex-wrap place-items-start gap-4">
<div
className="grid w-full grid-flow-col place-content-between thin:grid-flow-row
thin:place-content-center thin:gap-8"
>
<div
className="grid place-items-center gap-x-4 desktop:grid-flow-col
desktop:place-items-start"
>
<p className="font-bold">{langui.width}:</p>
<div>
<p>{item.size.width} mm</p>
<p>{convertMmToInch(item.size.width)} in</p>
</div>
</div>
<div className="flex flex-row flex-wrap place-items-start gap-4">
<div
className="grid place-items-center gap-x-4 desktop:grid-flow-col
desktop:place-items-start"
>
<p className="font-bold">{langui.height}:</p>
<div>
<p>{item.size.height} mm</p>
@ -331,7 +343,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
</div>
</div>
{item.size.thickness && (
<div className="flex flex-row flex-wrap place-items-start gap-4">
<div
className="grid place-items-center gap-x-4 desktop:grid-flow-col
desktop:place-items-start"
>
<p className="font-bold">{langui.thickness}:</p>
<div>
<p>{item.size.thickness} mm</p>
@ -340,7 +355,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
</div>
)}
</div>
</>
</div>
)}
{item?.metadata?.[0]?.__typename !== "ComponentMetadataGroup" &&
@ -417,8 +432,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
)}
<div
className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] items-end
gap-8 mobile:grid-cols-2"
className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]
items-end gap-8 mobile:grid-cols-2 thin:grid-cols-1"
>
{item.subitems.data.map((subitem) => (
<Fragment key={subitem.id}>

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

@ -30,6 +30,7 @@ import {
} from "helpers/libraryItem";
import { PreviewCard } from "components/PreviewCard";
import { useMediaHoverable } from "hooks/useMediaQuery";
import { ButtonGroup } from "components/Inputs/ButtonGroup";
interface Props extends AppStaticProps {
items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@ -200,10 +201,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
/>
)}
<div className="mt-4 grid grid-flow-col">
<ButtonGroup className="mt-4">
<ToolTip content={langui.only_display_items_i_want}>
<Button
className="rounded-r-none"
icon={Icon.Favorite}
onClick={() => setFilterUserStatus(LibraryItemUserStatus.Want)}
active={filterUserStatus === LibraryItemUserStatus.Want}
@ -211,7 +211,6 @@ export default function Library(props: Immutable<Props>): JSX.Element {
</ToolTip>
<ToolTip content={langui.only_display_items_i_have}>
<Button
className="rounded-none border-l-0"
icon={Icon.BackHand}
onClick={() => setFilterUserStatus(LibraryItemUserStatus.Have)}
active={filterUserStatus === LibraryItemUserStatus.Have}
@ -219,7 +218,6 @@ export default function Library(props: Immutable<Props>): JSX.Element {
</ToolTip>
<ToolTip content={langui.only_display_unmarked_items}>
<Button
className="rounded-none border-l-0"
icon={Icon.RadioButtonUnchecked}
onClick={() => setFilterUserStatus(LibraryItemUserStatus.None)}
active={filterUserStatus === LibraryItemUserStatus.None}
@ -227,13 +225,12 @@ export default function Library(props: Immutable<Props>): JSX.Element {
</ToolTip>
<ToolTip content={langui.display_all_items}>
<Button
className="rounded-l-none border-l-0"
text={"All"}
onClick={() => setFilterUserStatus(undefined)}
active={filterUserStatus === undefined}
/>
</ToolTip>
</div>
</ButtonGroup>
<Button
className="mt-8"
@ -343,7 +340,7 @@ export async function getStaticProps(
const items = await sdk.getLibraryItemsPreview({
language_code: context.locale ?? "en",
});
if (!items.libraryItems) return { notFound: true };
if (!items.libraryItems?.data) return { notFound: true };
const props: Props = {
...(await getAppStaticProps(context)),
items: items.libraryItems.data,

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

@ -101,10 +101,11 @@ export default function News(props: Immutable<Props>): JSX.Element {
}
description={post.attributes.translations?.[0]?.excerpt}
thumbnail={post.attributes.thumbnail?.data?.attributes}
thumbnailAspectRatio="3/2"
thumbnailForceAspectRatio
bottomChips={post.attributes.categories?.data.map(
(category) => category.attributes?.short ?? ""
)}
thumbnailAspectRatio="3/2"
keepInfoVisible={keepInfoVisible}
metadata={{
release_date: post.attributes.date,

22
src/tailwind.css
View File

@ -16,7 +16,8 @@ h6 {
}
a {
@apply cursor-pointer underline decoration-dark decoration-dotted underline-offset-2 transition-colors hover:text-dark;
@apply cursor-pointer underline decoration-dark decoration-dotted
underline-offset-2 transition-colors hover:text-dark;
}
*::selection {
@ -117,6 +118,10 @@ mark {
@apply border-l-dark;
}
.formatted code {
@apply font-mono
}
.formatted ul {
@apply list-disc pl-4;
}
@ -137,7 +142,9 @@ mark {
input,
textarea {
@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];
@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 {
@ -154,11 +161,15 @@ textarea {
}
input[type="submit"] {
@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;
@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 bg-[length:10cm] bg-local [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)];
@apply bg-[length:10cm] bg-local [background-image:var(--theme-texture-dots)]
[background-blend-mode:var(--theme-texture-dots-blend)];
}
/* TIPPY */
@ -170,7 +181,8 @@ input[type="submit"] {
max-width: calc(100vw - 10px);
}
.tippy-box {
@apply relative rounded-lg bg-light transition-[transform,_visibility,_opacity] drop-shadow-shade-xl;
@apply relative rounded-lg bg-light transition-[transform,_visibility,_opacity]
drop-shadow-shade-xl;
}
.tippy-box[data-placement^="top"] > .tippy-arrow {
@apply bottom-0;

3
tailwind.config.js
View File

@ -21,6 +21,7 @@ module.exports = {
fontFamily: {
body: "var(--theme-font-body)",
headers: "var(--theme-font-headers)",
mono: "var(--theme-font-mono)",
...fonts,
},
screens: {
@ -67,10 +68,12 @@ module.exports = {
".set-theme-font-standard": {
"--theme-font-body": fontFamilies.standard.body,
"--theme-font-headers": fontFamilies.standard.headers,
"--theme-font-mono": fontFamilies.standard.mono,
},
".set-theme-font-dyslexic": {
"--theme-font-body": fontFamilies.dyslexic.body,
"--theme-font-headers": fontFamilies.dyslexic.headers,
"--theme-font-mono": fontFamilies.dyslexic.mono,
},
});
}),