From 6807ba9f363b0b62b3ead9d7ac256c85c82efac8 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 13 Sep 2023 10:24:29 +0200
Subject: Responsive book grid

---
 public/main.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/main.css b/public/main.css
index d920a26..32fa377 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,14 +3,15 @@
 :root {
   --color-focus: #888833;
 
-  --width-close-button: 3rem;
-
   --font-size-dog: 1.5rem;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
   --spacing-dog: 1rem;
   --spacing-horse: 2rem;
+
+  --width-close-button: 3rem;
+  --width-book: 13rem;
 }
 
 /* Top level */
@@ -154,7 +155,7 @@ header {
 
 .g-Books {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--width-book), 1fr));
   grid-gap: 1rem;
 }
 
@@ -177,7 +178,7 @@ header {
 
 .g-Book__Image {
   display: flex;
-  width: 13rem;
+  width: var(--width-book);
   transition: all 0.2s ease-in-out;
 }
 
@@ -189,7 +190,7 @@ header {
 }
 
 .g-BookDetail img {
-  width: 13rem;
+  width: var(--width-book);
   margin-right: var(--spacing-horse);
   border: 1px solid #EEE;
 }
-- 
cgit v1.2.3