Convert HTML to markdown
diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx
index cd51d09..acf0b60 100644
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@@ -29,7 +29,7 @@ import {
prettySlug,
prettyURL,
} from "helpers/formatters";
-import { getAssetURL, ImageQuality } from "helpers/img";
+import { ImageQuality } from "helpers/img";
import { convertMmToInch } from "helpers/numbers";
import {
filterDefined,
@@ -38,7 +38,6 @@ import {
isDefinedAndNotEmpty,
sortRangedContent,
} from "helpers/others";
-import { useLightBox } from "hooks/useLightBox";
import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
import { isUntangibleGroupItem } from "helpers/libraryItem";
import { useDeviceSupportsHover } from "hooks/useMediaQuery";
@@ -50,11 +49,12 @@ import { getOpenGraph } from "helpers/openGraph";
import { getDescription } from "helpers/description";
import { useIntersectionList } from "hooks/useIntersectionList";
import { HorizontalLine } from "components/HorizontalLine";
-import { useIsContentPanelNoMoreThan } from "hooks/useContainerQuery";
import { getLangui } from "graphql/fetchLocalData";
import { Ids } from "types/ids";
import { useUserSettings } from "contexts/UserSettingsContext";
import { useLocalData } from "contexts/LocalDataContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { useLightBox } from "contexts/LightBoxContext";
/*
* ╭─────────────╮
@@ -76,13 +76,13 @@ interface Props extends AppLayoutRequired {
const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
const { currency } = useUserSettings();
const { langui, currencies } = useLocalData();
- const isContentPanelNoMoreThan3xl = useIsContentPanelNoMoreThan("3xl");
- const isContentPanelNoMoreThanSm = useIsContentPanelNoMoreThan("sm");
+ const { isContentPanelAtLeast3xl, isContentPanelAtLeastSm } = useContainerQueries();
const hoverable = useDeviceSupportsHover();
const router = useRouter();
- const [openLightBox, LightBox] = useLightBox();
const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(false);
+ const { showLightBox } = useLightBox();
+
useScrollTopOnChange(Ids.ContentPanel, [item]);
const currentIntersection = useIntersectionList(intersectionIds);
@@ -158,8 +158,6 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
const contentPanel = useMemo(
() => (
-
-
{
{
- if (item.thumbnail?.data?.attributes) {
- openLightBox([getAssetURL(item.thumbnail.data.attributes.url, ImageQuality.Large)]);
- }
- }}>
+ cIf(isContentPanelAtLeast3xl, "mb-16", "h-[60vh]")
+ )}>
{item.thumbnail?.data?.attributes ? (
{
+ showLightBox([item.thumbnail?.data?.attributes]);
+ }}
/>
) : (
@@ -254,12 +250,12 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
className="relative aspect-square cursor-pointer
transition-transform hover:scale-[1.02]"
onClick={() => {
- const images: string[] = filterHasAttributes(item.gallery?.data, [
- "attributes",
- ] as const).map((image) =>
- getAssetURL(image.attributes.url, ImageQuality.Large)
+ showLightBox(
+ filterHasAttributes(item.gallery?.data, ["attributes"] as const).map(
+ (image) => image.attributes
+ ),
+ index
);
- openLightBox(images, index);
}}>
![]()
{item.metadata?.[0] && (
@@ -337,25 +333,25 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
{langui.size}
{langui.width}:
@@ -368,9 +364,9 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
className={cJoin(
"grid gap-x-4",
cIf(
- isContentPanelNoMoreThan3xl,
- "place-items-center",
- "grid-flow-col place-items-start"
+ isContentPanelAtLeast3xl,
+ "grid-flow-col place-items-start",
+ "place-items-center"
)
)}>
{langui.height}:
@@ -384,9 +380,9 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
className={cJoin(
"grid gap-x-4",
cIf(
- isContentPanelNoMoreThan3xl,
- "place-items-center",
- "grid-flow-col place-items-start"
+ isContentPanelAtLeast3xl,
+ "grid-flow-col place-items-start",
+ "place-items-center"
)
)}>
{langui.thickness}:
@@ -405,7 +401,7 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
{langui.type_information}
@@ -555,7 +551,7 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
isDefined(rangedContent.attributes.scan_set) &&
rangedContent.attributes.scan_set.length > 0
}
- condensed={isContentPanelNoMoreThan3xl}
+ condensed={!isContentPanelAtLeast3xl}
/>
)
)}
@@ -566,9 +562,8 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
),
[
- LightBox,
langui,
- isContentPanelNoMoreThan3xl,
+ isContentPanelAtLeast3xl,
item.thumbnail?.data?.attributes,
item.subitem_of?.data,
item.title,
@@ -588,13 +583,13 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
router.locale,
currencies,
currency,
- isContentPanelNoMoreThanSm,
+ isContentPanelAtLeastSm,
isVariantSet,
hoverable,
toggleKeepInfoVisible,
keepInfoVisible,
displayOpenScans,
- openLightBox,
+ showLightBox,
]
);
diff --git a/src/pages/library/[slug]/reader.tsx b/src/pages/library/[slug]/reader.tsx
index 329ff97..e250665 100644
--- a/src/pages/library/[slug]/reader.tsx
+++ b/src/pages/library/[slug]/reader.tsx
@@ -1,6 +1,6 @@
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
-import Hotkeys from "react-hot-keys";
+import { useHotkeys } from "react-hotkeys-hook";
import Slider from "rc-slider";
import { useRouter } from "next/router";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
@@ -23,7 +23,6 @@ import { getLangui } from "graphql/fetchLocalData";
import { ContentPanel, ContentPanelWidthSizes } from "components/Panels/ContentPanel";
import { Img } from "components/Img";
import { getAssetFilename, ImageQuality } from "helpers/img";
-import { useIs1ColumnLayout, useIsContentPanelNoMoreThan } from "hooks/useContainerQuery";
import { cIf, cJoin } from "helpers/className";
import { clamp, isInteger } from "helpers/numbers";
import { SubPanel } from "components/Panels/SubPanel";
@@ -45,6 +44,7 @@ import { useFullscreen } from "hooks/useFullscreen";
import { useUserSettings } from "contexts/UserSettingsContext";
import { useLocalData } from "contexts/LocalDataContext";
import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
const CUSTOM_DARK_DROPSHADOW = `
drop-shadow(0 0 0.5em rgb(var(--theme-color-shade) / 30%))
@@ -90,7 +90,7 @@ const LibrarySlug = ({
item,
...otherProps
}: Props): JSX.Element => {
- const is1ColumnLayout = useIs1ColumnLayout();
+ const { is1ColumnLayout } = useContainerQueries();
const { langui } = useLocalData();
const { darkMode } = useUserSettings();
const {
@@ -114,7 +114,7 @@ const LibrarySlug = ({
);
const router = useRouter();
- const { isFullscreen, toggleFullscreen } = useFullscreen(Ids.ContentPanel);
+ const { isFullscreen, toggleFullscreen, requestFullscreen } = useFullscreen(Ids.ContentPanel);
const effectiveDisplayMode = useMemo(
() =>
@@ -173,6 +173,19 @@ const LibrarySlug = ({
[changeCurrentPageIndex, effectiveDisplayMode, pageOrder]
);
+ useHotkeys("left", () => handlePageNavigation("left"), { enabled: !isGalleryMode }, [
+ handlePageNavigation,
+ ]);
+
+ useHotkeys("up", () => setIsGalleryMode(true), { enabled: !isGalleryMode }, [setIsGalleryMode]);
+ useHotkeys("down", () => setIsGalleryMode(false), { enabled: isGalleryMode }, [setIsGalleryMode]);
+
+ useHotkeys("f", () => requestFullscreen(), { enabled: !isFullscreen }, [requestFullscreen]);
+
+ useHotkeys("right", () => handlePageNavigation("right"), { enabled: !isGalleryMode }, [
+ handlePageNavigation,
+ ]);
+
const firstPage = useMemo(
() =>
pages[
@@ -426,121 +439,114 @@ const LibrarySlug = ({
() => (
-
{
- handlePageNavigation(keyName as "left" | "right");
- }}>
- setCurrentZoom(zoom.state.scale)}
- panning={{ disabled: currentZoom <= 1, velocityDisabled: false }}
- doubleClick={{ disabled: true, mode: "reset" }}
- zoomAnimation={{ size: 0.1 }}
- velocityAnimation={{ animationTime: 0, equalToMove: true }}>
-
- {effectiveDisplayMode === "single" ? (
+ setCurrentZoom(zoom.state.scale)}
+ panning={{ disabled: currentZoom <= 1, velocityDisabled: false }}
+ doubleClick={{ disabled: true, mode: "reset" }}
+ zoomAnimation={{ size: 0.1 }}
+ velocityAnimation={{ animationTime: 0, equalToMove: true }}>
+
+ {effectiveDisplayMode === "single" ? (
+
+
+
+
currentZoom <= 1 && handlePageNavigation("left")}
+ />
+
currentZoom <= 1 && handlePageNavigation("right")}
+ />
+
+ ) : (
+ <>
+ )}
+ onClick={() => currentZoom <= 1 && handlePageNavigation("left")}
+ style={{
+ clipPath: leftSideClipPath,
+ }}>
+ {isSidePagesEnabled && (
+
+ )}
+
-
-
currentZoom <= 1 && handlePageNavigation("left")}
- />
-
currentZoom <= 1 && handlePageNavigation("right")}
- />
+
- ) : (
- <>
-
currentZoom <= 1 && handlePageNavigation("right")}
+ style={{
+ clipPath: rightSideClipPath,
+ }}>
+
![]()
currentZoom <= 1 && handlePageNavigation("left")}
- style={{
- clipPath: leftSideClipPath,
- }}>
- {isSidePagesEnabled && (
-
- )}
-
-
+ {isSidePagesEnabled && (
+
-
-
-
currentZoom <= 1 && handlePageNavigation("right")}
- style={{
- clipPath: rightSideClipPath,
- }}>
-
- {isSidePagesEnabled && (
-
- )}
+ )}
-
-
-
- )}
-
-
-
+
+
+
+ )}
+
+
{
- const is1ColumnLayout = useIsContentPanelNoMoreThan("2xl");
+ const { is1ColumnLayout } = useContainerQueries();
const { langui } = useLocalData();
const [selectedScan, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
items: scanSet,
@@ -1028,8 +1034,8 @@ const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps):
{
const hoverable = useDeviceSupportsHover();
const { langui, currencies } = useLocalData();
const { libraryItemUserStatus } = useLibraryItemUserStatus();
- const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
+ const { isContentPanelAtLeast4xl } = useContainerQueries();
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index 38c2034..35b7b35 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -21,12 +21,12 @@ import { compareDate } from "helpers/date";
import { TranslatedPreviewCard } from "components/PreviewCard";
import { HorizontalLine } from "components/HorizontalLine";
import { cIf } from "helpers/className";
-import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
import { useIsTerminalMode } from "hooks/useIsTerminalMode";
import { Terminal } from "components/Cli/Terminal";
import { useLocalData } from "contexts/LocalDataContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@@ -48,7 +48,7 @@ interface Props extends AppLayoutRequired {
}
const News = ({ posts, ...otherProps }: Props): JSX.Element => {
- const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
+ const { isContentPanelAtLeast4xl } = useContainerQueries();
const { langui } = useLocalData();
const hoverable = useDeviceSupportsHover();
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
diff --git a/src/pages/wiki/[slug]/index.tsx b/src/pages/wiki/[slug]/index.tsx
index 44f1dff..cfb0966 100644
--- a/src/pages/wiki/[slug]/index.tsx
+++ b/src/pages/wiki/[slug]/index.tsx
@@ -14,18 +14,18 @@ import { filterHasAttributes, isDefined, isDefinedAndNotEmpty } from "helpers/ot
import { WikiPageWithTranslations } from "types/types";
import { useSmartLanguage } from "hooks/useSmartLanguage";
import { prettySlug, sJoin } from "helpers/formatters";
-import { useLightBox } from "hooks/useLightBox";
-import { getAssetURL, ImageQuality } from "helpers/img";
+import { ImageQuality } from "helpers/img";
import { getOpenGraph } from "helpers/openGraph";
import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
import { getDescription } from "helpers/description";
import { cIf, cJoin } from "helpers/className";
-import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
import { getLangui } from "graphql/fetchLocalData";
import { Terminal } from "components/Cli/Terminal";
import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
import { useIsTerminalMode } from "hooks/useIsTerminalMode";
import { useLocalData } from "contexts/LocalDataContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { useLightBox } from "contexts/LightBoxContext";
/*
* ╭────────╮
@@ -40,6 +40,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
const { langui } = useLocalData();
const router = useRouter();
const isTerminalMode = useIsTerminalMode();
+ const { showLightBox } = useLightBox();
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
items: page.translations,
languageExtractor: useCallback(
@@ -48,9 +49,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
[]
),
});
-
- const [openLightBox, LightBox] = useLightBox();
- const is3ColumnsLayout = useIs3ColumnsLayout();
+ const { is3ColumnsLayout } = useContainerQueries();
const subPanel = useMemo(
() => (
@@ -64,8 +63,6 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
const contentPanel = useMemo(
() => (
-
-
{
quality={ImageQuality.Medium}
className="w-full cursor-pointer"
onClick={() => {
- if (page.thumbnail?.data?.attributes?.url) {
- openLightBox([
- getAssetURL(page.thumbnail.data.attributes.url, ImageQuality.Large),
- ]);
+ if (page.thumbnail?.data?.attributes) {
+ showLightBox([page.thumbnail.data.attributes]);
}
}}
/>
@@ -183,16 +178,18 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
),
[
LanguageSwitcher,
- LightBox,
is3ColumnsLayout,
languageSwitcherProps,
- langui,
- openLightBox,
+ langui.categories,
+ langui.summary,
+ langui.tags,
+ langui.wiki,
page.categories?.data,
page.definitions,
page.tags?.data,
page.thumbnail?.data?.attributes,
selectedTranslation,
+ showLightBox,
]
);
diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx
index a52861b..3ca3ea4 100644
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@@ -22,13 +22,13 @@ import { SelectiveNonNullable } from "types/SelectiveNonNullable";
import { prettySlug } from "helpers/formatters";
import { getOpenGraph } from "helpers/openGraph";
import { TranslatedPreviewCard } from "components/PreviewCard";
-import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
import { cIf } from "helpers/className";
import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
import { Terminal } from "components/Cli/Terminal";
import { useIsTerminalMode } from "hooks/useIsTerminalMode";
import { useLocalData } from "contexts/LocalDataContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@@ -53,7 +53,7 @@ interface Props extends AppLayoutRequired {
const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
const hoverable = useDeviceSupportsHover();
const { langui } = useLocalData();
- const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
+ const { isContentPanelAtLeast4xl } = useContainerQueries();
const isTerminalMode = useIsTerminalMode();
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
diff --git a/src/styles/animations.css b/src/styles/animations.css
new file mode 100644
index 0000000..f34b370
--- /dev/null
+++ b/src/styles/animations.css
@@ -0,0 +1,32 @@
+.animation-carret {
+ animation-name: blink;
+ animation-duration: 1s;
+ animation-timing-function: step-end;
+ animation-iteration-count: infinite;
+}
+
+.animate-zoom-in {
+ animation-name: zoom-in;
+ animation-duration: 2s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: 1;
+}
+
+@keyframes zoom-in {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes blink {
+ from,
+ to {
+ border-bottom-style: solid;
+ }
+ 50% {
+ border-bottom-style: none;
+ }
+}
diff --git a/src/styles/custom-classes.css b/src/styles/custom-classes.css
new file mode 100644
index 0000000..e5bbe65
--- /dev/null
+++ b/src/styles/custom-classes.css
@@ -0,0 +1,4 @@
+.texture-paper-dots {
+ @apply bg-[length:10cm] bg-local [background-image:var(--theme-texture-dots)]
+ [background-blend-mode:var(--theme-texture-dots-blend)];
+}
diff --git a/src/styles/debug.css b/src/styles/debug.css
new file mode 100644
index 0000000..cdbf92b
--- /dev/null
+++ b/src/styles/debug.css
@@ -0,0 +1,11 @@
+.false {
+ @apply border-2 border-[red] text-[red] outline-dotted outline-2 outline-[red];
+}
+
+.undefined {
+ @apply border-2 border-[green] text-[green] outline-dotted outline-2 outline-[green];
+}
+
+.null {
+ @apply border-2 border-[blue] text-[blue] outline-dotted outline-2 outline-[blue];
+}
diff --git a/src/styles/formatted.css b/src/styles/formatted.css
new file mode 100644
index 0000000..fd31d3b
--- /dev/null
+++ b/src/styles/formatted.css
@@ -0,0 +1,89 @@
+.formatted h1,
+.formatted h2,
+.formatted h3,
+.formatted h4,
+.formatted h5,
+.formatted h6 {
+ @apply flex justify-center gap-3 text-center;
+}
+
+.formatted h1 {
+ @apply my-16 text-4xl;
+}
+
+.formatted h1 + h2 {
+ @apply -mt-10;
+}
+
+.formatted h2 {
+ @apply my-12 text-3xl;
+}
+
+.formatted h2 + h3 {
+ @apply -mt-8;
+}
+
+.formatted h3 {
+ @apply my-8 text-2xl;
+}
+
+.formatted h3 + h4 {
+ @apply -mt-6;
+}
+
+.formatted h4 {
+ @apply my-6 text-xl;
+}
+
+.formatted h5 {
+ @apply my-4 text-lg;
+}
+
+.formatted p,
+.formatted strong {
+ @apply my-2 text-justify;
+}
+
+.formatted strong {
+ @apply font-black;
+}
+
+.formatted footer {
+ @apply border-t-2 border-dotted pt-6;
+}
+
+.formatted footer > div {
+ @apply my-2 rounded-xl px-6 py-4;
+}
+
+.formatted footer > div:target {
+ @apply bg-mid shadow-inner-sm shadow-shade;
+}
+
+.formatted li::marker {
+ @apply text-dark;
+}
+
+.formatted code {
+ @apply font-mono;
+}
+
+.formatted pre > code {
+ @apply block whitespace-pre-line;
+}
+
+.formatted ul {
+ @apply list-disc pl-4;
+}
+
+.formatted ol {
+ @apply list-decimal pl-4;
+}
+
+.formatted blockquote {
+ @apply my-8 rounded-lg border-2 border-mid p-5 text-center;
+}
+
+.formatted blockquote cite {
+ @apply block text-dark;
+}
diff --git a/src/styles/others.css b/src/styles/others.css
new file mode 100644
index 0000000..5ed513c
--- /dev/null
+++ b/src/styles/others.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#__next {
+ @apply bg-light font-body font-medium text-black;
+}
+
+* {
+ @apply box-border scroll-m-[40vh] scroll-smooth ![-webkit-tap-highlight-color:transparent];
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ @apply font-headers font-black;
+}
+
+a {
+ @apply cursor-pointer underline decoration-dark decoration-dotted
+ underline-offset-2 transition-colors hover:text-dark;
+}
+
+*::selection {
+ @apply bg-dark text-light;
+}
+
+mark {
+ @apply bg-mid px-2;
+}
+
+/* SCROLLBARS STYLING */
+
+* {
+ @apply [scrollbar-color:theme(colors.dark/1)_transparent] [scrollbar-width:thin];
+}
+
+*::-webkit-scrollbar {
+ @apply w-3;
+}
+
+*::-webkit-scrollbar-track {
+ @apply bg-light;
+}
+
+*::-webkit-scrollbar-thumb {
+ @apply rounded-full border-2 border-solid border-light bg-dark;
+}
+
+/* INPUT */
+
+input,
+textarea {
+ @apply rounded-full bg-light p-2 text-center text-dark outline outline-1 -outline-offset-1
+ outline-mid transition-all placeholder:text-dark placeholder:opacity-60 hover:bg-mid
+ hover:outline-transparent;
+}
+
+input::placeholder {
+ @apply text-dark opacity-60;
+}
+
+input:focus-visible,
+textarea:focus-within {
+ @apply bg-mid shadow-inner-sm shadow-shade outline-none;
+}
+
+textarea {
+ @apply rounded-2xl p-6 text-left;
+}
+
+input[type="submit"] {
+ @apply grid cursor-pointer place-content-center place-items-center rounded-full border
+ border-dark px-4 pt-[0.4rem] pb-[0.5rem] text-dark outline-none 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;
+}
diff --git a/src/styles/rc-slider.css b/src/styles/rc-slider.css
new file mode 100644
index 0000000..d86208b
--- /dev/null
+++ b/src/styles/rc-slider.css
@@ -0,0 +1,218 @@
+.rc-slider {
+ position: relative;
+ width: 100%;
+ height: 14px;
+ padding: 5px 0;
+ border-radius: 6px;
+ touch-action: none;
+ box-sizing: border-box;
+}
+.rc-slider * {
+ box-sizing: border-box;
+}
+.rc-slider-rail {
+ @apply h-2 rounded-full bg-mid/80;
+ position: absolute;
+ width: 100%;
+}
+.rc-slider-track {
+ @apply h-2 rounded-full bg-mid bg-dark/20 shadow-inner-sm shadow-shade;
+ position: absolute;
+}
+.rc-slider-handle {
+ @apply -mt-1 h-4 w-4 rounded-full bg-dark transition-shadow;
+ position: absolute;
+ cursor: grab;
+ touch-action: pan-x;
+}
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+ @apply shadow-sm shadow-shade;
+}
+
+.rc-slider-mark {
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: 100%;
+ font-size: 12px;
+}
+.rc-slider-mark-text {
+ position: absolute;
+ display: inline-block;
+ color: #999;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.rc-slider-mark-text-active {
+ color: #666;
+}
+.rc-slider-step {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background: transparent;
+ pointer-events: none;
+}
+.rc-slider-dot {
+ position: absolute;
+ bottom: -2px;
+ width: 8px;
+ height: 8px;
+ vertical-align: middle;
+ background-color: #fff;
+ border: 2px solid #e9e9e9;
+ border-radius: 50%;
+ cursor: pointer;
+}
+.rc-slider-dot-active {
+ border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+ margin-right: -4px;
+}
+.rc-slider-disabled {
+ background-color: #e9e9e9;
+}
+.rc-slider-disabled .rc-slider-track {
+ background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+ background-color: #fff;
+ border-color: #ccc;
+ box-shadow: none;
+ cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+ cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+ width: 14px;
+ height: 100%;
+ padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+ width: 4px;
+ height: 100%;
+}
+.rc-slider-vertical .rc-slider-track {
+ bottom: 0;
+ left: 5px;
+ width: 4px;
+}
+.rc-slider-vertical .rc-slider-handle {
+ margin-top: 0;
+ margin-left: -5px;
+ touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+ top: 0;
+ left: 18px;
+ height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+ width: 4px;
+ height: 100%;
+}
+.rc-slider-vertical .rc-slider-dot {
+ margin-left: -2px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+ display: block !important;
+ animation-duration: 0.3s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+ display: block !important;
+ animation-duration: 0.3s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+ animation-name: rcSliderTooltipZoomDownIn;
+ animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+ animation-name: rcSliderTooltipZoomDownOut;
+ animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+ transform: scale(0, 0);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+ 0% {
+ transform: scale(0, 0);
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1, 1);
+ transform-origin: 50% 100%;
+ }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+ 0% {
+ transform: scale(1, 1);
+ transform-origin: 50% 100%;
+ }
+ 100% {
+ transform: scale(0, 0);
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+}
+.rc-slider-tooltip {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ visibility: visible;
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+ display: none;
+}
+.rc-slider-tooltip-placement-top {
+ padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+ min-width: 24px;
+ height: 24px;
+ padding: 6px 2px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 1;
+ text-align: center;
+ text-decoration: none;
+ background-color: #6c6c6c;
+ border-radius: 6px;
+ box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+ bottom: 4px;
+ left: 50%;
+ margin-left: -4px;
+ border-width: 4px 4px 0;
+ border-top-color: #6c6c6c;
+}
diff --git a/src/styles/tippy.css b/src/styles/tippy.css
new file mode 100644
index 0000000..9d001b9
--- /dev/null
+++ b/src/styles/tippy.css
@@ -0,0 +1,63 @@
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+ @apply opacity-0;
+}
+[data-tippy-root] {
+ max-width: calc(100vw - 10px);
+}
+.tippy-box {
+ @apply relative rounded-lg bg-light transition-[transform,visibility,opacity]
+ drop-shadow-shade-xl;
+}
+.tippy-box[data-placement^="top"] > .tippy-arrow {
+ @apply bottom-0;
+}
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+ bottom: -7px;
+ left: 0;
+ border-width: 8px 8px 0;
+ border-top-color: initial;
+ transform-origin: center top;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow {
+ top: 0;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+ top: -7px;
+ left: 0;
+ border-width: 0 8px 8px;
+ border-bottom-color: initial;
+ transform-origin: center bottom;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow {
+ right: 0;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+ border-width: 8px 0 8px 8px;
+ border-left-color: initial;
+ right: -7px;
+ transform-origin: center left;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow {
+ left: 0;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+ left: -7px;
+ border-width: 8px 8px 8px 0;
+ border-right-color: initial;
+ transform-origin: center right;
+}
+.tippy-box[data-inertia][data-state="visible"] {
+ transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+.tippy-arrow {
+ @apply h-4 w-4 text-light;
+}
+.tippy-arrow:before {
+ content: "";
+ position: absolute;
+ border-color: transparent;
+ border-style: solid;
+}
+.tippy-content {
+ @apply relative z-10 px-6 py-4;
+}
diff --git a/src/tailwind.css b/src/tailwind.css
deleted file mode 100644
index 540b92d..0000000
--- a/src/tailwind.css
+++ /dev/null
@@ -1,510 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
- @apply box-border scroll-m-[40vh] scroll-smooth font-body font-medium;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- @apply font-headers font-black;
-}
-
-a {
- @apply cursor-pointer underline decoration-dark decoration-dotted
- underline-offset-2 transition-colors hover:text-dark;
-}
-
-*::selection {
- @apply bg-dark text-light;
-}
-
-mark {
- @apply bg-mid px-2 text-black;
-}
-
-/* SCROLLBARS STYLING */
-
-* {
- @apply [scrollbar-color:theme(colors.dark/1)_transparent] [scrollbar-width:thin];
-}
-
-*::-webkit-scrollbar {
- @apply w-3;
-}
-
-*::-webkit-scrollbar-track {
- @apply bg-light;
-}
-
-*::-webkit-scrollbar-thumb {
- @apply rounded-full border-[3px] border-solid border-light bg-dark;
-}
-
-/* CHANGE FORMATTED DEFAULTS */
-
-.formatted h1,
-.formatted h2,
-.formatted h3,
-.formatted h4,
-.formatted h5,
-.formatted h6 {
- @apply flex justify-center gap-3 text-center;
-}
-
-.formatted h1 {
- @apply my-16 text-4xl;
-}
-
-.formatted h1 + h2 {
- @apply -mt-10;
-}
-
-.formatted h2 {
- @apply my-12 text-3xl;
-}
-
-.formatted h2 + h3 {
- @apply -mt-8;
-}
-
-.formatted h3 {
- @apply my-8 text-2xl;
-}
-
-.formatted h3 + h4 {
- @apply -mt-6;
-}
-
-.formatted h4 {
- @apply my-6 text-xl;
-}
-
-.formatted h5 {
- @apply my-4 text-lg;
-}
-
-.formatted p,
-.formatted strong {
- @apply my-2 text-justify;
-}
-
-.formatted strong {
- @apply font-black;
-}
-
-.formatted footer {
- @apply border-t-[3px] border-dotted pt-6;
-}
-
-.formatted footer > div {
- @apply my-2 rounded-xl px-6 py-4;
-}
-
-.formatted footer > div:target {
- @apply bg-mid shadow-inner-sm shadow-shade;
-}
-
-.formatted li::marker {
- @apply text-dark;
-}
-
-.formatted code {
- @apply font-mono;
-}
-
-.formatted pre > code {
- @apply block whitespace-pre-line;
-}
-
-.formatted ul {
- @apply list-disc pl-4;
-}
-
-.formatted ol {
- @apply list-decimal pl-4;
-}
-
-.formatted blockquote {
- @apply my-8 rounded-lg border-2 border-mid p-5 text-center;
-}
-
-.formatted blockquote cite {
- @apply block text-dark;
-}
-
-/* INPUT */
-
-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];
-}
-
-input::placeholder {
- @apply text-dark opacity-60;
-}
-
-input:focus-visible,
-textarea:focus-within {
- @apply bg-mid shadow-inner-sm shadow-shade outline-none;
-}
-
-textarea {
- @apply rounded-2xl p-6 text-left;
-}
-
-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 outline-none 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)];
-}
-
-/* ANIMATION */
-
-.animation-carret {
- animation-name: blink;
- animation-duration: 1s;
- animation-timing-function: step-end;
- animation-iteration-count: infinite;
-}
-
-.animate-zoom-in {
- animation-name: zoom-in;
- animation-duration: 2s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: 1;
-}
-
-@keyframes zoom-in {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes blink {
- from,
- to {
- border-bottom-style: solid;
- }
- 50% {
- border-bottom-style: none;
- }
-}
-
-/* DEBUGGING */
-.false {
- @apply border-2 border-[red] text-[red] outline-dotted outline-2 outline-[red];
-}
-
-.undefined {
- @apply border-2 border-[green] text-[green] outline-dotted outline-2 outline-[green];
-}
-
-.null {
- @apply border-2 border-[blue] text-[blue] outline-dotted outline-2 outline-[blue];
-}
-
-/* TIPPY */
-
-.tippy-box[data-animation="fade"][data-state="hidden"] {
- @apply opacity-0;
-}
-[data-tippy-root] {
- max-width: calc(100vw - 10px);
-}
-.tippy-box {
- @apply relative rounded-lg bg-light transition-[transform,_visibility,_opacity]
- drop-shadow-shade-xl;
-}
-.tippy-box[data-placement^="top"] > .tippy-arrow {
- @apply bottom-0;
-}
-.tippy-box[data-placement^="top"] > .tippy-arrow:before {
- bottom: -7px;
- left: 0;
- border-width: 8px 8px 0;
- border-top-color: initial;
- transform-origin: center top;
-}
-.tippy-box[data-placement^="bottom"] > .tippy-arrow {
- top: 0;
-}
-.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
- top: -7px;
- left: 0;
- border-width: 0 8px 8px;
- border-bottom-color: initial;
- transform-origin: center bottom;
-}
-.tippy-box[data-placement^="left"] > .tippy-arrow {
- right: 0;
-}
-.tippy-box[data-placement^="left"] > .tippy-arrow:before {
- border-width: 8px 0 8px 8px;
- border-left-color: initial;
- right: -7px;
- transform-origin: center left;
-}
-.tippy-box[data-placement^="right"] > .tippy-arrow {
- left: 0;
-}
-.tippy-box[data-placement^="right"] > .tippy-arrow:before {
- left: -7px;
- border-width: 8px 8px 8px 0;
- border-right-color: initial;
- transform-origin: center right;
-}
-.tippy-box[data-inertia][data-state="visible"] {
- transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-}
-.tippy-arrow {
- @apply h-4 w-4 text-light;
-}
-.tippy-arrow:before {
- content: "";
- position: absolute;
- border-color: transparent;
- border-style: solid;
-}
-.tippy-content {
- @apply relative z-10 px-6 py-4;
-}
-
-/* RC SLIDER */
-
-.rc-slider {
- position: relative;
- width: 100%;
- height: 14px;
- padding: 5px 0;
- border-radius: 6px;
- touch-action: none;
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider * {
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-rail {
- @apply h-2 rounded-full bg-mid/80;
- position: absolute;
- width: 100%;
-}
-.rc-slider-track {
- @apply h-2 rounded-full bg-mid bg-dark/20 shadow-inner-sm shadow-shade;
- position: absolute;
-}
-.rc-slider-handle {
- @apply -mt-1 h-4 w-4 rounded-full bg-dark transition-shadow;
- position: absolute;
- cursor: grab;
- touch-action: pan-x;
-}
-.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
- @apply shadow-sm shadow-shade;
-}
-
-.rc-slider-mark {
- position: absolute;
- top: 18px;
- left: 0;
- width: 100%;
- font-size: 12px;
-}
-.rc-slider-mark-text {
- position: absolute;
- display: inline-block;
- color: #999;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
-}
-.rc-slider-mark-text-active {
- color: #666;
-}
-.rc-slider-step {
- position: absolute;
- width: 100%;
- height: 4px;
- background: transparent;
- pointer-events: none;
-}
-.rc-slider-dot {
- position: absolute;
- bottom: -2px;
- width: 8px;
- height: 8px;
- vertical-align: middle;
- background-color: #fff;
- border: 2px solid #e9e9e9;
- border-radius: 50%;
- cursor: pointer;
-}
-.rc-slider-dot-active {
- border-color: #96dbfa;
-}
-.rc-slider-dot-reverse {
- margin-right: -4px;
-}
-.rc-slider-disabled {
- background-color: #e9e9e9;
-}
-.rc-slider-disabled .rc-slider-track {
- background-color: #ccc;
-}
-.rc-slider-disabled .rc-slider-handle,
-.rc-slider-disabled .rc-slider-dot {
- background-color: #fff;
- border-color: #ccc;
- box-shadow: none;
- cursor: not-allowed;
-}
-.rc-slider-disabled .rc-slider-mark-text,
-.rc-slider-disabled .rc-slider-dot {
- cursor: not-allowed !important;
-}
-.rc-slider-vertical {
- width: 14px;
- height: 100%;
- padding: 0 5px;
-}
-.rc-slider-vertical .rc-slider-rail {
- width: 4px;
- height: 100%;
-}
-.rc-slider-vertical .rc-slider-track {
- bottom: 0;
- left: 5px;
- width: 4px;
-}
-.rc-slider-vertical .rc-slider-handle {
- margin-top: 0;
- margin-left: -5px;
- touch-action: pan-y;
-}
-.rc-slider-vertical .rc-slider-mark {
- top: 0;
- left: 18px;
- height: 100%;
-}
-.rc-slider-vertical .rc-slider-step {
- width: 4px;
- height: 100%;
-}
-.rc-slider-vertical .rc-slider-dot {
- margin-left: -2px;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
- display: block !important;
- animation-duration: 0.3s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-leave {
- display: block !important;
- animation-duration: 0.3s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
-.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
- animation-name: rcSliderTooltipZoomDownIn;
- animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
- animation-name: rcSliderTooltipZoomDownOut;
- animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
- transform: scale(0, 0);
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.rc-slider-tooltip-zoom-down-leave {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-@keyframes rcSliderTooltipZoomDownIn {
- 0% {
- transform: scale(0, 0);
- transform-origin: 50% 100%;
- opacity: 0;
- }
- 100% {
- transform: scale(1, 1);
- transform-origin: 50% 100%;
- }
-}
-@keyframes rcSliderTooltipZoomDownOut {
- 0% {
- transform: scale(1, 1);
- transform-origin: 50% 100%;
- }
- 100% {
- transform: scale(0, 0);
- transform-origin: 50% 100%;
- opacity: 0;
- }
-}
-.rc-slider-tooltip {
- position: absolute;
- top: -9999px;
- left: -9999px;
- visibility: visible;
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip * {
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip-hidden {
- display: none;
-}
-.rc-slider-tooltip-placement-top {
- padding: 4px 0 8px 0;
-}
-.rc-slider-tooltip-inner {
- min-width: 24px;
- height: 24px;
- padding: 6px 2px;
- color: #fff;
- font-size: 12px;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- background-color: #6c6c6c;
- border-radius: 6px;
- box-shadow: 0 0 4px #d9d9d9;
-}
-.rc-slider-tooltip-arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
-}
-.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
- bottom: 4px;
- left: 50%;
- margin-left: -4px;
- border-width: 4px 4px 0;
- border-top-color: #6c6c6c;
-}
diff --git a/src/types/ids.ts b/src/types/ids.ts
index 2325817..dafa62b 100644
--- a/src/types/ids.ts
+++ b/src/types/ids.ts
@@ -2,4 +2,5 @@ export enum Ids {
Body = "bodyqs65d4a98d56az48z64d",
ContentPanel = "contentPanel495922447721572",
SubPanel = "subPanelz9e8rs2d3f18zer98ze",
+ LightBox = "lightBoxqsd564az89e732s1",
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 9cdcc3e..3f01346 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,10 +27,43 @@ module.exports = {
hoverable: { raw: "(hover: hover)" },
notHoverable: { raw: "(hover: none)" },
},
+ backdropBlur: {
+ none: "0",
+ sm: "0.1rem",
+ DEFAULT: "0.2rem",
+ md: "0.5rem",
+ lg: "1rem",
+ },
+ borderWidth: {
+ 0: "0",
+ 2: "0.2rem",
+ 4: "0.4rem",
+ 8: "0.8rem",
+ DEFAULT: "0.1rem",
+ },
+ outlineWidth: {
+ 0: "0",
+ 1: "0.15rem",
+ 2: "0.17rem",
+ },
+ outlineOffset: {
+ 0: "0",
+ 1: "0.15rem",
+ 2: "0.17rem",
+ },
extend: {
boxShadow: {
"inner-sm": "inset 0 1px 4px -2px",
},
+ transitionProperty: {
+ height: "height, max-height, min-height",
+ filter: "filter, backdrop-filter",
+ colors:
+ "color, background-color, border-color, text-decoration-color, fill, stroke, outline-color",
+ },
+ outlineColor: {
+ transparent: "transparent",
+ },
},
},
plugins: [