add: responsive

src/pages/photos/[filename].astro

@@ -6,7 +6,7 @@ import Layout from "../../components/Layout.astro";
 import { Photo } from "../../models/photo";
 const { filename } = Astro.params;
 import { PHOTO_DIR_ABSOLUTE_PATH } from "astro:env/server";
-import { initPhoto, initPhotos } from "../../misc";
+import { initPhoto } from "../../misc";
 
 const relativePath = `../../assets/IMG/${filename}`;
 const allImages: any = import.meta.glob("../../assets/IMG/*.JPG", {
@@ -46,9 +46,9 @@ if (imageImport && filename) {
         />
       </a>
       <div>
-        <p><strong>Description de l'image : </strong>{p.description}</p>
-        <p><strong>Modèle de l'appareil : </strong>{p.model}</p>
-        <p><strong>Dimension de l'image : </strong>{p.width}x{p.height}</p>
+        <p><span>Description de l'image : </span>{p.description}</p>
+        <p><span>Modèle de l'appareil : </span>{p.model}</p>
+        <p><span>Dimension de l'image : </span>{p.width}x{p.height}</p>
       </div>
     </main>
   </article>

src/styles/detail.css

@@ -5,15 +5,54 @@ article {
   display: flex;
   flex-direction: column;
 
-  main {
+  > main {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2rem;
 
-    img {
-      max-width: 80%;
-      border: 4px solid #ffb8e0;
-      border-radius: 4px;
+    > a {
+      display: inline-block;
+      max-width: 60%;
+      min-width: 60%;
+
+      > img {
+        width: 100%;
+        height: auto;
+        border: 4px solid var(--secondary-background-color);
+        border-radius: 4px;
+      }
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      align-items: flex-start;
+
+      > p {
+        margin: 0;
+
+        > span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  article {
+    justify-content: center;
+    align-items: center;
+
+    > main {
+      flex-direction: column;
+      align-items: center;
+
+      > a {
+        max-width: 95%;
+        min-width: 95%;
+      }
     }
   }
 }

src/styles/global.css

@@ -1,8 +1,8 @@
 :root {
-  --primary-background-color: #ffedfa;
-  --secondary-background-color: #ffb8e0;
-  --font-color: #be5985;
-  --font-hover: #ec7fa9;
+  --primary-background-color: #3a0519;
+  --secondary-background-color: #670d2f;
+  --font-hover: #a53860;
+  --font-color: #ef88ad;
 }
 
 * {
@@ -18,15 +18,15 @@ body {
   width: 100%;
   height: 100%;
 
-  div {
+  > div {
     display: flex;
     align-items: center;
     flex-direction: column;
 
-    header {
+    > header {
       width: 95%;
 
-      nav {
+      > nav {
         display: flex;
         align-items: baseline;
         justify-content: space-between;
@@ -34,7 +34,7 @@ body {
         margin: 2rem 0;
         background-color: var(--secondary-background-color);
 
-        button {
+        > button {
           background-color: transparent;
           border: none;
           margin: 0;
@@ -45,25 +45,37 @@ body {
           appearance: none;
         }
 
-        a,
+        > a,
         button {
           padding: 0 1rem;
           text-decoration: none;
           color: var(--font-color);
           transition: 0.2s;
-        }
 
-        a:hover,
-        button:hover {
-          scale: 1.02;
-          cursor: pointer;
-          color: var(--font-hover);
+          &:hover {
+            scale: 1.02;
+            cursor: pointer;
+            color: var(--font-hover);
+          }
         }
       }
     }
 
-    footer {
+    > footer {
       margin: 4rem;
     }
   }
 }
+
+@media screen and (max-width: 450px) {
+  body div {
+    > header nav {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    > footer {
+      text-align: center;
+    }
+  }
+}

src/styles/index.css

@@ -6,17 +6,29 @@ main {
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
 
-  img {
+  a img {
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     border-radius: 4px;
     transition: 0.2s;
-    border: 4px solid #ffb8e0;
-  }
+    border: 4px solid var(--secondary-background-color);
 
-  img:hover {
-    scale: 1.02;
-    border: 3px solid #ec7fa9;
+    &:hover {
+      scale: 1.02;
+      border: 3px solid var(--font-hover);
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  main {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (min-width: 600px) and (max-width: 900px) {
+  main {
+    grid-template-columns: repeat(2, 1fr);
   }
 }