From 40083dd24ba36c67615a8f0d59030aa174ba2622 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 25 May 2024 17:15:52 +0200
Subject: [PATCH] Small improvements on mobile

---
 TODO.md                                                  | 2 +-
 src/components/AppLayout/components/Footer.astro         | 2 +-
 src/components/InlineMetadata.astro                      | 8 +++++++-
 src/components/Previews/GenericPreview.astro             | 2 +-
 src/pages/[locale]/folders/[slug].astro                  | 9 +++++++++
 src/pages/[locale]/folders/_components/FolderCard.astro  | 3 ++-
 .../[locale]/folders/_components/FoldersSection.astro    | 6 +++++-
 7 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/TODO.md b/TODO.md
index 3519ca0..d3623f5 100644
--- a/TODO.md
+++ b/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
diff --git a/src/components/AppLayout/components/Footer.astro b/src/components/AppLayout/components/Footer.astro
index 491d836..4cc5e5f 100644
--- a/src/components/AppLayout/components/Footer.astro
+++ b/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);
diff --git a/src/components/InlineMetadata.astro b/src/components/InlineMetadata.astro
index 39a9717..52b0e9f 100644
--- a/src/components/InlineMetadata.astro
+++ b/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;
diff --git a/src/components/Previews/GenericPreview.astro b/src/components/Previews/GenericPreview.astro
index 800b17c..9c6f7aa 100644
--- a/src/components/Previews/GenericPreview.astro
+++ b/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 {
diff --git a/src/pages/[locale]/folders/[slug].astro b/src/pages/[locale]/folders/[slug].astro
index 93e232b..c8d6c47 100644
--- a/src/pages/[locale]/folders/[slug].astro
+++ b/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>
diff --git a/src/pages/[locale]/folders/_components/FolderCard.astro b/src/pages/[locale]/folders/_components/FolderCard.astro
index 9328d69..97d3754 100644
--- a/src/pages/[locale]/folders/_components/FolderCard.astro
+++ b/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%;
       }
     }
   }
diff --git a/src/pages/[locale]/folders/_components/FoldersSection.astro b/src/pages/[locale]/folders/_components/FoldersSection.astro
index 568bedb..aed739c 100644
--- a/src/pages/[locale]/folders/_components/FoldersSection.astro
+++ b/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>