From 1f4d504595e61fd764be32fbb5feb4ab2dd8dafb Mon Sep 17 00:00:00 2001
From: Banyu_sans <banyuarfa1122@gmail.com>
Date: Wed, 11 Sep 2024 05:55:20 -0700
Subject: [PATCH] fix: loading center

---
 index.html |  2 +-
 script.js  |  4 +++-
 style.css  | 30 +++++++++++++-----------------
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 96286e2..219fc13 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@ <h1>ESSA</h1>
     </section>
 
 
-    <section class="gallery">
+    <section class="gallery grid">
       <div class="gallery__loading">
         <img src="assets/spinner.svg" alt="loading" />
         <h1>Loading...</h1>
diff --git a/script.js b/script.js
index 851c598..2eef25e 100644
--- a/script.js
+++ b/script.js
@@ -35,6 +35,7 @@ function createMedia(media) {
 }
 function hideMediasLoading() {
   const loading = document.querySelector(".gallery__loading");
+  gallerySect.classList.remove("grid");
   loading.style.display = "none";
 }
 getMedias();
@@ -52,7 +53,8 @@ function createInfos([url, type, id, uploadDate, author]) {
   <div class="img__info">
     <p><b>Type:</b> ${type}</p>
     <p><b>ID:</b> ${id}</p>
-    <p><b>Upload Date:</b> ${uploadDate}</p>
+    <p-+><b>Upload Date:</b> ${uploadDate}</p-+
+    
     <p><b>Author:</b> ${author}</p>
   </div>`;
 }
diff --git a/style.css b/style.css
index ab8f077..f43056a 100644
--- a/style.css
+++ b/style.css
@@ -17,27 +17,24 @@ header {
   }
 } */
 
-
-
+.grid {
+  display: grid;
+  place-content: center;
+}
 .gallery {
-  width: 100%;
-  margin: 0 auto;
-  columns: 3;
-
+  columns: 300px;
   min-height: 100vh;
   padding: 2rem;
-
   & .media__container {
-    
-    break-inside: avoid;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     margin-bottom: 0.5rem;
+    object-fit: contain;
     & img {
+      scale: 1.1;
       border-radius: 2px;
       width: 100%;
-      
     }
     & .media__button {
       position: absolute;
@@ -53,8 +50,8 @@ header {
       -o-transform: translateY(-50%) translateX(-50%);
     }
     &:hover img {
-      scale: 1.1;
       transition: 500ms;
+      scale: 1.2;
       border-radius: 2px;
       filter: brightness(0.5);
       -webkit-filter: brightness(0.5);
@@ -72,6 +69,11 @@ header {
       -o-transition: 400ms cubic-bezier(0, 2, 1, 1);
     }
   }
+  @media (width <= 700px) {
+    & {
+      columns: 2;
+    }
+  }
 }
 .media__modal {
   background-color: #fff;
@@ -106,12 +108,6 @@ header {
   }
 }
 
-@media (max-width: 800px) {
-  .gallery {
-    columns: 2;
-  }
-}
-
 .gallery__loading {
   text-align: center;
   & img {