From 5ed3ad4fa3201356e00d0573f4932fbf191d8586 Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Wed, 25 Jan 2023 09:58:15 +0100
Subject: [PATCH] Preserve consistent gap between items in the favorites
 section (#170)

---
 src/web/sections/favorites/book-tile.astro           |  2 +-
 .../sections/favorites/favorites-section.web.astro   |  8 ++++----
 .../sections/favorites/favorites-sub-section.astro   | 12 +++++++++---
 src/web/sections/favorites/media-tile.astro          |  2 +-
 src/web/sections/favorites/person-tile.astro         |  2 +-
 src/web/sections/favorites/video-tile.astro          |  2 +-
 tailwind.config.cjs                                  |  8 --------
 7 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/web/sections/favorites/book-tile.astro b/src/web/sections/favorites/book-tile.astro
index 166424c..44b6ca3 100644
--- a/src/web/sections/favorites/book-tile.astro
+++ b/src/web/sections/favorites/book-tile.astro
@@ -8,7 +8,7 @@ export interface Props extends Book {}
 const { author, image, title, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo src={image} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md" width={300} height={400} />
   <div class="w-full gap-1">
     <Typography variant="tile-title">
diff --git a/src/web/sections/favorites/favorites-section.web.astro b/src/web/sections/favorites/favorites-section.web.astro
index 6a99e44..88ad6f3 100644
--- a/src/web/sections/favorites/favorites-section.web.astro
+++ b/src/web/sections/favorites/favorites-section.web.astro
@@ -15,16 +15,16 @@ const { config, books, medias, people, videos } = Astro.props;
 
 <SectionCard {...config}>
   <div class="flex flex-col gap-16">
-    <FavoritesSubSection class="grid-cols-fluid200" subSection={books}>
+    <FavoritesSubSection minTileWidth={160} subSection={books}>
       {books?.data.map((book) => <BookTile {...book} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid120" subSection={people}>
+    <FavoritesSubSection minTileWidth={120} subSection={people}>
       {people?.data.map((person) => <PersonTile {...person} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid240" subSection={videos}>
+    <FavoritesSubSection minTileWidth={204} subSection={videos}>
       {videos?.data.map((video) => <VideoTile {...video} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid120" subSection={medias}>
+    <FavoritesSubSection minTileWidth={120} subSection={medias}>
       {medias?.data.map((media) => <MediaTile {...media} />)}
     </FavoritesSubSection>
   </div>
diff --git a/src/web/sections/favorites/favorites-sub-section.astro b/src/web/sections/favorites/favorites-sub-section.astro
index f225b4b..a3653d2 100644
--- a/src/web/sections/favorites/favorites-sub-section.astro
+++ b/src/web/sections/favorites/favorites-sub-section.astro
@@ -4,19 +4,25 @@ import Typography from '@/web/components/typography.astro';
 
 export interface Props {
   subSection?: SubSection;
-  class: string;
+  minTileWidth: number;
 }
 
-const { subSection, ...props } = Astro.props;
+const { subSection, minTileWidth } = Astro.props;
 ---
 
 {
   subSection && (
     <div class="flex flex-col gap-6">
       <Typography variant="section-subtitle">{subSection.title}</Typography>
-      <div class:list={['gap-8 grid', props.class]}>
+      <div class="tile grid gap-8" style={{ '--min-tile-width': `${minTileWidth}px` }}>
         <slot />
       </div>
     </div>
   )
 }
+
+<style>
+  .tile {
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-tile-width), 1fr));
+  }
+</style>
diff --git a/src/web/sections/favorites/media-tile.astro b/src/web/sections/favorites/media-tile.astro
index 739aa6f..cd318d2 100644
--- a/src/web/sections/favorites/media-tile.astro
+++ b/src/web/sections/favorites/media-tile.astro
@@ -8,7 +8,7 @@ export interface Props extends Media {}
 const { image, title, type, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} width={200} height={200} />
   <div class="gap-1">
     <Typography variant="tile-title">
diff --git a/src/web/sections/favorites/person-tile.astro b/src/web/sections/favorites/person-tile.astro
index 3d8ebc7..99ab839 100644
--- a/src/web/sections/favorites/person-tile.astro
+++ b/src/web/sections/favorites/person-tile.astro
@@ -8,7 +8,7 @@ export interface Props extends Person {}
 const { image, name, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo
     class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     src={image}
diff --git a/src/web/sections/favorites/video-tile.astro b/src/web/sections/favorites/video-tile.astro
index 9238461..d8911bc 100644
--- a/src/web/sections/favorites/video-tile.astro
+++ b/src/web/sections/favorites/video-tile.astro
@@ -8,7 +8,7 @@ export interface Props extends Video {}
 const { title, url, image } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo class="rounded-lg shadow-md aspect-video object-cover" src={image} alt={title} width={480} height={270} />
   <Typography variant="tile-title">
     {title}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ea5f0a2..03ca7f5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -13,14 +13,6 @@ module.exports = {
       gray: colors.gray,
     },
     extend: {
-      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))',
-      },
       keyframes: {
         show: {
           from: { opacity: '0' },