chore: Better responsiveness, still WIP

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>
             ))}

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} />