From 106dc714ba9610454673f8d8affa7be495c4f698 Mon Sep 17 00:00:00 2001
From: Paul-Louis NECH <pln@algolia.com>
Date: Thu, 24 Jun 2021 18:17:31 +0200
Subject: [PATCH] chore: Better responsiveness, still WIP

---
 pages/index.js       | 38 +++++++++++++++++++++-----------------
 pages/photos/[id].js | 24 +++++++++++++-----------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 053eb54..ed542c5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -49,30 +49,34 @@ export default function Home({ data, placeholders }) {
               Philippe Bureau - Galerie Photo
             </Text>
           </Container>
-          <Wrap px="1rem" spacing={"10px"} mb={1} justify="center">
+          <Wrap px={"10rem"} spacing={"1rem"} mb={1} justify="center">
             {photos.map((photo) => (
               <WrapItem
                 key={"wrap-" + photo.id}
-                boxShadow="lg"
-                rounded="10px"
-                overflow="hidden"
-                m={3}
+                // m={3}
                 bg="white"
                 lineHeight="0"
-                _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
               >
                 <Link href={`/photos/${photo.id}`}>
-                  <Image
-                    key={photo.path}
-                    src={photo.path}
-                    width={240}
-                    height={240}
-                    objectFit="cover"
-                    quality={20}
-                    // placeholder="blur"
-                    priority
-                    blurDataURL={`${placeholders[photo.id]}`}
-                  />
+                  <Box
+                    boxShadow="lg"
+                    rounded="10px"
+                    overflow="hidden"
+                    boxSize={["120px", "180px", "200px", "240px"]}
+                    _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
+                  >
+                    <Image
+                      key={photo.path}
+                      src={photo.path}
+                      width={"240px"}
+                      height="240px"
+                      objectFit="cover"
+                      quality={20}
+                      // placeholder="blur"
+                      priority
+                      blurDataURL={`${placeholders[photo.id]}`}
+                    />
+                  </Box>
                 </Link>
               </WrapItem>
             ))}
diff --git a/pages/photos/[id].js b/pages/photos/[id].js
index cc6f5d4..c6d51f5 100644
--- a/pages/photos/[id].js
+++ b/pages/photos/[id].js
@@ -74,17 +74,19 @@ export default function Photos({ photo, placeholder }) {
 
       <Center>
         <Link href={photo.path}>
-          <Image
-            src={photo.path}
-            width={photo.dimensions.width || 480}
-            height={photo.dimensions.height || 480}
-            // objectFit="cover"
-            quality={80}
-            priority
-            placeholder="blur"
-            blurDataURL={placeholder}
-            loading="eager"
-          />
+          <Box boxSize={["xs", "sm", "md", "lg"]}>
+            <Image
+              src={photo.path}
+              width={photo.dimensions.width || 480}
+              height={photo.dimensions.height || 480}
+              // objectFit="cover"
+              quality={80}
+              priority
+              placeholder="blur"
+              blurDataURL={placeholder}
+              loading="eager"
+            />
+          </Box>
         </Link>
       </Center>
       <NavLinks prev={photo.prev} next={photo.next} />
--
libgit2 0.27.0