add: color scheme

src/pages/index.astro

@@ -3,14 +3,22 @@ import "../style.css";
 import Layout from "../components/Layout.astro";
 import Image from "../components/Image.astro";
 const imagesObj: any = import.meta.glob("../assets/IMG/*.JPG", { eager: true });
-const images = Object.values(imagesObj).map((img: any) => img.default || img);
+const images = Object.values(imagesObj)
+  .map((img: any) => img.default || img)
+  .reverse();
 ---
 
 <Layout>
-  <header>
-    <h1>Mon album photo</h1>
-  </header>
   <main>
-    {images.map((img) => <Image src={img.src} name={img.src.split("/")} />)}
+    <header>
+      <h1>Mon album photo</h1>
+    </header>
+    <article>
+      {images.map((img) => <Image src={img.src} name={img.src.split("/")} />)}
+    </article>
+    <footer>
+      Toute personne affichée sur ce site a consenti de vive voix d'apparaître
+      sur cet album photo.
+    </footer>
   </main>
 </Layout>

src/style.css

@@ -1,20 +1,46 @@
 html,
 body {
+  color: #be5985;
+  background-color: #ffedfa;
   font-family: var(--font-atkinson);
   margin: 0;
   width: 100%;
   height: 100%;
 }
+
 main {
-  margin: 4rm;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+article {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
+  gap: 10px;
+  align-items: center;
+  justify-items: center;
 }
 
 .img-fluid {
-  width: 100%;
+  width: 95%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: 4px;
+  transition: 0.2s;
+  border: 3px solid #ffb8e0;
+}
+
+.img-fluid:hover {
+  scale: 1.02;
+  border: 3px solid #ec7fa9;
+}
+
+footer {
+  margin: 4rem;
+}
+
+a {
+  display: block;
+  width: 100%;
 }