Improvements here and there

design.config.js

@@ -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,
   },
 };
 

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/AppLayout.tsx

@@ -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>

src/components/Inputs/Button.tsx

@@ -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
+      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]
+      place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] pb-[0.5rem]
-      pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${
+      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} />}
+      {icon && <Ico className="translate-y-[0.04em] !text-base" icon={icon} />}
-      {text && <p className="-translate-y-[0.05em]">{text}</p>}
+      {text && <p className="-translate-y-[0.05em] text-center">{text}</p>}
     </div>
   );
 

src/components/Inputs/ButtonGroup.tsx

@@ -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>
+  );
+}

src/components/Panels/MainPanel.tsx

@@ -21,8 +21,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
 
   return (
     <div
-      className={`flex flex-col content-start justify-center
+      className={`grid content-start justify-center gap-y-2 p-8 text-center ${
-      justify-items-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]
+            className="group grid grid-flow-col place-content-center gap-1 transition-[filter]"
-            hover:[--theme-color-black:var(--theme-color-dark)]"
             href="https://creativecommons.org/licenses/by-sa/4.0/"
           >
             <div
-              className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
+              className="aspect-square w-6 bg-black transition-colors
-               ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]"
+              [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: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>

src/components/PreviewCard.tsx

@@ -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
+        className="group grid cursor-pointer items-end transition-transform drop-shadow-shade-xl
-        drop-shadow-shade-xl [--bg-opacity:0] [--play-opacity:0]
+        hover:scale-[1.02]"
-        [--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]"
       >
         {stackNumber > 0 && (
           <>
             <div
-              className={`absolute inset-0 -top-[var(--stacked-top)*2.1rem]
+              className={`absolute inset-0 scale-[.85] overflow-hidden bg-light brightness-[0.8]
-              scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden ${
+              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]
+              className={`absolute inset-0 overflow-hidden bg-light brightness-[0.9] sepia-[0.2]
-              scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden ${
+              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={
+              className={`${
-                thumbnailRounded
+                thumbnailRounded &&
-                  ? keepInfoVisible
+                (keepInfoVisible
-                    ? "rounded-t-md"
+                  ? "rounded-t-md"
-                    : "rounded-md notHoverable:rounded-b-none"
+                  : "rounded-md notHoverable:rounded-b-none")
-                  : undefined
+              } ${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
+                  className="absolute inset-0 grid place-content-center bg-shade bg-opacity-0
-                  bg-shade bg-opacity-[var(--bg-opacity)] text-light
+                  text-light transition-colors drop-shadow-shade-lg group-hover:bg-opacity-50"
-                  transition-colors drop-shadow-shade-lg"
                 >
                   <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)]
+            `-inset-x-0.5 bottom-2 opacity-0 group-hover:opacity-100 hoverable:absolute
-              hoverable:absolute hoverable:drop-shadow-shade-lg notHoverable:rounded-b-md`
+            hoverable:drop-shadow-shade-lg notHoverable:rounded-b-md`
-          } z-20 grid gap-2 p-4 transition-opacity`}
+          }`}
         >
           {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}
     />
   );

src/pages/_app.tsx

@@ -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";

src/pages/contents/index.tsx

@@ -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

src/pages/dev/editor.tsx

@@ -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"
           />

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

@@ -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
-                  <div className="flex flex-row flex-wrap place-items-start gap-4">
+                  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
+              className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]
-              gap-8 mobile:grid-cols-2"
+              items-end gap-8 mobile:grid-cols-2 thin:grid-cols-1"
             >
               {item.subitems.data.map((subitem) => (
                 <Fragment key={subitem.id}>

src/pages/library/index.tsx

@@ -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,

src/pages/news/index.tsx

@@ -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,

src/tailwind.css

@@ -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;

tailwind.config.js

@@ -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,
         },
       });
     }),