From 386b2c4920ced1809246b0582421d0f661616533 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Thu, 4 Jul 2024 01:18:10 +0700
Subject: [PATCH] implement grid

---
 index.html | 11 ---------
 style.css  | 70 ++++--------------------------------------------------
 2 files changed, 4 insertions(+), 77 deletions(-)

diff --git a/index.html b/index.html
index 41a8da0..c211070 100644
--- a/index.html
+++ b/index.html
@@ -99,8 +99,6 @@
             </div>
           </div>
         </a>
-      </div>
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://inv.techtransthai.org/feed/trending">
           <div class="listaction">
             <img src="icons/inv.svg" alt="Invidious" width="80" height="80" style="margin: 0.3cm;"> 
@@ -128,8 +126,6 @@
             </div>
           </div>
         </a>
-      </div>
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://openkmitl.gitlab.io">
           <div class="listaction">
             <img src="icons/openkmitl.png" alt="openKMITL" width="80" height="80" style="margin: 0.3cm;"> 
@@ -157,8 +153,6 @@
             </div>
           </div>
         </a>
-      </div>
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org">
           <div class="listaction">
             <img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;"> 
@@ -203,8 +197,6 @@
             </div>
           </div>
         </a>
-      </div>
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/">
           <div class="listaction">
             <img src="icons/forgejo.svg" alt="Forgejo" width="80" height="80" style="margin: 0.3cm;"> 
@@ -232,8 +224,6 @@
             </div>
           </div>
         </a>
-      </div>
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://meet.techtransthai.org/">
           <div class="listaction">
             <img src="icons/jitsi.svg" alt="Jitsi" width="80" height="80" style="margin: 0.3cm;"> 
@@ -252,7 +242,6 @@
             </div>
           </div>
         </a>
-        <a class="itemcard-placeholder"></a>
       </div>
           
 
diff --git a/style.css b/style.css
index 9aecb03..d177551 100644
--- a/style.css
+++ b/style.css
@@ -65,8 +65,9 @@ h1 {
 }
 
 .row {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 1rem;
 }
 
 .button {
@@ -117,35 +118,11 @@ h1 {
   display: grid;
   border-radius: 12px;
   text-decoration: none;
-  margin-bottom: 0.5cm;
   height: 3cm;
-  min-width: 6cm;
-  width: 32.5%;
   transition-duration: 0.2s;
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
 }
 
-.itemcard-placeholder {
-  display: grid;
-  border-radius: 12px;
-  text-decoration: none;
-  margin-bottom: 0.5cm;
-  min-height: 3cm;
-  min-width: 6cm;
-  width: 32.5%
-}
-
-.itemcard-stealth {
-  display: grid;
-  border-radius: 12px;
-  text-decoration: none;
-  margin-bottom: 0.5cm;
-  height: 3cm;
-  min-width: 6cm;
-  width: 32.5%;
-  transition-duration: 0.2s;
-}
-
 .listaction {
   display: flex;
   align-items: center;
@@ -170,39 +147,20 @@ h1 {
     width: 90vw;
     max-width: 35cm;
   }
-  .row {
-    display: flex;
-    flex-direction: column;
-  }
   .itemcard {
     display: grid;
     border-radius: 12px;
     text-decoration: none;
-    margin-bottom: 0.5cm;
     height: 3cm;
-    min-width: 6cm;
-    width: 100%;
     transition-duration: 0.2s;
     box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
   }
-  .itemcard-placeholder {
-    display: grid;
-    border-radius: 12px;
-    text-decoration: none;
-    margin-bottom: 0.5cm;
-    min-height: 3cm;
-    min-width: 6cm;
-    width: 100%
-  }
   
   .itemcard-stealth {
     display: grid;
     border-radius: 12px;
     text-decoration: none;
-    margin-bottom: 0.5cm;
     height: 3cm;
-    min-width: 6cm;
-    width: 100%;
     transition-duration: 0.2s;
   }
   h1 {
@@ -217,39 +175,21 @@ h1 {
     width: 90vw;
     max-width: 35cm;
   }
-  .row {
-    display: flex;
-    flex-direction: column;
-  }
+
   .itemcard {
     display: grid;
     border-radius: 12px;
     text-decoration: none;
-    margin-bottom: 0.5cm;
     height: 3cm;
-    min-width: 6cm;
-    width: 100%;
     transition-duration: 0.2s;
     box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
   }
-  .itemcard-placeholder {
-    display: grid;
-    border-radius: 12px;
-    text-decoration: none;
-    margin-bottom: 0.5cm;
-    min-height: 3cm;
-    min-width: 6cm;
-    width: 100%
-  }
   
   .itemcard-stealth {
     display: grid;
     border-radius: 12px;
     text-decoration: none;
-    margin-bottom: 0.5cm;
     height: 3cm;
-    min-width: 6cm;
-    width: 100%;
     transition-duration: 0.2s;
   }
   h1 {
@@ -257,8 +197,6 @@ h1 {
   }
 }
 
-
-
 @media (prefers-color-scheme: light) {
 
   body {