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}
+                // m={3}
+                bg="white"
+                lineHeight="0"
+              >
+                <Link href={`/photos/${photo.id}`}>
+                  <Box
                     boxShadow="lg"
                     rounded="10px"
                     overflow="hidden"
-                m={3}
-                bg="white"
-                lineHeight="0"
+                    boxSize={["120px", "180px", "200px", "240px"]}
                     _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
                   >
-                <Link href={`/photos/${photo.id}`}>
                     <Image
                       key={photo.path}
                       src={photo.path}
-                    width={240}
-                    height={240}
+                      width={"240px"}
+                      height="240px"
                       objectFit="cover"
                       quality={20}
                       // placeholder="blur"
                       priority
                       blurDataURL={`${placeholders[photo.id]}`}
                     />
+                  </Box>
                 </Link>
               </WrapItem>
             ))}

pages/photos/[id].js

@@ -74,6 +74,7 @@ export default function Photos({ photo, placeholder }) {
 
       <Center>
         <Link href={photo.path}>
+          <Box boxSize={["xs", "sm", "md", "lg"]}>
             <Image
               src={photo.path}
               width={photo.dimensions.width || 480}
@@ -85,6 +86,7 @@ export default function Photos({ photo, placeholder }) {
               blurDataURL={placeholder}
               loading="eager"
             />
+          </Box>
         </Link>
       </Center>
       <NavLinks prev={photo.prev} next={photo.next} />