From 7d734808cfa08d6519ee2eccb734280ca8bc14c3 Mon Sep 17 00:00:00 2001
From: angbur <41025473+angbur@users.noreply.github.com>
Date: Tue, 3 Jan 2023 16:39:48 +0100
Subject: [PATCH] add responsiveness to the favorites section (#137)

---
 src/components/atoms/book-tile.astro            | 2 +-
 src/components/atoms/media-tile.astro           | 2 +-
 src/components/atoms/person-tile.astro          | 2 +-
 src/components/atoms/video-tile.astro           | 2 +-
 src/components/sections/favorites-section.astro | 8 ++++----
 tailwind.config.cjs                             | 5 +++++
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro
index 279dd53..ed14810 100644
--- a/src/components/atoms/book-tile.astro
+++ b/src/components/atoms/book-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-[3/4] object-cover"
     format="webp"
diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro
index 6327ad7..a478809 100644
--- a/src/components/atoms/media-tile.astro
+++ b/src/components/atoms/media-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-square object-cover"
     fit="cover"
diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro
index 44038b9..4e0b0a8 100644
--- a/src/components/atoms/person-tile.astro
+++ b/src/components/atoms/person-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     format="webp"
diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro
index 68b5b1a..9c35492 100644
--- a/src/components/atoms/video-tile.astro
+++ b/src/components/atoms/video-tile.astro
@@ -16,7 +16,7 @@ const id = url.split('/').pop();
 const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-video object-cover"
     format="webp"
diff --git a/src/components/sections/favorites-section.astro b/src/components/sections/favorites-section.astro
index 6e05004..9409443 100644
--- a/src/components/sections/favorites-section.astro
+++ b/src/components/sections/favorites-section.astro
@@ -35,28 +35,28 @@ interface FavoritesSubsection<T extends SubsectionData> {
 
 const booksSubsection: FavoritesSubsection<Book> = {
   name: 'books',
-  columnsLayout: 'grid-cols-4',
+  columnsLayout: 'grid-cols-fluid200',
   Component: BookTile,
   ...books,
 };
 
 const mediasSubsection: FavoritesSubsection<Media> = {
   name: 'medias',
-  columnsLayout: 'grid-cols-6',
+  columnsLayout: 'grid-cols-fluid120',
   Component: MediaTile,
   ...medias,
 };
 
 const peopleSubsection: FavoritesSubsection<Person> = {
   name: 'people',
-  columnsLayout: 'grid-cols-6',
+  columnsLayout: 'grid-cols-fluid120',
   Component: PersonTile,
   ...people,
 };
 
 const videosSubsection: FavoritesSubsection<Video> = {
   name: 'videos',
-  columnsLayout: 'grid-cols-3',
+  columnsLayout: 'grid-cols-fluid240',
   Component: VideoTile,
   ...videos,
 };
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7adee83..2f5f563 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,6 +16,11 @@ module.exports = {
       spacing: {
         22: '5.5rem',
       },
+      gridTemplateColumns: {
+        fluid120: 'repeat(auto-fit, minmax(120px, 1fr))',
+        fluid200: 'repeat(auto-fit, minmax(200px, 1fr))',
+        fluid240: 'repeat(auto-fit, minmax(240px, 1fr))',
+      },
     },
   },
   plugins: [],