multple small improvement

src/components/Button.tsx

@@ -9,11 +9,7 @@ type ButtonProps = {
 export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <div
-      className={
-        "grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 pt-[0.4rem] pb-[0.5rem] transition-colors hover:text-light hover:bg-dark" +
-        " " +
-        props.className
-      }
+      className={`grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 pt-[0.4rem] pb-[0.5rem] transition-all hover:text-light hover:bg-dark hover:drop-shadow-dark-lg active:bg-black active:drop-shadow-black-lg active:border-black ${props.className}`}
     >
       {props.children}
     </div>

src/components/PanelComponents/NavOption.tsx

@@ -12,9 +12,10 @@ type NavOptionProps = {
 export default function NavOption(props: NavOptionProps): JSX.Element {
   const router = useRouter();
   const isActive = router.asPath.startsWith(props.url);
-  const divActive = "bg-mid";
-  const border = "border-2 border-mid";
-  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${
+  const divActive = "bg-mid shadow-inner-sm shadow-dark";
+  const border =
+    "outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]";
+  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-dark active:shadow-inner active:shadow-dark transition-all ${
     props.border ? border : ""
   } ${isActive ? divActive : ""}`;
 

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

@@ -126,7 +126,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
 
         <div
           id="summary"
-          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 shadow-inner-sm shadow-dark"
         >
           <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
             {item.subitem_of.data.length > 0 ? (
@@ -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 text-left"
+          className="bg-mid w-full grid place-items-center p-8 rounded-2xl text-left shadow-inner-sm shadow-dark"
         >
           <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
             <h2 className="text-2xl text-center">
@@ -389,7 +389,7 @@ 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 target:[--displaySubContentMenu:grid] [--displaySubContentMenu:none]"
+                  className="grid gap-2 px-4 rounded-lg target:bg-mid target:shadow-inner-sm target:shadow-dark 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}`}>

tailwind.config.js

@@ -22,8 +22,13 @@ module.exports = {
       fine: { raw: "(pointer: fine)" },
     },
     backgroundImage: {
-      paper: "url('/paper_white.webp')",
-    }
+      paper: "url('/paper.webp')",
+    },
+    extend: {
+      boxShadow: {
+        "inner-sm": "inset 0 1px 4px -2px",
+      },
+    },
   },
   plugins: [
     require("@tailwindcss/typography"),
@@ -65,7 +70,7 @@ module.exports = {
       addUtilities({
         ".drop-shadow-dark-lg": {
           filter:
-            "drop-shadow(0 10px 8px rgb(156 102 68 / 0.2)) drop-shadow(0 4px 3px rgb(156 102 68 / 0.8))",
+            "drop-shadow(0 10px 8px rgb(156 102 68 / 0.2)) drop-shadow(0 4px 3px rgb(156 102 68 / 0.4))",
         },
         ".drop-shadow-dark-xl": {
           filter:
@@ -74,6 +79,18 @@ module.exports = {
         ".drop-shadow-dark-2xl": {
           filter: "drop-shadow(0 25px 25px rgb(156 102 68 / 0.8))",
         },
+        
+        ".drop-shadow-black-lg": {
+          filter:
+            "drop-shadow(0 10px 8px rgb(27 24 17 / 0.2)) drop-shadow(0 4px 3px rgb(27 24 17 / 0.4))",
+        },
+        ".drop-shadow-black-xl": {
+          filter:
+            "drop-shadow(0 20px 13px rgb(27 24 17 / 0.25)) drop-shadow(0 8px 5px rgb(27 24 17 / 0.7))",
+        },
+        ".drop-shadow-black-2xl": {
+          filter: "drop-shadow(0 25px 25px rgb(27 24 17 / 0.8))",
+        },
       });
     }),