add responsiveness to the favorites section (#137)

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"

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"

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"

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"

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,
 };

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: [],