Renamed component

src/components/AppLayout/components/AppLayoutTitle.astro

@@ -11,11 +11,17 @@ const { title, subtitle, pretitle } = Astro.props;
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <h1 class="high-contrast-text">
-  {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
+  {
-  <span id="title" class="font-serif">{title}&nbsp;</span>
+    pretitle && (
+      <span id="pretitle" class="font-2xl">
+        {pretitle}&nbsp;
+      </span>
+    )
+  }
+  <span class="font-serif font-5xl">{title}&nbsp;</span>
   {
     subtitle && (
-      <span id="subtitle" class="font-serif">
+      <span id="subtitle" class="font-serif font-2xl">
         {subtitle}
       </span>
     )
@@ -27,22 +33,18 @@ const { title, subtitle, pretitle } = Astro.props;
 <style>
   h1 {
     line-height: 0.8;
-    display: grid;
-    font-size: clamp(1em, 0.7em + 1.5vw, 2em);
 
     & > #pretitle {
       font-variation-settings: "wght" 430;
       margin-bottom: 0.8em;
     }
 
-    & > #title {
+    & > #subtitle {
-      font-variation-settings: "wght" 900;
+      margin-top: 0.5em;
-      font-size: 200%;
     }
 
-    & > #subtitle {
+    & > span {
-      font-variation-settings: "wght" 700;
+      display: block;
-      margin-top: 0.5em;
     }
   }
 </style>

src/pages/[locale]/_components/LibraryGrid.astro

@@ -1,5 +1,5 @@
 ---
-import CategoryCard from "./CategoryCard.astro";
+import LibraryCard from "./LibraryCard.astro";
 import { getI18n } from "src/i18n/i18n";
 import { cache } from "src/utils/payload";
 
@@ -10,7 +10,7 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
 
 {
   cache.config.home.folders.map(({ slug, translations, darkThumbnail, lightThumbnail }) => (
-    <CategoryCard
+    <LibraryCard
       img={
         darkThumbnail && lightThumbnail ? { dark: darkThumbnail, light: lightThumbnail } : undefined
       }