added paper texture + fixed problem with text always being justified
This commit is contained in:
parent
7657962740
commit
910052c372
Binary file not shown.
After Width: | Height: | Size: 228 KiB |
|
@ -63,7 +63,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<div className="fixed bottom-0 left-0 right-0 h-20 bg-light border-t-[1px] border-dark grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden">
|
<div className="fixed bottom-0 left-0 right-0 h-20 border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
|
||||||
<span
|
<span
|
||||||
id="navbar-main-button"
|
id="navbar-main-button"
|
||||||
className="material-icons mt-[.1em] cursor-pointer"
|
className="material-icons mt-[.1em] cursor-pointer"
|
||||||
|
@ -87,14 +87,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
{/* Content panel */}
|
{/* Content panel */}
|
||||||
{props.contentPanel ? (
|
{props.contentPanel ? (
|
||||||
<div
|
<div
|
||||||
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll ${contentPanelClass}`}
|
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm] ${contentPanelClass}`}
|
||||||
>
|
>
|
||||||
{props.contentPanel}
|
{props.contentPanel}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="top-0 left-0 right-0 bottom-20 overflow-y-scroll fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0 opacity-40">
|
<div className="top-0 left-0 right-0 bottom-20 overflow-y-scroll fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0 bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
|
||||||
<div className="grid place-content-center h-full">
|
<div className="grid place-content-center h-full">
|
||||||
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9">
|
<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">
|
||||||
<p className="text-4xl">❮</p>
|
<p className="text-4xl">❮</p>
|
||||||
<p className="text-2xl w-64">
|
<p className="text-2xl w-64">
|
||||||
Select one of the options in the sidebar
|
Select one of the options in the sidebar
|
||||||
|
@ -122,7 +122,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
{/* Sub panel */}
|
{/* Sub panel */}
|
||||||
{props.subPanel ? (
|
{props.subPanel ? (
|
||||||
<div
|
<div
|
||||||
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black top-0 bottom-0 right-0 left-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300
|
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
|
||||||
${
|
${
|
||||||
turnSubIntoContent
|
turnSubIntoContent
|
||||||
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
|
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
|
||||||
|
@ -139,7 +139,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
|
|
||||||
{/* Main panel */}
|
{/* Main panel */}
|
||||||
<div
|
<div
|
||||||
className={`${mainPanelClass} border-r-[1px] border-black top-0 bottom-0 left-0 right-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20
|
className={`${mainPanelClass} border-r-[1px] border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
|
||||||
${mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
|
${mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
|
||||||
>
|
>
|
||||||
<MainPanel langui={props.langui} />
|
<MainPanel langui={props.langui} />
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default function LibraryContentPreview(
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
|
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
|
||||||
)}
|
)}
|
||||||
<div className="linearbg-1 fine:drop-shadow-dark-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 text-left">
|
<div className="linearbg-1 fine:drop-shadow-dark-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">
|
||||||
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
||||||
{item.type ? (
|
{item.type ? (
|
||||||
<Chip>
|
<Chip>
|
||||||
|
|
|
@ -48,7 +48,7 @@ export default function LibraryItemsPreview(
|
||||||
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
|
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2 text-left">
|
<div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
||||||
{item.metadata && item.metadata.length > 0 ? (
|
{item.metadata && item.metadata.length > 0 ? (
|
||||||
<div className="flex flex-row gap-1">
|
<div className="flex flex-row gap-1">
|
||||||
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
||||||
|
|
|
@ -9,7 +9,7 @@ type ScenBreakProps = {
|
||||||
export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<Markdown
|
<Markdown
|
||||||
className={`prose text-black ${props.className}`}
|
className={`prose prose-p:text-justify text-black ${props.className}`}
|
||||||
options={{
|
options={{
|
||||||
overrides: {
|
overrides: {
|
||||||
hr: {
|
hr: {
|
||||||
|
|
|
@ -13,11 +13,11 @@ export default function ContentPanel(props: ContentPanelProps): JSX.Element {
|
||||||
const width = props.width ? props.width : ContentPanelWidthSizes.default;
|
const width = props.width ? props.width : ContentPanelWidthSizes.default;
|
||||||
const widthCSS =
|
const widthCSS =
|
||||||
width === ContentPanelWidthSizes.default ? "max-w-[45rem]" : "w-full";
|
width === ContentPanelWidthSizes.default ? "max-w-[45rem]" : "w-full";
|
||||||
const prose = props.autoformat ? "prose" : "";
|
const prose = props.autoformat ? "prose text-justify" : "";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
|
<div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
|
||||||
<main className={`${prose} ${widthCSS} place-self-center text-justify`}>
|
<main className={`${prose} ${widthCSS} place-self-center`}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -154,7 +154,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{item.descriptions.length > 0 ? (
|
{item.descriptions.length > 0 ? (
|
||||||
<p>{item.descriptions[0].description}</p>
|
<p className="text-justify">{item.descriptions[0].description}</p>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
|
@ -190,7 +190,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="details"
|
id="details"
|
||||||
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
|
className="bg-mid w-full grid place-items-center p-8 rounded-2xl text-left"
|
||||||
>
|
>
|
||||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
||||||
<h2 className="text-2xl text-center">
|
<h2 className="text-2xl text-center">
|
||||||
|
@ -271,12 +271,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<div className="grid grid-cols-2 w-full place-content-between">
|
<div className="grid grid-cols-2 w-full place-content-between">
|
||||||
{item.metadata[0].__typename === "ComponentMetadataBooks" ? (
|
{item.metadata[0].__typename === "ComponentMetadataBooks" ? (
|
||||||
<>
|
<>
|
||||||
<div className="grid place-content-start grid-flow-col gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.global_pages}:</p>
|
<p className="font-bold">{langui.global_pages}:</p>
|
||||||
<p>{item.metadata[0].page_count}</p>
|
<p>{item.metadata[0].page_count}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid place-content-start grid-flow-col gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.global_binding}:</p>
|
<p className="font-bold">{langui.global_binding}:</p>
|
||||||
<p>
|
<p>
|
||||||
{item.metadata[0].binding_type ===
|
{item.metadata[0].binding_type ===
|
||||||
|
@ -289,7 +289,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid place-content-start grid-flow-col gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.global_page_order}:</p>
|
<p className="font-bold">{langui.global_page_order}:</p>
|
||||||
<p>
|
<p>
|
||||||
{item.metadata[0].page_order ===
|
{item.metadata[0].page_order ===
|
||||||
|
@ -302,7 +302,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid place-content-start grid-flow-col gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.global_languages}:</p>
|
<p className="font-bold">{langui.global_languages}:</p>
|
||||||
{item.metadata[0].languages.data.map((lang) => (
|
{item.metadata[0].languages.data.map((lang) => (
|
||||||
<p key={lang.attributes.code}>
|
<p key={lang.attributes.code}>
|
||||||
|
@ -323,7 +323,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
) : item.metadata[0].__typename ===
|
) : item.metadata[0].__typename ===
|
||||||
"ComponentMetadataOther" ? (
|
"ComponentMetadataOther" ? (
|
||||||
<>
|
<>
|
||||||
<div className="grid place-content-start grid-flow-col gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.global_type}:</p>
|
<p className="font-bold">{langui.global_type}:</p>
|
||||||
<Chip>
|
<Chip>
|
||||||
{item.metadata[0].subtype.data.attributes.titles
|
{item.metadata[0].subtype.data.attributes.titles
|
||||||
|
@ -389,11 +389,11 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<div
|
<div
|
||||||
id={content.attributes.slug}
|
id={content.attributes.slug}
|
||||||
key={content.id}
|
key={content.id}
|
||||||
className="grid gap-2 px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2"
|
className="grid gap-2 px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2 target:[--displaySubContentMenu:grid] [--displaySubContentMenu:none]"
|
||||||
>
|
>
|
||||||
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
|
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
|
||||||
<a href={`#${content.attributes.slug}`}>
|
<a href={`#${content.attributes.slug}`}>
|
||||||
<h3 className="text-left">
|
<h3>
|
||||||
{content.attributes.content.data &&
|
{content.attributes.content.data &&
|
||||||
content.attributes.content.data.attributes.titles
|
content.attributes.content.data.attributes.titles
|
||||||
.length > 0
|
.length > 0
|
||||||
|
@ -439,6 +439,36 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="grid-flow-col place-content-start place-items-center gap-2 [display:var(--displaySubContentMenu)]">
|
||||||
|
<span className="material-icons text-dark">
|
||||||
|
subdirectory_arrow_right
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{content.attributes.scan_set.length > 0 ? (
|
||||||
|
<Button
|
||||||
|
href={`/library/content/${content.attributes.content.data.attributes.slug}/scans/`}
|
||||||
|
>
|
||||||
|
{langui.library_item_view_scans}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
|
||||||
|
{content.attributes.content.data ? (
|
||||||
|
<Button
|
||||||
|
href={`/library/content/${content.attributes.content.data.attributes.slug}`}
|
||||||
|
>
|
||||||
|
{langui.library_item_open_content}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
|
||||||
|
{content.attributes.scan_set.length === 0 &&
|
||||||
|
!content.attributes.content.data
|
||||||
|
? "The content is not available"
|
||||||
|
: ""}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,6 +21,9 @@ module.exports = {
|
||||||
coarse: { raw: "(pointer: coarse)" },
|
coarse: { raw: "(pointer: coarse)" },
|
||||||
fine: { raw: "(pointer: fine)" },
|
fine: { raw: "(pointer: fine)" },
|
||||||
},
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
paper: "url('/paper_white.webp')",
|
||||||
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@tailwindcss/typography"),
|
require("@tailwindcss/typography"),
|
||||||
|
|
Loading…
Reference in New Issue