From 3b0d373b6ea2fe1bda449b2a835cd2e4394edc0a Mon Sep 17 00:00:00 2001
From: VRSasha <pongpeera054@protonmail.com>
Date: Thu, 3 Aug 2023 01:24:02 +0700
Subject: [PATCH] rearrange list items

---
 index.html | 146 +++++++++++++++++++++++++++++++++++++++++++----------
 style.css  |  12 ++++-
 2 files changed, 129 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index 9eb7748..6496440 100644
--- a/index.html
+++ b/index.html
@@ -19,45 +19,135 @@
           
       <h2>บริการ</h2>
           <div class="list">
-            <h3 class="h3">Dawncraft</h3>
-            <p>เซิร์ฟเวอร์ Minecraft พร้อมม็อด Dawncraft</p>
-            <a href="https://status.techtransthai.org/status/techtransthai" class="button">Status</a>
+            <!-- Dawncraft -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">Dawncraft</h3>
+                <p>เซิร์ฟเวอร์ Minecraft พร้อมม็อด Dawncraft</p>
+              </div>
+              <div>
+                <a href="https://status.techtransthai.org/status/techtransthai" class="button">Status</a>
+              </div>
+            </div>
 
-            <h3 class="h3">Invidious</h3>
-            <p>ดูวิดีโอจาก YouTube ไร้โฆษณากวนใจ</p>
-            <a href="https://video.techtransthai.org/" class="button">Visit</a>
+            <!-- Invidious -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">Invidious</h3>
+                <p>ดูวิดีโอจาก YouTube ไร้โฆษณากวนใจ</p>
+              </div>
+              <div>
+                <a href="https://video.techtransthai.org/feed/trending" class="button">Visit</a>
+              </div>
+            </div>
 
-            <h3 class="h3">LibreSpeed</h3>
-            <p>ทดสอบความเร็วอินเทอร์เน็ต</p>
-            <a href="https://test.techtransthai.org/" class="button">Visit</a>
+            <!-- LibreSpeed -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">LibreSpeed</h3>
+                <p>ทดสอบความเร็วอินเทอร์เน็ต</p>
+              </div>
+              <div>
+                <a href="https://test.techtransthai.org/" class="button">Visit</a>
+              </div>
+            </div>
 
-            <h3 class="h3">Little Lines</h3>
-            <p>ระบบนำทางสำหรับล้อขนาดเล็ก</p>
-            <a href="https://little-lines.techtransthai.org/" class="button">Visit</a>
+            <!-- Little Lines -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">Little Lines</h3>
+                <p>ระบบนำทางสำหรับล้อขนาดเล็ก</p>
+              </div>
+              <div>
+                <a href="https://little-lines.techtransthai.org/" class="button">Visit</a>
+              </div>
+            </div>
 
-            <h3 class="h3">Nextcloud</h3>
-            <p>บ้านที่ปลอดภัยสำหรับข้อมูลของคุณ</p>
-            <a href="https://cloud.techtransthai.org/" class="button">Visit</a>
+            <!-- Nextcloud -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">Nextcloud</h3>
+                <p>บ้านที่ปลอดภัยสำหรับข้อมูลของคุณ</p>
+              </div>
+              <div>
+                <a href="https://cloud.techtransthai.org/" class="button">Visit</a>
+              </div>
+            </div>
+
+            <!-- Syncthing Relay -->
+            <div class="inner-grid">
+              <div>
+                <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+              </div>
+              <div>
+                <h3 class="h3">Syncthing Relay</h3>
+                <p>Relay server สำหรับ Syncthing</p>
+              </div>
+              <div>
+                <a href="https://relays.syncthing.net/" class="button">See stats</a>
+              </div>
+            </div>
 
-            <h3 class="h3">Syncthing Relay</h3>
-            <p>Relay server สำหรับ Syncthing</p>
-            <a href="https://relays.syncthing.net/" class="button">See stats</a>
           </div>
 
       <h2>โปรเจกต์</h2>
 
         <div class="list">
-          <h3 class="h3">FOSS4Change</h3>
-          <p>ร่วมสร้างการเปลี่ยนแปลงด้วยโอเพนซอร์ส</p>
-          <a href="https://www.youtube.com/@FOSS4Change" class="button">Visit</a>
+          <!-- FOSS4Change -->
+          <div class="inner-grid">
+            <div>
+              <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+            </div>
+            <div>
+              <h3 class="h3">FOSS4Change</h3>
+              <p>ร่วมสร้างการเปลี่ยนแปลงด้วยโอเพนซอร์ส</p>
+            </div>
+            <div>
+              <a href="https://www.youtube.com/@FOSS4Change" class="button">Visit</a>
+            </div>
+          </div>
+          <!-- Compute4Change -->
+          <div class="inner-grid">
+            <div>
+              <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+            </div>
+            <div>
+              <h3 class="h3">Compute4Change</h3>
+              <p>อัปเดตความเคลื่อนไหวจากวงการ BOINC</p>
+            </div>
+            <div>
+              <a href="https://compute4change.wordpress.com/" class="button">Visit</a>
+            </div>
+          </div>
+          <!-- Syncthing Relay -->
+          <div class="inner-grid">
+            <div>
+              <img src="icons/ttt-org.png" alt="TTT Logo" width="80" height="80" style="margin-left: 0.3cm;"> 
+            </div>
+            <div>
+              <h3 class="h3">PGTechs (Discontinued)</h3>
+              <p>เทคโนโลยีเพื่อทุกคน</p>
+            </div>
+            <div>
+              <a href="https://www.youtube.com/@PGTechs" class="button">Visit</a>
+            </div>
+          </div>
 
-          <h3 class="h3">Compute4Change</h3>
-          <p>อัปเดตความเคลื่อนไหวจากวงการ BOINC</p>
-          <a href="https://compute4change.wordpress.com/" class="button">Visit</a>
-
-          <h3 class="h3">PGTechs (Discontinued)</h3>
-          <p>เทคโนโลยีเพื่อทุกคน</p>
-          <a href="https://www.youtube.com/@PGTechs" class="button">Visit</a>
         </div>  
 
     <div class="right"></div>
diff --git a/style.css b/style.css
index 569e3cf..94a835c 100644
--- a/style.css
+++ b/style.css
@@ -68,7 +68,6 @@ body {
   justify-content: center;
   grid-template-areas: 
     'left middle right' 
-
 } 
 
 .left {
@@ -85,6 +84,17 @@ body {
   grid-area: right;
 }
 
+.inner-grid {
+  display: grid;
+  align-items: center;
+  grid-template-areas: 
+    'inner-left inner-middle inner-right' 
+  
+} 
+
+
+
+
 .list {
   border-radius: 12px 12px 12px 12px;
   background-color: rgba(255, 255, 255, 1);