Use fluid font size

src/components/AppLayout/components/Html.astro

@@ -226,7 +226,7 @@ const { currentTheme } = Astro.locals;
     --color-elevation-0: var(--color-base-150);
 
     --color-shadow-0: var(--color-base-500);
-    --color-shadow-1: var(--color-base-350);
+    --color-shadow-1: var(--color-base-400);
     --color-shadow-2: var(--color-base-300);
 
     --color-critical-error: #940000;
@@ -397,15 +397,17 @@ const { currentTheme } = Astro.locals;
   }
 
   :root {
+    --font-size-increase: 4px + min(0.2vw, 3px);
+
     --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;
+    --font-size-l: calc(1rem + var(--font-size-increase) * 1);
+    --font-size-xl: calc(1rem + var(--font-size-increase) * 2);
+    --font-size-2xl: calc(1rem + var(--font-size-increase) * 3);
+    --font-size-3xl: calc(1rem + var(--font-size-increase) * 4);
+    --font-size-4xl: calc(1rem + var(--font-size-increase) * 6);
+    --font-size-5xl: calc(1rem + var(--font-size-increase) * 16);
   }
 
   html,
@@ -700,6 +702,10 @@ const { currentTheme } = Astro.locals;
     }
   }
 
+  @view-transition {
+    navigation: auto;
+  }
+
   .DEV_TODO {
     display: none !important;
     visibility: none !important;

src/components/Previews/GenericPreview.astro

@@ -78,9 +78,7 @@ const {
               {pretitle}
             </span>
           )}
-          <span id="title" class="font-serif font-2xl">
-            {title}
-          </span>
+          <span class="font-serif font-2xl">{title}</span>
           {subtitle && (
             <span id="subtitle" class="font-serif font-m">
               {subtitle}
@@ -168,18 +166,18 @@ const {
 
       & > p {
         transition: 150ms color;
-        display: grid;
+        line-height: 0.8;
 
         & > #pretitle {
-          margin-bottom: 0.4em;
-        }
-
-        & > #title {
-          line-height: 0.8;
+          margin-bottom: 0.8em;
         }
 
         & > #subtitle {
-          margin-top: 0.4em;
+          margin-top: 0.5em;
+        }
+
+        & > span {
+          display: block;
         }
       }
 

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

@@ -10,7 +10,7 @@ const { baseColors, theme } = Astro.props;
 ---
 
 <div id="container" class:list={[theme, "manual-theme"]}>
-  <h4>Base colors</h4>
+  <h4 class="font-xl">Base colors</h4>
   <div class="colors">
     {
       baseColors.map((color) => (
@@ -32,7 +32,7 @@ const { baseColors, theme } = Astro.props;
 
   <div class="group">
     <div>
-      <h4>Elevation</h4>
+      <h4 class="font-xl">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>
@@ -41,7 +41,7 @@ const { baseColors, theme } = Astro.props;
     </div>
 
     <div>
-      <h4>Shadows</h4>
+      <h4 class="font-xl">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>
@@ -50,7 +50,7 @@ const { baseColors, theme } = Astro.props;
     </div>
 
     <div>
-      <h4>Others</h4>
+      <h4 class="font-xl">Others</h4>
       <div class="colors">
         <div style="background-color: var(--color-critical-error); color: var(--color-base-0);">
           Error
@@ -97,7 +97,6 @@ const { baseColors, theme } = Astro.props;
   h4 {
     line-height: 2;
     margin-bottom: 4px;
-    font-size: 120%;
   }
 
   .colors {

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

@@ -10,9 +10,9 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
   <AppLayoutTitle pretitle="AL3.0" title="Design System" />
 
   <div>
-    <h2>Colors</h2>
+    <h2 class="font-3xl">Colors</h2>
 
-    <h3>Light theme</h3>
+    <h3 class="font-2xl">Light theme</h3>
     <ColorShowcase
       baseColors={[
         0, 50, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
@@ -21,7 +21,7 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
       theme="light-theme"
     />
 
-    <h3>Dark theme</h3>
+    <h3 class="font-2xl">Dark theme</h3>
     <ColorShowcase
       baseColors={[
         0, 50, 100, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
@@ -30,28 +30,28 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
       theme="dark-theme"
     />
 
-    <h2>Fonts</h2>
+    <h2 class="font-3xl">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>
+      <p class="font-5xl">Murencho Variable 5XL</p>
+      <p class="font-4xl">Murencho Variable 4XL</p>
+      <p class="font-3xl">Murencho Variable 3XL</p>
+      <p class="font-2xl">Murencho Variable 2XL</p>
+      <p class="font-xl">Murencho Variable XL</p>
+      <p class="font-l">Murencho Variable L</p>
+      <p class="font-m">Murencho Variable M</p>
+      <p class="font-s">Murencho Variable S</p>
+      <p class="font-xs">Murencho Variable 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>
+      <p class="font-serif font-5xl">Vollkorn Variable 5XL</p>
+      <p class="font-serif font-4xl">Vollkorn Variable 4XL</p>
+      <p class="font-serif font-3xl">Vollkorn Variable 3XL</p>
+      <p class="font-serif font-2xl">Vollkorn Variable 2XL</p>
+      <p class="font-serif font-xl">Vollkorn Variable XL</p>
+      <p class="font-serif font-l">Vollkorn Variable L</p>
+      <p class="font-serif font-m">Vollkorn Variable M</p>
     </div>
   </div>
 </AppLayout>
@@ -68,4 +68,17 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
     margin-top: 4em;
     max-width: unset;
   }
+
+  h2 {
+    margin-top: 2em;
+  }
+
+  h3 {
+    margin-top: 2em;
+    margin-bottom: 0.2em;
+  }
+
+  h2 + h3 {
+    margin-top: 0.2em;
+  }
 </style>

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

@@ -13,7 +13,7 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
 
 <a href={href} class="pressable">
   <Icon name={icon} />
-  <div id="right" class="font-xl">
+  <div id="right" class="font-l">
     {title}
   </div>
 </a>
@@ -22,6 +22,11 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
 
 <style>
   a {
+    
+    @media (max-width: 600.5px) {
+      flex-grow: 1;
+    }
+
     display: flex;
     place-items: center;
     gap: 1em;

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

@@ -37,8 +37,8 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
     margin-bottom: 1em;
   }
   section {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: clamp(6px, 2vmax, 16px);
 
     @media (max-width: 40rem) {

src/pages/[locale]/index.astro

@@ -142,19 +142,18 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     gap: 1em;
 
     & > svg {
-      width: 64px;
-      height: 64px;
+      width: calc(var(--font-size-5xl) * 1.2);
     }
 
     & > div {
       & > h1 {
-        font-size: 54.5px;
+        font-size: var(--font-size-5xl);
         font-variation-settings: "wght" 800;
       }
 
       & > p {
         margin-top: -0.5em;
-        font-size: 20px;
+        font-size: calc(var(--font-size-5xl) * 0.365);
         font-variation-settings: "wght" 600;
       }
     }