Small improvements on mobile

TODO.md

@@ -7,7 +7,7 @@
 ## Short term
 
 - Display if a content has a source language
-- [JSLess] Display if a content is available in more than one 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
 - [RichTextContent] Add autolink block support

src/components/AppLayout/components/Footer.astro

@@ -123,7 +123,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
 <style>
   footer {
     border-top: 0.1em solid var(--color-base-1000);
-    padding-top: 2em;
+    padding-block: 2em;
     display: flex;
     place-content: center;
     gap: clamp(1.5em, 1.25em + 2vw, 4em);

src/components/InlineMetadata.astro

@@ -24,12 +24,18 @@ if (values.length === 0) return;
     font-weight: 400;
     font-size: 80%;
     display: flex;
-    gap: 0.5em;
+    flex-wrap: wrap;
+    gap: 0.1em 0.5em;
 
     & > p {
       color: var(--color-base-750);
     }
 
+    & > div {
+      line-height: 1.2;
+      font-size: 90%;
+    }
+
     & > svg {
       color: var(--color-base-750);
       flex-shrink: 0;

src/components/Previews/GenericPreview.astro

@@ -152,7 +152,7 @@ const {
         line-height: 1;
         display: grid;
         overflow-wrap: anywhere;
-        font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
+        font-size: clamp(0.8em, 0.35em + 0.75vw, 1em);
         font-weight: 800;
 
         & > #pretitle {

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

@@ -112,6 +112,15 @@ const meta = getLocalizedMatch(folder.translations);
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: clamp(6px, 2vmin, 16px);
       align-items: start;
+
+      @media (max-width: 40rem) {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 12px;
+      }
+
+      @media (max-width: 24rem) {
+        grid-template-columns: 1fr;
+      }
     }
   }
 </style>

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

@@ -29,6 +29,7 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
     padding: 12px 24px;
     border-radius: 12px;
     text-decoration: none;
+    font-size: clamp(0.8em, 0.35em + 0.75vw, 1em);
 
     & > svg {
       width: 24px;
@@ -42,7 +43,7 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
       gap: 2px;
 
       & > h3 {
-        font-size: 1.25em;
+        font-size: 125%;
       }
     }
   }

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

@@ -39,6 +39,10 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
   section {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 0.7rem 1rem;
+    gap: clamp(6px, 2vmax, 16px);
+
+    @media (max-width: 40rem) {
+      row-gap: 12px;
+    }
   }
 </style>