added paper texture + fixed problem with text always being justified

src/components/AppLayout.tsx

@@ -63,7 +63,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       </Head>
 
       {/* 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
           id="navbar-main-button"
           className="material-icons mt-[.1em] cursor-pointer"
@@ -87,14 +87,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       {/* Content panel */}
       {props.contentPanel ? (
         <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}
         </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="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-2xl w-64">
                 Select one of the options in the sidebar
@@ -122,7 +122,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       {/* Sub panel */}
       {props.subPanel ? (
         <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
               ? "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 */}
       <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"}`}
       >
         <MainPanel langui={props.langui} />

src/components/Library/LibraryContentPreview.tsx

@@ -33,7 +33,7 @@ export default function LibraryContentPreview(
         ) : (
           <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">
             {item.type ? (
               <Chip>

src/components/Library/LibraryItemsPreview.tsx

@@ -48,7 +48,7 @@ export default function LibraryItemsPreview(
           <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 ? (
             <div className="flex flex-row gap-1">
               <Chip>{prettyItemSubType(item.metadata[0])}</Chip>

src/components/Markdown/Markdawn.tsx

@@ -9,7 +9,7 @@ type ScenBreakProps = {
 export default function Markdawn(props: ScenBreakProps): JSX.Element {
   return (
     <Markdown
-      className={`prose text-black ${props.className}`}
+      className={`prose prose-p:text-justify text-black ${props.className}`}
       options={{
         overrides: {
           hr: {

src/components/Panels/ContentPanel.tsx

@@ -13,11 +13,11 @@ export default function ContentPanel(props: ContentPanelProps): JSX.Element {
   const width = props.width ? props.width : ContentPanelWidthSizes.default;
   const widthCSS =
     width === ContentPanelWidthSizes.default ? "max-w-[45rem]" : "w-full";
-  const prose = props.autoformat ? "prose" : "";
+  const prose = props.autoformat ? "prose text-justify" : "";
 
   return (
     <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}
       </main>
     </div>

src/pages/library/items/[slug].tsx

@@ -154,7 +154,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               )}
             </div>
             {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
           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">
             <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">
                   {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>{item.metadata[0].page_count}</p>
                       </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>
                           {item.metadata[0].binding_type ===
@@ -289,7 +289,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                         </p>
                       </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>
                           {item.metadata[0].page_order ===
@@ -302,7 +302,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                         </p>
                       </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>
                         {item.metadata[0].languages.data.map((lang) => (
                           <p key={lang.attributes.code}>
@@ -323,7 +323,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                   ) : item.metadata[0].__typename ===
                     "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>
                         <Chip>
                           {item.metadata[0].subtype.data.attributes.titles
@@ -389,11 +389,11 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 <div
                   id={content.attributes.slug}
                   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]">
                     <a href={`#${content.attributes.slug}`}>
-                      <h3 className="text-left">
+                      <h3>
                         {content.attributes.content.data &&
                         content.attributes.content.data.attributes.titles
                           .length > 0
@@ -439,6 +439,36 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                       ""
                     )}
                   </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>

tailwind.config.js

@@ -21,6 +21,9 @@ module.exports = {
       coarse: { raw: "(pointer: coarse)" },
       fine: { raw: "(pointer: fine)" },
     },
+    backgroundImage: {
+      paper: "url('/paper_white.webp')",
+    }
   },
   plugins: [
     require("@tailwindcss/typography"),