Merge pull request #3 from Vkzapple/main

Buat style gallery lebih bagus
Essa-Media · Sep 11, 2024 · b4a787b · b4a787b
2 parents 9f6e8ff + df833de
commit b4a787b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -8,22 +8,32 @@
   </head>
   <body>
     <dialog class="media__modal">
-      <button onclick="hideFullMedia()">
+      <button onclick="hideFullMedia()">  
         <img src="assets/cross.svg" alt="" />
       </button>
       <div class="media-infos"></div>
     </dialog>
 
     <header>
       <h1>ESSA</h1>
+      <nav>
+
+      </nav>
     </header>
+    <section id="hero">
+
+    </section>
+
 
     <section class="gallery">
       <div class="gallery__loading">
         <img src="assets/spinner.svg" alt="loading" />
         <h1>Loading...</h1>
       </div>
     </section>
+    <footer>
+
+    </footer>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -11,27 +11,33 @@ header {
   padding: 2rem;
 }
 
+/* @media only screen and (min-width: 600px) {
+  .gallery {
+    columns: 2;
+  }
+} */
+
+
 
 .gallery {
   width: 100%;
   margin: 0 auto;
   columns: 3;
-  columns-gap: 0.25rem;
+
   min-height: 100vh;
   padding: 2rem;
 
   & .media__container {
 
     break-inside: avoid;
-    /* background-color: black; */
     position: relative;
     overflow: hidden;
     cursor: pointer;
+    margin-bottom: 0.5rem;
     & img {
-      border-radius: 3vh;
+      border-radius: 2px;
       width: 100%;
-      display: block;
-      margin-bottom: 0.5rem;
+
     }
     & .media__button {
       position: absolute;
@@ -47,8 +53,9 @@ header {
       -o-transform: translateY(-50%) translateX(-50%);
     }
     &:hover img {
-      /* scale: 1.1; */
+      scale: 1.1;
       transition: 500ms;
+      border-radius: 2px;
       filter: brightness(0.5);
       -webkit-filter: brightness(0.5);
       -webkit-transition: 500ms;
@@ -98,6 +105,13 @@ header {
     backdrop-filter: blur(5px) brightness(0.5);
   }
 }
+
+@media (max-width: 800px) {
+  .gallery {
+    columns: 2;
+  }
+}
+
 .gallery__loading {
   text-align: center;
   & img {