Many, many changes related to fonts and spacing

README.md

@@ -156,7 +156,6 @@ A parallax effect is applied on the webpages' background image. This effect can
 ## CSS Global Variables
 
 - `--color-base-X`: the current theme colors. X can be between 0 and 1000, available in increments of 50.
-- `--font-serif`: by default, everything use sans-serif. Use this variable to make the font serif.
 
 ## Translations
 

TODO.md

@@ -3,13 +3,17 @@
 ## Ongoing
 
 - [Analytics] Add analytics
+- [Tooltips] Tooltip in under next element (example in timeline)
+- [Language override] Maso actor is not focusable with keyboard nav
 
 ## Short term
 
+- [Timeline] Improve layout/spacing on mobile
 - Display if a content has a source language
 - [JSLess] Display if a content is available in more than one language
 - Number of audio players seems limited (on Chrome and Firefox)
 - [RichTextContent] Handle relationship
+- [Component] Make a metadata title component (combine with collectible custom info and table of content)
 - [RichTextContent] Add autolink block support
 
 ## Mid term
@@ -25,6 +29,8 @@
 
 ## Long term
 
+- [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts
+- [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
 - Try using CSS instead of JS for parallax effect
 - More data caching between the CMS and Astro
 - [Folders] Support for nameless section

public/site.webmanifest

@@ -27,38 +27,5 @@
 
   "name": "Accord's Library",
   "short_name": "Accord's Lib",
-  "start_url": ".",
+  "start_url": "."
-
-  "shortcuts": [
-    {
-      "name": "Library",
-      "url": "/library",
-      "description": "Browse all physical and digital media"
-    },
-    {
-      "name": "Contents",
-      "url": "/contents",
-      "description": "Explore all content and filter by type or category"
-    },
-    {
-      "name": "Wiki",
-      "url": "/wiki",
-      "description": "An encyclopedia for everything related to DrakeNieR"
-    },
-    {
-      "name": "Chronicles",
-      "url": "/chronicles",
-      "description": "Experience all events and content in chronological order"
-    },
-    {
-      "name": "News",
-      "url": "/news",
-      "description": "All the latest info"
-    },
-    {
-      "name": "Gallery",
-      "url": "/gallery",
-      "description": "Thousands of offcial artworks"
-    }
-  ]
 }

src/components/AppLayout/components/AppLayoutTitle.astro

@@ -12,8 +12,14 @@ const { title, subtitle, pretitle } = Astro.props;
 
 <h1 class="high-contrast-text">
   {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
-  <span id="title">{title}&nbsp;</span>
+  <span id="title" class="font-serif">{title}&nbsp;</span>
-  {subtitle && <span id="subtitle">{subtitle}</span>}
+  {
+    subtitle && (
+      <span id="subtitle" class="font-serif">
+        {subtitle}
+      </span>
+    )
+  }
 </h1>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
@@ -22,22 +28,19 @@ const { title, subtitle, pretitle } = Astro.props;
   h1 {
     line-height: 0.8;
     display: grid;
-    overflow-wrap: anywhere;
     font-size: clamp(1em, 0.7em + 1.5vw, 2em);
 
     & > #pretitle {
-      font-family: var(--font-sans-serifs);
       font-variation-settings: "wght" 430;
       margin-bottom: 0.8em;
     }
 
     & > #title {
-      font-family: var(--font-serif);
+      font-variation-settings: "wght" 900;
       font-size: 200%;
     }
 
     & > #subtitle {
-      font-family: var(--font-serif);
       font-variation-settings: "wght" 700;
       margin-top: 0.5em;
     }

src/components/AppLayout/components/Footer.astro

@@ -29,48 +29,39 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
 <footer>
   {
     withLinks && (
-      <div id="nav" class="when-no-print">
+      <div id="socials" class="when-no-print">
-        <p class="font-serif">{t("global.siteName")}</p>
+        <a href="/discord" class="pressable-label" aria-label={discordLabel} title={discordLabel}>
-        <div>
+          <Icon name="discord-brands" />
-          <a class="pressable-label" href="/">
+          <p class="font-s">{t("footer.socials.discord.title")}</p>
-            <Icon name="accords" />
-            <p>{t("footer.links.home.title")}</p>
         </a>
-          <a class="pressable-label DEV_TODO" href="/archives">
+        <a
-            <Icon name="material-symbols:browse" />
+          href="https://twitter.com/AccordsLibrary"
-            <p>{"Contents"}</p>
+          class="pressable-label"
+          aria-label={twitterLabel}
+          title={twitterLabel}>
+          <Icon name="x-brands" />
+          <p class="font-s">{t("footer.socials.twitter.title")}</p>
         </a>
-          <a class="pressable-label DEV_TODO" href="/chronicles">
+        <a
-            <Icon name="material-symbols:book-2" />
+          href="https://github.com/Accords-Library"
-            <p>{"Chronicles"}</p>
+          class="pressable-label"
+          aria-label={githubLabel}
+          title={githubLabel}>
+          <Icon name="github-brands" />
+          <p class="font-s">{t("footer.socials.github.title")}</p>
         </a>
-          <a class="pressable-label DEV_TODO" href="/changelog">
+
-            <Icon name="material-symbols:history" />
+        <a href="/contact" class="pressable-label" aria-label={contactLabel} title={contactLabel}>
-            <p>{"Changelog"}</p>
+          <Icon name="material-symbols:mail-outline" />
+          <p class="font-s">{t("footer.socials.contact.title")}</p>
         </a>
-          <a class="pressable-label" href="/timeline">
-            <Icon name="material-symbols:calendar-month" />
-            <p>{t("footer.links.timeline.title")}</p>
-          </a>
-          <a class="pressable-label" href="https://gallery.accords-library.com/posts">
-            <Icon name="material-symbols:perm-media" />
-            <p>{t("footer.links.gallery.title")}</p>
-          </a>
-          <a class="pressable-label DEV_TODO" href="/videos">
-            <Icon name="material-symbols:movie" />
-            <p>{t("footer.links.videos.title")}</p>
-          </a>
-          <a class="pressable-label DEV_TODO" href="/archives">
-            <Icon name="material-symbols:folder-zip" />
-            <p>{t("footer.links.webArchives.title")}</p>
-          </a>
-        </div>
       </div>
     )
   }
-  <div id="license" class:list={{ "with-links": withLinks }}>
+
-    <div id="license-section">
+  <div id="copylicense" class:list={{ "with-border": withLinks }}>
-      <p set:html={t("footer.license.description")} />
+    <div id="license">
+      <p class="font-s" set:html={t("footer.license.description")} />
       <a
         href="https://creativecommons.org/licenses/by-sa/4.0/"
         id="common-creative"
@@ -83,39 +74,8 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
       </a>
     </div>
 
-    {
+    <div id="copyright" class="font-s" set:html={t("footer.disclaimer")} />
-      withLinks && (
-        <div id="socials" class="when-no-print">
-          <a href="/discord" class="pressable-icon" aria-label={discordLabel} title={discordLabel}>
-            <Icon name="discord-brands" />
-          </a>
-          <a
-            href="https://twitter.com/AccordsLibrary"
-            class="pressable-icon"
-            aria-label={twitterLabel}
-            title={twitterLabel}>
-            <Icon name="x-brands" />
-          </a>
-          <a
-            href="https://github.com/Accords-Library"
-            class="pressable-icon"
-            aria-label={githubLabel}
-            title={githubLabel}>
-            <Icon name="github-brands" />
-          </a>
-
-          <a
-            href="/contact"
-            class="pressable-icon DEV_TODO"
-            aria-label={contactLabel}
-            title={contactLabel}>
-            <Icon name="material-symbols:mail-outline" />
-          </a>
   </div>
-      )
-    }
-  </div>
-  <div id="copyright" set:html={t("footer.disclaimer")} />
 </footer>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
@@ -124,158 +84,96 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
   footer {
     border-top: 0.1em solid var(--color-base-1000);
     padding-block: 2em;
+
     display: flex;
     place-content: center;
+    place-items: center;
     gap: clamp(1.5em, 1.25em + 2vw, 4em);
-    font-size: 0.85em;
 
-    & > div {
+    @media (max-width: 720.5px) {
-      max-width: 20em;
+      flex-direction: column;
-      flex: 1;
-
-      @media (max-width: 35rem) {
-        max-width: unset;
-      }
-    }
-
-    & > #nav {
-      display: grid;
-      place-content: start;
-      flex: 1.5;
-
-      @media (max-width: 35rem) {
       place-items: center;
     }
 
-      & > p {
+    & > #socials {
-        font-variation-settings: "wght" 700;
+      flex-shrink: 0;
-        font-size: 1.2em;
-        white-space: pre;
-
-        @media (max-width: 35rem) {
-          font-size: clamp(1em, 8vw, 2.5em);
-        }
-      }
-
-      & > div {
       display: grid;
-        flex-direction: column;
+      grid-template-columns: auto auto;
-        place-items: start;
+      gap: 0.2em 1em;
-        margin-top: 0.8em;
+      place-content: start;
-        gap: 0.3em;
+      flex-grow: 1;
-        grid-template-columns: 1fr 1fr;
+
-        margin-left: -0.6em;
+      @media (min-width: 720.5px) {
+        max-width: 16rem;
+      }
+
+      @media (max-width: 720.5px) {
+        grid-template-columns: auto auto auto auto;
+      }
 
       @media (max-width: 35rem) {
-          gap: 0.25em 0.5em;
+        grid-template-columns: auto auto;
-          grid-template-columns: 1fr 1fr;
-          margin-top: 0.8em;
-          margin-left: unset;
-          font-size: 1.2em;
       }
 
-        @media (max-width: 22rem) {
+      & > a {
-          grid-template-columns: 1fr;
+        display: flex;
-          margin-top: 0.8em;
+
-          margin-left: unset;
+        & > p {
-          font-size: 1.2em;
+          font-variation-settings: "wght" 500;
         }
       }
     }
 
+    & > #copylicense {
+      display: flex;
+      place-content: center;
+      gap: clamp(1.5em, 1.25em + 2vw, 4em);
+      line-height: 1.2;
+
+      &.with-border {
+        @media (min-width: 720.5px) {
+          border-left: 0.1em solid var(--color-base-1000);
+          padding-left: 1em;
+        }
+      }
+
+      @media (max-width: 35rem) {
+        flex-direction: column;
+        place-items: center;
+        text-align: center;
+      }
+
       & > #license {
-      display: grid;
+        justify-self: end;
-      grid-template-areas: "license";
+        max-width: 18rem;
-      padding-left: 1em;
+
+        display: flex;
+        flex-direction: column;
 
         @media (max-width: 35rem) {
-        gap: 3em;
+          align-items: center;
         }
 
-      @media screen {
-        &.with-links {
-          border-left: 0.1em solid var(--color-base-1000);
-          grid-template-areas: "license" "socials";
-
-          @media (max-width: 35rem) {
-            grid-template-areas: "socials" "license";
-            border-left: unset;
-            padding-left: unset;
-          }
-        }
-      }
-
-      & > #license-section {
-        grid-area: license;
-        line-height: 1.2;
-
         & > #common-creative {
           display: flex;
           justify-content: flex-start;
-          gap: 0.2em;
+          gap: 0.25em;
-          margin-top: 0.5em;
+          margin-top: 0.8em;
           width: fit-content;
-
-          & > svg {
-            width: 1em;
-            height: 1em;
-          }
-
-          @media (max-width: 35rem) {
-            place-content: center;
-            gap: clamp(4px, 2vw, 8px);
-
-            & > svg {
-              width: clamp(1em, 6vw, 24px);
-              height: clamp(1em, 6vw, 24px);
-            }
-          }
-        }
-      }
-
-      & > #socials {
-        grid-area: socials;
-        display: flex;
-        gap: 1.5em;
-        margin-top: 24px;
-
-        & > a > svg {
-          width: 1.5em;
-          height: 1.5em;
-        }
-
-        @media (max-width: 35rem) {
-          place-content: center;
-          flex-wrap: wrap;
-          gap: clamp(24px, 8vw, 48px);
-
-          & > a > svg {
-            width: clamp(24px, 8vw, 48px);
-            height: clamp(24px, 8vw, 48px);
-          }
-        }
         }
       }
 
       & > #copyright {
+        max-width: 22rem;
         border-left: 0.1em solid var(--color-base-1000);
         padding-left: 1em;
-      line-height: 1.2;
+        flex-shrink: 1.1;
 
         @media (max-width: 35rem) {
           border: none;
           padding-left: unset;
         }
       }
-
-    @media (max-width: 35rem) {
-      flex-direction: column;
-      text-align: center;
-      align-items: center;
-
-      & > div {
-        max-width: unset;
-      }
     }
   }
 </style>

src/components/AppLayout/components/Html.astro

@@ -58,7 +58,17 @@ const { currentTheme } = Astro.locals;
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/css/tippy.css" fetchpriority="low" />
+
+    <link
+      rel="preload"
+      href="/css/tippy.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript>
+      <link rel="stylesheet" href="/css/tippy.css" />
+    </noscript>
+
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
     <link rel="manifest" href="/site.webmanifest" />
@@ -138,7 +148,61 @@ const { currentTheme } = Astro.locals;
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style is:global>
+  /* RESET */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  button,
+  body,
   html {
+    padding: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  a:has(> img) {
+    display: block;
+    width: fit-content;
+  }
+
+  button {
+    background-color: initial;
+    border: initial;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: initial;
+  }
+
+  /* LIGHT/DARK THEME */
+
+  html,
+  .light-theme {
     --color-base-0: #ffffff;
     --color-base-50: #fffaf3;
     --color-base-100: #fff4e6;
@@ -166,7 +230,7 @@ const { currentTheme } = Astro.locals;
     --color-elevation-1: var(--color-base-125);
     --color-elevation-0: var(--color-base-150);
 
-    --color-shadow: var(--color-base-500);
+    --color-shadow-0: var(--color-base-500);
     --color-shadow-1: var(--color-base-350);
     --color-shadow-2: var(--color-base-300);
 
@@ -175,20 +239,21 @@ const { currentTheme } = Astro.locals;
     --texture-dots: url(/img/paper-dots.webp);
     --texture-dots-blend: multiply;
 
-    & .when-light-theme {
-      display: initial !important;
-    }
-
-    & .when-dark-theme {
-      display: none !important;
-    }
-
     * {
       color-scheme: only light;
     }
 
+    color: var(--color-base-1000);
+  }
+
   @media screen {
-      &.dark-theme {
+    .light-theme {
+      & .when-dark-theme {
+        display: none !important;
+      }
+    }
+
+    .dark-theme {
       --color-base-1000: #ebeae7;
       --color-base-950: #eae5e0;
       --color-base-900: #e8dfd8;
@@ -216,9 +281,9 @@ const { currentTheme } = Astro.locals;
       --color-elevation-1: var(--color-base-175);
       --color-elevation-0: var(--color-base-150);
 
-        --color-shadow: var(--color-base-0);
+      --color-shadow-0: var(--color-base-0);
-        --color-shadow-1: var(--color-base-0);
+      --color-shadow-1: var(--color-base-50);
-        --color-shadow-2: var(--color-base-50);
+      --color-shadow-2: var(--color-base-100);
 
       --color-critical-error: red;
 
@@ -229,17 +294,15 @@ const { currentTheme } = Astro.locals;
         display: none !important;
       }
 
-        & .when-dark-theme {
-          display: initial !important;
-        }
-
       * {
         color-scheme: only dark;
       }
+
+      color: var(--color-base-1000);
     }
 
-      &:not(.manual-theme) {
     @media (prefers-color-scheme: dark) {
+      html:not(.manual-theme) {
         --color-base-1000: #ebeae7;
         --color-base-950: #eae5e0;
         --color-base-900: #e8dfd8;
@@ -263,12 +326,11 @@ const { currentTheme } = Astro.locals;
         --color-base-50: #11110d;
         --color-base-0: #000000;
 
-          --color-elevation-3: var(--color-base-150);
         --color-elevation-2: var(--color-base-200);
         --color-elevation-1: var(--color-base-175);
         --color-elevation-0: var(--color-base-150);
 
-          --color-shadow: var(--color-base-0);
+        --color-shadow-0: var(--color-base-0);
         --color-shadow-1: var(--color-base-0);
         --color-shadow-2: var(--color-base-50);
 
@@ -281,14 +343,11 @@ const { currentTheme } = Astro.locals;
           display: none !important;
         }
 
-          & .when-dark-theme {
-            display: initial !important;
-          }
-
         * {
           color-scheme: only dark;
         }
-        }
+
+        color: var(--color-base-1000);
       }
     }
   }
@@ -313,26 +372,14 @@ const { currentTheme } = Astro.locals;
     font-display: swap;
   }
 
-  html {
+  html,
+  body {
+    font-family: "Murecho Variable", sans-serif;
     font-variation-settings: "wght" 430;
-  }
+    font-variant-numeric: tabular-nums;
-
+    line-height: 1;
-  h1 {
+    text-size-adjust: 100%;
-    font-variation-settings: "wght" 900;
+    font-size: 16px;
-  }
-
-  h2 {
-    font-variation-settings: "wght" 800;
-  }
-
-  h3,
-  h4 {
-    font-variation-settings: "wght" 700;
-  }
-
-  h5,
-  h6 {
-    font-variation-settings: "wght" 600;
   }
 
   strong {
@@ -345,14 +392,118 @@ const { currentTheme } = Astro.locals;
 
   .font-serif {
     font-family: "Vollkorn Variable", serif;
+    letter-spacing: -0.055em;
   }
 
   :root {
-    --font-serif: "Vollkorn Variable", serif;
+    --font-size-xs: 0.75rem;
+    --font-size-s: 0.875rem;
+    --font-size-m: 1rem;
+    --font-size-l: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.5rem;
+    --font-size-5xl: 4rem;
+  }
+
+  html,
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: var(--font-size-m);
+  }
+
+  .font-xs {
+    font-size: var(--font-size-xs);
+    font-variation-settings: "wght" 430;
+  }
+
+  .font-s {
+    font-size: var(--font-size-s);
+    font-variation-settings: "wght" 400;
+  }
+
+  .font-m {
+    font-size: var(--font-size-m);
+    font-variation-settings: "wght" 400;
+
+    &.font-serif {
+      letter-spacing: -0.015em;
+    }
+  }
+
+  .font-l {
+    font-size: var(--font-size-l);
+    font-variation-settings: "wght" 500;
+
+    &.font-serif {
+      letter-spacing: -0.015em;
+    }
+  }
+
+  .font-xl {
+    font-size: var(--font-size-xl);
+    font-variation-settings: "wght" 600;
+
+    &.font-serif {
+      font-variation-settings: "wght" 700;
+      letter-spacing: -0.04em;
+    }
+  }
+
+  .font-2xl {
+    font-size: var(--font-size-2xl);
+    font-variation-settings: "wght" 700;
+    &.font-serif {
+      font-variation-settings: "wght" 750;
+      letter-spacing: -0.04em;
+    }
+  }
+
+  .font-3xl {
+    font-size: var(--font-size-3xl);
+    font-variation-settings: "wght" 750;
+    &.font-serif {
+      font-variation-settings: "wght" 800;
+      letter-spacing: -0.045em;
+    }
+  }
+
+  .font-4xl {
+    font-size: var(--font-size-4xl);
+    font-variation-settings: "wght" 800;
+
+    &.font-serif {
+      font-variation-settings: "wght" 850;
+      letter-spacing: -0.05em;
+    }
+  }
+
+  .font-5xl {
+    font-size: var(--font-size-5xl);
+    font-variation-settings: "wght" 900;
   }
 
   /* THEMING */
 
+  a,
+  button {
+    &:focus-visible {
+      outline: 3px solid var(--color-base-1000);
+      outline-offset: unset;
+    }
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-base-650) transparent;
+  }
+
   *::selection {
     color: var(--color-elevation-0);
     background: var(--color-base-600);
@@ -370,7 +521,6 @@ const { currentTheme } = Astro.locals;
 
   html {
     position: relative;
-    color: var(--color-base-1000);
     min-height: 100vb;
     display: flex;
 
@@ -387,36 +537,6 @@ const { currentTheme } = Astro.locals;
     background-color: transparent;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  button,
-  html {
-    padding: 0;
-    margin: 0;
-  }
-
-  button {
-    background-color: unset;
-    font-size: 1em;
-    border: unset;
-  }
-
-  button,
-  body {
-    font-family: "Murecho Variable", sans-serif;
-    line-height: 1;
-  }
-
-  a {
-    color: unset;
-    text-decoration: unset;
-  }
-
   p {
     & a {
       transition-duration: 150ms;
@@ -497,11 +617,6 @@ const { currentTheme } = Astro.locals;
       background-color: var(--color-base-250);
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
-
     &:active {
       background-color: var(--color-base-300);
     }
@@ -510,6 +625,7 @@ const { currentTheme } = Astro.locals;
   .pressable {
     --foreground-color: var(--color-base-650);
     color: var(--foreground-color);
+    outline-color: var(--foreground-color);
     border: 0.1rem solid var(--foreground-color);
     backdrop-filter: blur(10px);
 
@@ -523,11 +639,6 @@ const { currentTheme } = Astro.locals;
       background-color: var(--color-elevation-1);
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--foreground-color);
-      outline-offset: unset;
-    }
-
     &:active {
       transition-duration: 75ms;
       --foreground-color: var(--color-base-1000);
@@ -545,7 +656,6 @@ const { currentTheme } = Astro.locals;
   }
 
   .prose {
-    font-size: 16px;
     line-height: 1.75;
     max-width: 35rem;
 
@@ -570,18 +680,6 @@ const { currentTheme } = Astro.locals;
       }
     }
 
-    > h2 {
-      font-size: 32px;
-    }
-
-    > h3 {
-      font-size: 24px;
-    }
-
-    > h4 {
-      font-size: 18px;
-    }
-
     > h2,
     > h3,
     > h4,
@@ -601,11 +699,6 @@ const { currentTheme } = Astro.locals;
     }
   }
 
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-base-650) transparent;
-  }
-
   .DEV_TODO {
     display: none !important;
     visibility: none !important;

src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro

@@ -53,7 +53,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
     > div {
       display: flex;
       flex-direction: column;
-      gap: 0.5em;
+      gap: 0.8em;
     }
   }
 </style>

src/components/AppLayout/components/Topbar/components/ReturnToButton.astro

@@ -24,7 +24,7 @@ const {
 <a class="pressable-label" href={href} target={target} rel={rel}>
   <Icon name="material-symbols:keyboard-return" />
   <p>
-    <span>{typeLabel}</span>
+    <span class="font-xs">{typeLabel}</span>
     {label}
   </p>
 </a>
@@ -44,7 +44,6 @@ const {
         border: 1px solid var(--color-base-1000);
         border-radius: 9999px;
         padding: 0.3em 0.5em;
-        font-size: 80%;
       }
     }
   }

src/components/AudioPlayer.astro

@@ -22,6 +22,6 @@ const {
   audio {
     width: 100%;
     border-radius: 16px;
-    box-shadow: 0 5px 20px -10px var(--color-shadow);
+    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
   }
 </style>

src/components/Button.astro

@@ -40,7 +40,6 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
     gap: 1em;
 
     font-variation-settings: "wght" 700;
-    font-size: 1em;
     cursor: pointer;
 
     transition-duration: 250ms;

src/components/Card.astro

@@ -32,7 +32,6 @@ const { href, disableRoundedTop = false } = Astro.props;
 
     &.rounded-top {
       border-radius: 1em;
-      overflow: hidden;
     }
 
     border: 1px solid var(--color-base-300);
@@ -47,15 +46,11 @@ const { href, disableRoundedTop = false } = Astro.props;
     &:hover,
     &:focus-visible {
       border-color: var(--color-base-650);
+      outline-color: var(--color-base-650);
       box-shadow: 0 2px 2px var(--color-shadow-2);
       background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--color-base-650);
-      outline-offset: unset;
-    }
-
     &:active {
       border-color: var(--color-base-1000);
       box-shadow: 0 6px 12px 2px var(--color-shadow-2);

src/components/ErrorMessage.astro

@@ -13,7 +13,7 @@ const { title, description } = Astro.props;
 
 <div class="error-message">
   <Icon name="material-symbols:error-outline" width={32} height={32} />
-  <p id="title">{title}</p>
+  <p class="font-xl">{title}</p>
   {description && <p>{description}</p>}
 </div>
 
@@ -27,10 +27,5 @@ const { title, description } = Astro.props;
     border-radius: 1em;
     display: grid;
     place-items: center;
-
-    & > #title {
-      font-variation-settings: "wght" 600;
-      font-size: 120%;
-    }
   }
 </style>

src/components/HeaderTitle.astro

@@ -11,27 +11,27 @@ const { header, id } = Astro.props;
 
 {
   header === 1 ? (
-    <h1 id={id}>
+    <h1 id={id} class="font-5xl">
       <slot />
     </h1>
   ) : header === 2 ? (
-    <h2 id={id}>
+    <h2 id={id} class="font-4xl">
       <slot />
     </h2>
   ) : header === 3 ? (
-    <h3 id={id}>
+    <h3 id={id} class="font-3xl">
       <slot />
     </h3>
   ) : header === 4 ? (
-    <h4 id={id}>
+    <h4 id={id} class="font-2xl">
       <slot />
     </h4>
   ) : header === 5 ? (
-    <h5 id={id}>
+    <h5 id={id} class="font-xl">
       <slot />
     </h5>
   ) : (
-    <h6 id={id}>
+    <h6 id={id} class="font-l">
       <slot />
     </h6>
   )

src/components/InlineMetadata.astro

@@ -12,30 +12,25 @@ if (values.length === 0) return;
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
+  <div class="title">
     <Icon name={icon} />
-  <p>{title}</p>
+    <p class="font-xs">{title}</p>
-  <div>{values.map(({ name }) => name).join(", ")}</div>
+  </div>
+  <div class="font-xs">{values.map(({ name }) => name).join(", ")}</div>
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
   #container {
-    font-size: 80%;
     display: flex;
     flex-wrap: wrap;
     gap: 0.1em 0.5em;
+    line-height: 1.3;
 
-    & > p {
+    & > .title {
-      color: var(--color-base-750);
+      display: flex;
-    }
+      gap: 0.2em;
-
-    & > div {
-      line-height: 1.2;
-      font-size: 90%;
-    }
-
-    & > svg {
       color: var(--color-base-750);
       flex-shrink: 0;
     }

src/components/Lightbox.astro

@@ -133,11 +133,6 @@ const hasNavigation = previousImageHref || nextImageHref;
       }
 
       & > a {
-        &:focus-visible {
-          outline: 3px solid var(--color-base-1000);
-          outline-offset: unset;
-        }
-
         &.pressable {
           border-radius: 9999px;
           padding-left: 1em;
@@ -156,9 +151,8 @@ const hasNavigation = previousImageHref || nextImageHref;
       }
 
       & > #image-anchor {
-        display: block;
         transition: 100ms scale;
-        box-shadow: 0 5px 20px -10px var(--color-shadow);
+        box-shadow: 0 5px 20px -10px var(--color-shadow-0);
 
         &:hover,
         &:focus-visible {
@@ -166,11 +160,6 @@ const hasNavigation = previousImageHref || nextImageHref;
         }
 
         max-height: 70vh;
-
-        & > img {
-          max-width: 100%;
-          height: auto;
-        }
       }
     }
 
@@ -193,7 +182,6 @@ const hasNavigation = previousImageHref || nextImageHref;
 
   h1 {
     max-width: 35em;
-    overflow-wrap: anywhere;
   }
 </style>
 

src/components/Metadata.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon/components";
 import type { Attribute } from "src/utils/attributes";
+import TitleIcon from "./TitleIcon.astro";
 
 interface Props extends Attribute {}
 
@@ -12,10 +12,7 @@ if (values.length === 0) return;
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <div id="title">
+  <TitleIcon title={title} icon={icon} />
-    <Icon name={icon} width={24} height={24} />
-    <p>{title}</p>
-  </div>
   <div id="values" class:list={{ "with-border": withBorder }}>
     {
       values.map(({ name, href }) =>
@@ -43,24 +40,19 @@ if (values.length === 0) return;
       grid-template-columns: 1fr;
     }
 
-    & > #title {
-      display: flex;
-      gap: 8px;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-        translate: 0px -0.1em;
-      }
-    }
-
     & > #values {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
 
+      &:not(.with-border) {
+        translate: 0px 5px;
+        line-height: 1.2;
+      }
+
       &.with-border {
-        & > * {
+        & > div,
+        & > a {
           border-radius: 9999px;
           padding-bottom: 0.25em;
           padding-top: 0.15em;

src/components/Previews/GenericPreview.astro

@@ -47,6 +47,7 @@ const {
     {
       thumbnail && (
         <img
+          class:list={{ "rounded-top": !disableRoundedTop }}
           src={thumbnail.url}
           srcset={sizesToSrcset(thumbnail.sizes)}
           sizes={sizesForGridLayout(250, 1.15)}
@@ -64,12 +65,22 @@ const {
     <div id="footer">
       {
         smallTitle ? (
-          <p>{title}</p>
+          <p class="font-l">{title}</p>
         ) : (
           <p>
-            {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
+            {pretitle && (
-            <span id="title">{title}&nbsp;</span>
+              <span id="pretitle" class="font-s">
-            {subtitle && <span id="subtitle">{subtitle}</span>}
+                {pretitle}
+              </span>
+            )}
+            <span id="title" class="font-serif font-2xl">
+              {title}
+            </span>
+            {subtitle && (
+              <span id="subtitle" class="font-serif font-m">
+                {subtitle}
+              </span>
+            )}
           </p>
         )
       }
@@ -112,6 +123,11 @@ const {
     & > img {
       width: 100%;
       height: auto;
+
+      &.rounded-top {
+        border-top-left-radius: 1em;
+        border-top-right-radius: 1em;
+      }
     }
 
     & > #icon-container {
@@ -149,28 +165,18 @@ const {
       gap: 1.2em;
 
       & > p {
-        line-height: 1;
         display: grid;
-        overflow-wrap: anywhere;
-        font-size: clamp(0.8em, 0.35em + 0.75vw, 1em);
-        font-variation-settings: "wght" 800;
 
         & > #pretitle {
-          font-family: var(--font-sans-serifs);
+          margin-bottom: 0.4em;
-          font-variation-settings: "wght" 400;
-          margin-bottom: 0.5em;
         }
 
         & > #title {
           line-height: 0.8;
-          font-family: var(--font-serif);
-          font-size: 150%;
         }
 
         & > #subtitle {
-          font-family: var(--font-serif);
+          margin-top: 0.4em;
-          font-variation-settings: "wght" 600;
-          margin-top: 0.5em;
         }
       }
 

src/components/RichText/components/RTBlock/components/RTBreak.astro

@@ -42,7 +42,7 @@ const { node } = Astro.props;
   p {
     margin-block: 4rem;
     text-align: center;
-    font-size: 2em;
+    font-size: 200%; /* Using % on purpose */
     color: var(--color-base-600);
     letter-spacing: 1em;
     scroll-margin-block: 4rem;

src/components/RichText/components/RTBlock/components/RTSection.astro

@@ -27,8 +27,9 @@ const { node, context } = Astro.props;
   span {
     color: var(--color-base-650);
     font-variation-settings: "wght" 500;
-    font-size: 70%;
+    font-size: 75%; /* Using % on purpose */
     place-self: start;
     margin-top: 0.33em;
+    flex-shrink: 0;
   }
 </style>

src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro

@@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 <div class="button when-no-print">
   <a href={url} class="pressable-label">
     <Icon name="material-symbols:left-click" />
-    <p>{t("global.openMediaPage")}</p>
+    <p class="font-s">{t("global.openMediaPage")}</p>
   </a>
 </div>
 
@@ -26,7 +26,6 @@ const { t } = await getI18n(Astro.locals.currentLocale);
     display: flex;
     place-items: start;
     gap: 0.3em;
-    font-size: 85%;
 
     & > a {
       padding: 0.3em 0.6em;

src/components/RichText/components/RTUpload/components/RTImage.astro

@@ -58,9 +58,12 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
   }
 
   a {
-    display: block;
     line-height: 0;
     margin-bottom: 0.5em;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
+    border-radius: 16px;
+    overflow: hidden;
 
     transition-property: scale, margin-bottom;
     transition-duration: 100ms;
@@ -71,19 +74,6 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
       margin-bottom: 1em;
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
-
     max-height: 70vh;
-
-    & > img {
-      box-shadow: 0 5px 20px -10px var(--color-shadow);
-      border-radius: 16px;
-
-      max-width: 100%;
-      height: auto;
-    }
   }
 </style>

src/components/SourceRow.astro

@@ -20,15 +20,16 @@ const {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<a href={href} target={target} rel={rel}><div>{typeLabel}</div><p>{label}</p></a>
+<a href={href} target={target} rel={rel}><div class="font-xs">{typeLabel}</div><p>{label}</p></a>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
   a {
     display: flex;
+    flex-wrap: wrap;
     place-items: center;
-    gap: 0.5em;
+    gap: 0.1em 0.3em;
 
     & > p {
       text-decoration: underline dotted 0.1em;
@@ -36,11 +37,13 @@ const {
 
       transition-duration: 150ms;
       transition-property: text-decoration-color, color;
+
+      line-height: 1.2;
     }
 
     border-radius: 16px;
-    padding: 2px 5px;
+    padding: 4px 10px;
-    margin: -2px -5px;
+    margin: -4px -10px;
 
     &:hover > p,
     &:focus-visible > p {
@@ -49,8 +52,7 @@ const {
     }
 
     &:focus-visible {
-      outline: 2px solid var(--color-base-1000);
+      outline-width: 1.5 px;
-      outline-offset: unset;
     }
 
     &:active > p {
@@ -61,8 +63,9 @@ const {
     & > div {
       background-color: var(--color-base-300);
       border-radius: 9999px;
-      padding: 0.5em 0.6em;
+      padding: 0.3em 0.6em;
-      font-size: 80%;
+      flex-shrink: 0;
+      margin-left: -0.5em;
     }
   }
 </style>

src/components/TableOfContent/TableOfContent.astro

@@ -1,8 +1,8 @@
 ---
 import type { TableOfContentEntry } from "src/shared/payload/payload-sdk";
 import TableOfContentItem from "./components/TableOfContentItem.astro";
-import { Icon } from "astro-icon/components";
 import { getI18n } from "src/i18n/i18n";
+import TitleIcon from "components/TitleIcon.astro";
 
 interface Props {
   toc: TableOfContentEntry[];
@@ -14,31 +14,9 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div id="container">
+<div>
-  <div id="title">
+  <TitleIcon title={t("pages.tableOfContent")} icon="material-symbols:list-alt-outline" />
-    <Icon name="material-symbols:list-alt-outline" width={24} height={24} />
-    <p>{t("pages.tableOfContent")}</p>
-  </div>
   <ol>
     {toc.map((entry) => <TableOfContentItem entry={entry} />)}
   </ol>
 </div>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  #container {
-    & > #title {
-      display: flex;
-      place-items: center;
-      gap: 8px;
-      margin-bottom: 0.75em;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-        translate: 0px -0.1em;
-      }
-    }
-  }
-</style>

src/components/TitleIcon.astro

@@ -0,0 +1,25 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  icon: string;
+  title: string;
+}
+
+const { icon, title } = Astro.props;
+---
+
+<div>
+  <Icon name={icon} width={24} height={24} />
+  <p class="font-2xl">{title}</p>
+</div>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  div {
+    display: flex;
+    gap: 8px;
+    line-height: 0.9;
+  }
+</style>

src/components/VideoPlayer.astro

@@ -28,6 +28,6 @@ const {
   video {
     width: 100%;
     border-radius: 16px;
-    box-shadow: 0 5px 20px -10px var(--color-shadow);
+    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
   }
 </style>

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

@@ -52,28 +52,27 @@ const { img, name, href } = Astro.props;
 
 <style>
   a {
-    font-size: 24px;
-    font-variation-settings: "wght" 400;
-    text-decoration: none;
     display: grid;
     place-items: center;
 
     border-radius: 12px;
 
     user-select: none;
+    aspect-ratio: 16/9;
+    width: 100%;
+    box-sizing: border-box;
 
     & > img {
       object-fit: contain;
       height: 100%;
       width: 100%;
-      aspect-ratio: 2;
     }
 
     & > div {
-      aspect-ratio: 2;
-      width: 100%;
       display: grid;
       place-content: center;
+      height: 100%;
+      width: 100%;
     }
   }
 </style>

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

@@ -1,56 +0,0 @@
----
-interface Props {
-  pretitle: string;
-  title: string;
-  subtitle: string;
-  href: string;
-}
-
-const { pretitle, subtitle, title, href } = Astro.props;
----
-
-{/* ------------------------------------------- HTML ------------------------------------------- */}
-
-<a href={href} class="pressable">
-  <p class="pretitle">{pretitle}</p>
-  <h3>{title}</h3>
-  <p>{subtitle}</p>
-</a>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  a {
-    display: flex;
-    place-items: center;
-    gap: 1em;
-    color: var(--color-base-1000);
-    padding: 1.5em;
-    border-radius: 0.75em;
-    text-decoration: none;
-
-    & > svg {
-      width: clamp(1.5em, 6vw + 0.8em, 3em);
-      height: clamp(1.5em, 6vw + 0.8em, 3em);
-      flex-shrink: 0;
-    }
-
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.15em;
-
-    & > h3 {
-      font-size: 1.5em;
-      margin-bottom: 0.5em;
-    }
-
-    & > .pretitle {
-      font-size: 1em;
-    }
-
-    & > p {
-      font-size: 0.8em;
-    }
-  }
-</style>

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

@@ -15,8 +15,8 @@ const { icon, subtitle, title, href } = Astro.props;
 <a href={href} class="pressable">
   <Icon name={icon} />
   <div id="right">
-    <h3>{title}</h3>
+    <p class="font-xl">{title}</p>
-    <p>{subtitle}</p>
+    <p class="font-s">{subtitle}</p>
   </div>
 </a>
 
@@ -30,7 +30,6 @@ const { icon, subtitle, title, href } = Astro.props;
     color: var(--color-base-1000);
     padding: 1.5em;
     border-radius: 0.75em;
-    text-decoration: none;
 
     & > svg {
       width: clamp(1.5em, 6vw + 0.8em, 3em);
@@ -43,15 +42,6 @@ const { icon, subtitle, title, href } = Astro.props;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.15em;
-
-      & > h3 {
-        font-size: 1.25em;
-      }
-
-      & > p {
-        font-size: 0.8em;
-        margin-left: 2px;
-      }
     }
   }
 </style>

src/pages/[locale]/api/pages/partial.astro

@@ -39,11 +39,13 @@ const metaAttributes: Attribute[] = [
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
     values: [{ name: formatDate(new Date(createdAt)) }],
+    withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
     values: [{ name: formatDate(new Date(updatedAt)) }],
+    withBorder: false,
   },
 ];
 
@@ -170,17 +172,13 @@ if (updatedBy) {
   #thumbnail {
     border-radius: 16px;
     transition: 100ms scale;
-    display: block;
 
     max-height: 80vh;
     max-width: min(35rem, 100%);
 
     & > img {
-      max-width: 100%;
-      height: auto;
-
       border-radius: 16px;
-      box-shadow: 0 5px 20px -10px var(--color-shadow);
+      box-shadow: 0 5px 20px -10px var(--color-shadow-0);
     }
 
     @media (max-width: 1280.5px) {
@@ -195,10 +193,5 @@ if (updatedBy) {
     &:focus-visible {
       scale: 102%;
     }
-
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
   }
 </style>

src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import TitleIcon from "components/TitleIcon.astro";
 import { getI18n } from "src/i18n/i18n";
 import type { EndpointCollectible } from "src/shared/payload/payload-sdk";
 
@@ -32,11 +32,7 @@ const title = (() => {
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <div id="title">
+  <TitleIcon title={title} icon={"material-symbols:shopping-cart-outline"} />
-    <Icon name="material-symbols:shopping-cart-outline" width={24} height={24} />
-    <p>{title}</p>
-  </div>
-
   {
     urls.length > 0 && (
       <div id="values">
@@ -63,17 +59,6 @@ const title = (() => {
       grid-template-columns: 1fr;
     }
 
-    & > #title {
-      display: flex;
-      place-items: center;
-      gap: 8px;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-      }
-    }
-
     & > #values {
       display: flex;
       flex-wrap: wrap;

src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro

@@ -1,8 +1,8 @@
 ---
-import { Icon } from "astro-icon/components";
 import type { EndpointCollectible } from "src/shared/payload/payload-sdk";
 import ContentRow from "./ContentRow.astro";
 import { getI18n } from "src/i18n/i18n";
+import TitleIcon from "components/TitleIcon.astro";
 
 interface Props {
   contents: EndpointCollectible["contents"];
@@ -14,34 +14,26 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div id="title">
+<div id="container">
-  <Icon name="material-symbols:list-alt-outline" width={24} height={24} />
+  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:list-alt-outline" />
-  <p>{t("collectibles.contents")}</p>
-</div>
 
-<div id="contents">
+  <div id="contents">
     {contents.map((content) => <ContentRow content={content} />)}
+  </div>
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  #title {
+  #container {
-    margin-top: 6em;
+    margin-top: 4em;
-    margin-bottom: 2em;
-
     display: flex;
-    place-items: center;
+    flex-direction: column;
-    gap: 8px;
+    gap: 2em;
 
-    & > p {
+    & > #contents {
-      font-size: 1.5em;
-      font-variation-settings: "wght" 600;
-    }
-  }
-
-  #contents {
       display: grid;
       gap: 1em;
     }
+  }
 </style>

src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro

@@ -36,7 +36,7 @@ const {
   />
 
   <div class="high-contrast-text">
-    <p class="title">{title}</p>
+    <p id="title" class="font-2xl">{title}</p>
     <p>{subtitle}</p>
   </div>
 </a>
@@ -53,7 +53,7 @@ const {
     place-items: center;
     overflow: hidden;
     border-radius: 12px;
-    box-shadow: 0 5px 20px -10px var(--color-shadow);
+    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
 
     transition: 100ms scale;
 
@@ -62,22 +62,12 @@ const {
       scale: 105%;
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
-
     & > div {
       text-align: center;
       backdrop-filter: blur(5px);
       padding: 1em;
       border-radius: 1em;
-
+      line-height: 1.3;
-      & > .title {
-        font-size: 130%;
-        font-variation-settings: "wght" 500;
-        margin-bottom: 0.2em;
-      }
     }
 
     & > img {

src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import TitleIcon from "components/TitleIcon.astro";
 import { getI18n } from "src/i18n/i18n";
 import {
   CollectibleBindingTypes,
@@ -21,10 +21,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <div id="title">
+  <TitleIcon title={t("collectibles.bookFormat")} icon="material-symbols:note-stack-outline" />
-    <Icon name="material-symbols:note-stack-outline" width={24} height={24} />
-    <p>{t("collectibles.bookFormat")}</p>
-  </div>
 
   <div id="values">
     <p>{t("collectibles.bookFormat.pageCount", { count: pageCount })}</p>
@@ -66,17 +63,6 @@ const { t } = await getI18n(Astro.locals.currentLocale);
       grid-template-columns: 1fr;
     }
 
-    & > #title {
-      display: flex;
-      place-items: center;
-      gap: 8px;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-      }
-    }
-
     & > #values {
       display: flex;
       flex-direction: column;

src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import TitleIcon from "components/TitleIcon.astro";
 import { getI18n } from "src/i18n/i18n";
 
 interface Props {
@@ -18,26 +18,23 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="size">
-  <div id="title">
+  <TitleIcon title={t("collectibles.size")} icon="material-symbols:measuring-tape-outline" />
-    <Icon name="material-symbols:measuring-tape-outline" width={24} height={24} />
-    <p>{t("collectibles.size")}</p>
-  </div>
 
   <div id="values">
     <div>
-      <p>{t("collectibles.size.width")}</p>
+      <p class="font-xl">{t("collectibles.size.width")}</p>
       <p>{formatMillimeters(size.width)}</p>
       <p>{formatInches(size.width)}</p>
     </div>
     <div>
-      <p>{t("collectibles.size.height")}</p>
+      <p class="font-xl">{t("collectibles.size.height")}</p>
       <p>{formatMillimeters(size.height)}</p>
       <p>{formatInches(size.height)}</p>
     </div>
     {
       size.thickness && (
         <div>
-          <p>{t("collectibles.size.thickness")}</p>
+          <p class="font-xl">{t("collectibles.size.thickness")}</p>
           <p>{formatMillimeters(size.thickness)}</p>
           <p>{formatInches(size.thickness)}</p>
         </div>
@@ -59,18 +56,6 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren
       grid-template-columns: 1fr;
     }
 
-    & > #title {
-      display: flex;
-      place-items: center;
-      gap: 8px;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-        translate: 0px -0.1em;
-      }
-    }
-
     & > #values {
       display: flex;
       gap: 1em 1.5em;
@@ -81,8 +66,6 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren
         gap: 0.6em;
 
         & > p:first-child {
-          font-size: 120%;
-          font-variation-settings: "wght" 500;
           margin-top: 3px;
         }
       }

src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon/components";
 import CollectiblePreview from "components/Previews/CollectiblePreview.astro";
+import TitleIcon from "components/TitleIcon.astro";
 import { getI18n } from "src/i18n/i18n";
 import type { EndpointCollectible } from "src/shared/payload/payload-sdk";
 
@@ -14,35 +14,27 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div id="title">
+<div id="container">
-  <Icon name="material-symbols:box-outline" width={24} height={24} />
+  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:box-outline" />
-  <p>{t("collectibles.contents")}</p>
-</div>
 
-<div id="values">
+  <div id="values">
     {subitems.map((subitem) => <CollectiblePreview collectible={subitem} />)}
+  </div>
 </div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  #title {
+  #container {
     margin-top: 6em;
-    margin-bottom: 2em;
-
     display: flex;
-    place-items: center;
+    flex-direction: column;
-    gap: 8px;
+    gap: 2em;
 
-    & > p {
+    & > #values {
-      font-size: 1.5em;
-      font-variation-settings: "wght" 600;
-    }
-  }
-
-  #values {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: clamp(6px, 2vmin, 16px);
     }
+  }
 </style>

src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import TitleIcon from "components/TitleIcon.astro";
 import { getI18n } from "src/i18n/i18n";
 
 interface Props {
@@ -13,11 +13,7 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <div id="title">
+  <TitleIcon title={t("collectibles.weight")} icon="material-symbols:scale-outline" />
-    <Icon name="material-symbols:scale-outline" width={24} height={24} />
-    <p>{t("collectibles.weight")}</p>
-  </div>
-
   <p>{formatGrams(weight)}{" "}({formatPounds(weight)})</p>
 </div>
 
@@ -34,17 +30,6 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal
       grid-template-columns: 1fr;
     }
 
-    & > #title {
-      display: flex;
-      place-items: center;
-      gap: 8px;
-
-      & > p {
-        font-size: 1.5em;
-        font-variation-settings: "wght" 600;
-      }
-    }
-
     & > p {
       margin-top: 0.5em;
     }

src/pages/[locale]/collectibles/[slug]/gallery/index.astro

@@ -74,7 +74,9 @@ const translation = getLocalizedMatch(translations);
       gap: 1em;
       text-align: center;
       place-items: center;
+      box-shadow: 0 5px 20px -10px var(--color-shadow-0);
       border-radius: 16px;
+      overflow: hidden;
 
       transition: 100ms scale;
 
@@ -83,19 +85,7 @@ const translation = getLocalizedMatch(translations);
         scale: 104%;
       }
 
-      &:focus-visible {
-        outline: 3px solid var(--color-base-1000);
-        outline-offset: unset;
-      }
-
       max-height: 320px;
-
-      & > img {
-        max-width: 100%;
-        height: auto;
-        box-shadow: 0 5px 20px -10px var(--color-shadow);
-        border-radius: 16px;
-      }
     }
   }
 </style>

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -61,11 +61,13 @@ const metaAttributes: Attribute[] = [
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
     values: [{ name: formatDate(new Date(createdAt)) }],
+    withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
     values: [{ name: formatDate(new Date(updatedAt)) }],
+    withBorder: false,
   },
 ];
 
@@ -257,26 +259,15 @@ if (price) {
     }
 
     & > #thumbnail {
+      max-height: 80vh;
+      max-width: min(35rem, 100%);
+      box-shadow: 0 5px 20px -10px var(--color-shadow-0);
       transition: 100ms scale;
 
       &:hover,
       &:focus-visible {
         scale: 102%;
       }
-
-      &:focus-visible {
-        outline: 3px solid var(--color-base-1000);
-        outline-offset: unset;
-      }
-
-      max-height: 80vh;
-      max-width: min(35rem, 100%);
-
-      & > img {
-        box-shadow: 0 5px 20px -10px var(--color-shadow);
-        max-width: 100%;
-        height: auto;
-      }
     }
 
     & > #gallery-scans {

src/pages/[locale]/collectibles/[slug]/scans/_components/ScanPreview.astro

@@ -48,24 +48,13 @@ const { getLocalizedUrl, formatScanIndexShort } = await getI18n(Astro.locals.cur
   }
 
   a {
+    max-height: 100%;
+    box-shadow: 0 5px 20px -10px var(--color-shadow-0);
     transition: 100ms scale;
 
     &:hover,
     &:focus-visible {
       scale: 104%;
     }
-
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
-
-    max-height: 100%;
-
-    & > img {
-      max-width: 100%;
-      height: auto;
-      box-shadow: 0 5px 20px -10px var(--color-shadow);
-    }
   }
 </style>

src/pages/[locale]/collectibles/[slug]/scans/index.astro

@@ -61,7 +61,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
       <>
         {hasOutsideCover && (
           <section>
-            <h2>{t("collectibles.scans.cover")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.cover")}</h2>
             <div>
               {cover.flapFront && (
                 <ScanPreview
@@ -91,7 +91,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
         )}
         {hasInsideCover && (
           <section>
-            <h2>{t("collectibles.scans.coverInside")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.coverInside")}</h2>
             <div>
               {cover.insideFlapFront && (
                 <ScanPreview
@@ -133,7 +133,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
       <>
         {hasOutsideDustjacket && (
           <section>
-            <h2>{t("collectibles.scans.dustjacket")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.dustjacket")}</h2>
             <p class="prose">{t("collectibles.scans.dustjacket.description")}</p>
             <div>
               {dustjacket.flapFront && (
@@ -176,7 +176,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
         )}
         {hasInsideDustjacket && (
           <section>
-            <h2>{t("collectibles.scans.dustjacketInside")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.dustjacketInside")}</h2>
             <div>
               {dustjacket.insideFlapFront && (
                 <ScanPreview
@@ -225,7 +225,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
       <>
         {hasOutsideObi && (
           <section>
-            <h2>{t("collectibles.scans.obi")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.obi")}</h2>
             <p class="prose">{t("collectibles.scans.obi.description")}</p>
             <div>
               {obi.flapFront && (
@@ -248,7 +248,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
         )}
         {hasInsideObi && (
           <section>
-            <h2>{t("collectibles.scans.obiInside")}</h2>
+            <h2 class="font-serif font-3xl">{t("collectibles.scans.obiInside")}</h2>
             <div>
               {obi.insideFlapFront && (
                 <ScanPreview
@@ -291,7 +291,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
   {
     pages.length > 0 && (
       <section>
-        <h2>{t("collectibles.scans.pages")}</h2>
+        <h2 class="font-serif font-3xl">{t("collectibles.scans.pages")}</h2>
         <div>
           {pages.map((image) => (
             <ScanPreview aspectRatio={pages[0]} collectibleSlug={slug} scan={image} />
@@ -308,22 +308,25 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
   section {
     margin-block: 6em;
 
-    & > h2 {
-      font-family: var(--font-serif);
-      font-size: 30px;
-    }
-
     & > p {
       margin-top: 0.5em;
       margin-bottom: 2em;
     }
 
     & > div {
-      margin-top: 1em;
+      margin-top: 2em;
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: 32px 16px;
       align-items: end;
+
+      @media (max-width: 600px) {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      @media (max-width: 320px) {
+        grid-template-columns: 1fr;
+      }
     }
   }
 </style>

src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro

@@ -0,0 +1,118 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  baseColors: number[];
+  theme: "light-theme" | "dark-theme";
+}
+
+const { baseColors, theme } = Astro.props;
+---
+
+<div id="container" class:list={[theme, "manual-theme"]}>
+  <h4>Base colors</h4>
+  <div class="colors">
+    {
+      baseColors.map((color) => (
+        <div
+          style={`
+        background-color: var(--color-base-${color});
+        color: var(--color-base-${color > 500 ? 0 : 1000})
+      `}>
+          {color}
+        </div>
+      ))
+    }
+  </div>
+  <div class="legend">
+    <span><Icon name="material-symbols:chevron-left" /> Background</span><span>
+      Foreground <Icon name="material-symbols:chevron-right" />
+    </span>
+  </div>
+
+  <div class="group">
+    <div>
+      <h4>Elevation</h4>
+      <div class="colors">
+        <div style="background-color: var(--color-elevation-0);">0</div>
+        <div style="background-color: var(--color-elevation-1);">1</div>
+        <div style="background-color: var(--color-elevation-2);">2</div>
+      </div>
+    </div>
+
+    <div>
+      <h4>Shadows</h4>
+      <div class="colors">
+        <div style="background-color: var(--color-shadow-0);">0</div>
+        <div style="background-color: var(--color-shadow-1);">1</div>
+        <div style="background-color: var(--color-shadow-2);">2</div>
+      </div>
+    </div>
+
+    <div>
+      <h4>Others</h4>
+      <div class="colors">
+        <div style="background-color: var(--color-critical-error); color: var(--color-base-0);">
+          Error
+        </div>
+        <div class="texture-dots" style="background-color: var(--color-elevation-0)">Dots</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  #container {
+    max-width: unset;
+    background-color: var(--color-elevation-0);
+    padding: 2em;
+    border: 1px solid var(--color-elevation-2);
+    border-radius: 24px;
+    width: fit-content;
+  }
+
+  .legend {
+    display: flex;
+    place-content: space-between;
+    width: 100%;
+    margin-top: 0.5em;
+
+    & > span {
+      display: flex;
+
+      & > svg {
+        translate: 0 2px;
+      }
+    }
+  }
+
+  .group {
+    display: flex;
+    gap: 10em;
+    margin-top: 2em;
+  }
+
+  h4 {
+    line-height: 2;
+    margin-bottom: 4px;
+    font-size: 120%;
+  }
+
+  .colors {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    gap: 3px;
+
+    & > div {
+      border-radius: 6px;
+      width: 6ch;
+      height: 6ch;
+      display: flex;
+      place-content: center;
+      place-items: center;
+    }
+  }
+</style>

src/pages/[locale]/dev/design-system/index.astro

@@ -0,0 +1,71 @@
+---
+import AppLayout from "components/AppLayout/AppLayout.astro";
+import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
+import ColorShowcase from "./_components/ColorShowcase.astro";
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<AppLayout>
+  <AppLayoutTitle pretitle="AL3.0" title="Design System" />
+
+  <div>
+    <h2>Colors</h2>
+
+    <h3>Light theme</h3>
+    <ColorShowcase
+      baseColors={[
+        0, 50, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
+        900, 950, 1000,
+      ]}
+      theme="light-theme"
+    />
+
+    <h3>Dark theme</h3>
+    <ColorShowcase
+      baseColors={[
+        0, 50, 100, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
+        900, 950, 1000,
+      ]}
+      theme="dark-theme"
+    />
+
+    <h2>Fonts</h2>
+
+    <div>
+      <p class="font-5xl">Lorem Ipsum 5XL</p>
+      <p class="font-4xl">Lorem Ipsum 4XL</p>
+      <p class="font-3xl">Lorem Ipsum 3XL</p>
+      <p class="font-2xl">Lorem Ipsum 2XL</p>
+      <p class="font-xl">Lorem Ipsum XL</p>
+      <p class="font-l">Lorem Ipsum L</p>
+      <p class="font-m">Lorem Ipsum M</p>
+      <p class="font-s">Lorem Ipsum S</p>
+      <p class="font-xs">Lorem Ipsum XS</p>
+    </div>
+
+    <div>
+      <p class="font-serif font-5xl">Lorem Ipsum 5XL</p>
+      <p class="font-serif font-4xl">Lorem Ipsum 4XL</p>
+      <p class="font-serif font-3xl">Lorem Ipsum 3XL</p>
+      <p class="font-serif font-2xl">Lorem Ipsum 2XL</p>
+      <p class="font-serif font-xl">Lorem Ipsum XL</p>
+      <p class="font-serif font-l">Lorem Ipsum L</p>
+      <p class="font-serif font-m">Lorem Ipsum M</p>
+    </div>
+  </div>
+</AppLayout>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+<style>
+  div {
+    margin-block: 2em;
+    display: grid;
+    gap: 8px;
+  }
+
+  .prose {
+    margin-top: 4em;
+    max-width: unset;
+  }
+</style>

src/pages/[locale]/folders/[slug].astro

@@ -37,7 +37,7 @@ const meta = getLocalizedMatch(folder.translations);
   <AppLayoutTitle title={meta.name} />
   {meta.description && <AppLayoutDescription description={meta.description} />}
 
-  <div id="main">
+  <div id="main" class:list={{ complex: folder.sections.type === "multiple" }}>
     {
       folder.sections.type === "single" && folder.sections.subfolders.length > 0 ? (
         <FoldersSection folders={folder.sections.subfolders} />
@@ -102,9 +102,13 @@ const meta = getLocalizedMatch(folder.translations);
     display: grid;
     gap: 4em;
 
+    &.complex {
+      gap: 6em;
+
       & > #sections {
         display: grid;
-      gap: 2.5em;
+        gap: 4em;
+      }
     }
 
     & > #files {

src/pages/[locale]/folders/_components/FolderCard.astro

@@ -13,8 +13,8 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
 
 <a href={href} class="pressable">
   <Icon name={icon} />
-  <div id="right">
+  <div id="right" class="font-xl">
-    <h3>{title}</h3>
+    {title}
   </div>
 </a>
 
@@ -28,8 +28,6 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
     color: var(--color-base-1000);
     padding: 12px 24px;
     border-radius: 12px;
-    text-decoration: none;
-    font-size: clamp(0.8em, 0.35em + 0.75vw, 1em);
 
     & > svg {
       width: 24px;
@@ -41,10 +39,6 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
       flex-direction: column;
       align-items: flex-start;
       gap: 2px;
-
-      & > h3 {
-        font-size: 125%;
-      }
     }
   }
 </style>

src/pages/[locale]/folders/_components/FoldersSection.astro

@@ -16,7 +16,7 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div>
-  {title && <h3>{title}</h3>}
+  {title && <h3 class="font-serif font-3xl">{title}</h3>}
   <section>
     {
       folders.map(({ slug, translations, icon }) => (

src/pages/[locale]/index.astro

@@ -2,7 +2,6 @@
 import { Icon } from "astro-icon/components";
 import Button from "components/Button.astro";
 import LibraryGrid from "./_components/LibraryGrid.astro";
-import ChronicleCard from "./_components/ChronicleCard.astro";
 import LinkCard from "./_components/LinkCard.astro";
 import { getI18n } from "src/i18n/i18n";
 import { cache } from "src/utils/payload";
@@ -35,7 +34,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
   <div id="main">
     <section id="library" class="high-contrast-text">
-      <h2>{t("home.librarySection.title")}</h2>
+      <h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
       <p set:html={t("home.librarySection.description")} />
       <a href={getLocalizedUrl("/search")} class="DEV_TODO">
         <Button
@@ -50,50 +49,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     </section>
 
     <section class="DEV_TODO">
-      <h2>{t("home.chroniclesSection.title")}</h2>
+      <h2 class="font-serif font-3xl">{t("home.changesSection.title")}</h2>
-      <p set:html={t("home.chroniclesSection.description")} />
-      <div class="flex">
-        <ChronicleCard
-          pretitle={"Preface"}
-          title={"The Yokoverse"}
-          subtitle={"Start reading the Chronicles here"}
-          href={getLocalizedUrl("/chronicles/preface")}
-        />
-        <ChronicleCard
-          pretitle={"Chapter 1"}
-          title={"Drakengard 3"}
-          subtitle={"A cursed world, and the girl who hated it"}
-          href={getLocalizedUrl("/chronicles/drakengard-3")}
-        />
-        <ChronicleCard
-          pretitle={"Chapter 2"}
-          title={"Drakengard"}
-          subtitle={"Humanity at its lowest"}
-          href={getLocalizedUrl("/chronicles/drakengard")}
-        />
-        <ChronicleCard
-          pretitle={"Chapter 3"}
-          title={"NieR"}
-          subtitle={"The Glory of Mankind comes to an abrupt End"}
-          href={getLocalizedUrl("/chronicles/nier")}
-        />
-        <ChronicleCard
-          pretitle={"Chapter 4"}
-          title={"NieR:Automata"}
-          subtitle={"Protagonists of Meaningless Stories"}
-          href={getLocalizedUrl("/chronicles/nier-automata")}
-        />
-        <ChronicleCard
-          pretitle={"Epilogue"}
-          title={"Appendices"}
-          subtitle={"Protagonists of Meaningless Stories"}
-          href={getLocalizedUrl("/chronicles/nier-automata")}
-        />
-      </div>
-    </section>
-
-    <section class="DEV_TODO">
-      <h2>{t("home.changesSection.title")}</h2>
       <p set:html={t("home.changesSection.description")} />
       <a href={getLocalizedUrl("/changelog")}>
         <Button
@@ -105,7 +61,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     </section>
 
     <section>
-      <h2>{t("home.moreSection.title")}</h2>
+      <h2 class="font-serif font-3xl">{t("home.moreSection.title")}</h2>
       <p set:html={t("home.moreSection.description")} />
       <div class="grid">
         <div class="DEV_TODO">
@@ -143,7 +99,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     </section>
 
     <section>
-      <h2>{t("home.linksSection.title")}</h2>
+      <h2 class="font-serif font-3xl">{t("home.linksSection.title")}</h2>
       <p set:html={t("home.linksSection.description")} />
       <div class="grid">
         <LinkCard
@@ -192,26 +148,21 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
     & > div {
       & > h1 {
-        margin: 0;
+        font-size: 54.5px;
-        line-height: 1;
-        font-size: 52px;
-        font-variation-settings: "wght" 300;
         font-variation-settings: "wght" 800;
       }
 
       & > p {
-        line-height: 1;
-        margin: 0;
         margin-top: -0.5em;
-        font-size: 21px;
+        font-size: 20px;
         font-variation-settings: "wght" 600;
       }
     }
 
     @media (max-width: 35rem) {
       flex-direction: column;
-      width: 100%;
       place-items: center;
+      margin-bottom: 3em;
       --container-width: calc((100vw - 48px));
 
       & > svg {
@@ -222,16 +173,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       & > div {
         & > h1 {
           margin: 0;
-          line-height: 1;
           font-size: calc(var(--container-width) / 9);
           font-variation-settings: "wght" 800;
         }
 
         & > p {
-          line-height: 1;
           margin: 0;
           margin-top: -0.5em;
-          font-size: calc(var(--container-width) / 21.8);
+          font-size: calc(var(--container-width) / 25);
           font-variation-settings: "wght" 700;
         }
       }
@@ -244,11 +193,6 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     gap: 64px;
 
     & > section {
-      & > h2 {
-        font-family: var(--font-serif);
-        font-size: 30px;
-      }
-
       & > p {
         max-width: 35em;
         line-height: 1.5;

src/pages/[locale]/recorders/[id].astro

@@ -85,7 +85,9 @@ if (languages.length > 0) {
 
 <style>
   a {
-    display: block;
+    max-width: min(35rem, 100%);
+    max-height: 50vh;
+    overflow: hidden;
     margin-bottom: 2em;
     border-radius: 16px;
 
@@ -94,24 +96,11 @@ if (languages.length > 0) {
     @media (max-width: 1280.5px) {
       margin-top: 2em;
     }
+
     &:hover,
     &:focus-visible {
       scale: 102%;
     }
-
-    &:focus-visible {
-      outline: 3px solid var(--color-base-1000);
-      outline-offset: unset;
-    }
-
-    max-width: min(35rem, 100%);
-    max-height: 50vh;
-
-    & > img {
-      border-radius: 16px;
-      max-width: 100%;
-      height: auto;
-    }
   }
 
   #info {

src/pages/[locale]/timeline/index.astro

@@ -24,7 +24,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
   <div class="card-container">
     <Card>
       <div class="card-content prose">
-        <h3>{t("timeline.notes.title")}</h3>
+        <h3 class="font-serif font-3xl">{t("timeline.notes.title")}</h3>
 
         <p
           set:html={t("timeline.notes.content", {
@@ -38,7 +38,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
 
     <Card>
       <div class="card-content prose">
-        <h3>{t("timeline.priorCataclysmNote.title")}</h3>
+        <h3 class="font-serif font-3xl">{t("timeline.priorCataclysmNote.title")}</h3>
 
         <p
           set:html={t("timeline.priorCataclysmNote.content", {
@@ -52,7 +52,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
 
     <Card>
       <div class="card-content prose jump-card">
-        <h3>{t("timeline.jumpTo")}</h3>
+        <h3 class="font-serif font-3xl">{t("timeline.jumpTo")}</h3>
 
         {
           cache.config.timeline.eras.map(({ name, startingYear, endingYear }) => (
@@ -74,7 +74,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
 
 <style>
   .card-content {
-    padding: clamp(1em, 4vw, 3em);
+    padding: clamp(1.5em, 4vw, 2em) clamp(1em, 4vw, 3em);
     max-width: 35rem;
 
     &.jump-card > p {

src/pages/[locale]/videos/[id].astro

@@ -107,8 +107,6 @@ const metaAttributes = [
 
     > :global(video) {
       max-height: 60vh;
-      max-width: 100%;
-      height: auto;
       width: auto;
     }