Add about and external link sections

cantarell/cantarell.css

@@ -5,4 +5,11 @@
 	font-weight: 400;
 	src: local("Cantarell Regular"), local("Cantarell-Regular"), url(cantarell-regular.woff2) format("woff2");
 }
+/* cantarell-bold */
+@font-face {
+	font-family: Cantarell;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Cantarell Bold"), local("Cantarell-Bold"), url(cantarell-bold.woff2) format("woff2");
+}
 

index.html

@@ -14,7 +14,6 @@
   </div>
   <div class="grid-container">
 
-    <div class="left"></div>
     <div class="middle">
           
       <h2>บริการ</h2>
@@ -25,7 +24,7 @@
                 <img src="icons/dawncraft.gif" alt="Dawncraft" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">Dawncraft</h3>
+                <h3>Dawncraft</h3>
                 <p>เซิร์ฟเวอร์ Minecraft พร้อมม็อด Dawncraft</p>
               </div>
               <div>
@@ -41,7 +40,7 @@
                 <img src="icons/docuseal.svg" alt="DocuSeal" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">DocuSeal</h3>
+                <h3>DocuSeal</h3>
                 <p>สร้าง กรอก และเซ็นเอกสารดิจิทัล</p>
               </div>
               <div>
@@ -57,7 +56,7 @@
                 <img src="icons/inv.svg" alt="Invidious" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">Invidious</h3>
+                <h3>Invidious</h3>
                 <p>ดูวิดีโอจาก YouTube ไร้โฆษณากวนใจ</p>
               </div>
               <div>
@@ -73,7 +72,7 @@
                 <img src="icons/librespeed.png" alt="LibreSpeed" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">LibreSpeed</h3>
+                <h3>LibreSpeed</h3>
                 <p>ทดสอบความเร็วอินเทอร์เน็ต</p>
               </div>
               <div>
@@ -89,7 +88,7 @@
                 <img src="icons/ll.svg" alt="little-lines" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">Little Lines</h3>
+                <h3>Little Lines</h3>
                 <p>ระบบนำทางสำหรับล้อขนาดเล็ก</p>
               </div>
               <div>
@@ -105,7 +104,7 @@
                 <img src="icons/nextcloud.svg" alt="Nextcloud" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">Nextcloud</h3>
+                <h3>Nextcloud</h3>
                 <p>บ้านที่ปลอดภัยสำหรับข้อมูลของคุณ</p>
               </div>
               <div>
@@ -120,7 +119,7 @@
                 <img src="icons/syncthing.svg" alt="syncthing-relay" width="80" height="80" style="margin-left: 0.3cm;"> 
               </div>
               <div>
-                <h3 class="h3">Syncthing Relay</h3>
+                <h3>Syncthing Relay</h3>
                 <p>Relay server สำหรับ Syncthing</p>
               </div>
               <div>
@@ -140,7 +139,7 @@
               <img src="icons/f4c.svg" alt="FOSS4Change" width="80" height="80" style="margin-left: 0.3cm;"> 
             </div>
             <div>
-              <h3 class="h3">FOSS4Change</h3>
+              <h3>FOSS4Change</h3>
               <p>ร่วมสร้างการเปลี่ยนแปลงด้วยโอเพนซอร์ส</p>
             </div>
             <div>
@@ -156,7 +155,7 @@
               <img src="icons/c4c.png" alt="Compute4Change" width="80" height="80" style="margin-left: 0.3cm;"> 
             </div>
             <div>
-              <h3 class="h3">Compute4Change</h3>
+              <h3>Compute4Change</h3>
               <p>อัปเดตความเคลื่อนไหวจากวงการ BOINC</p>
             </div>
             <div>
@@ -172,7 +171,7 @@
               <img src="icons/pgtechs.png" alt="PGTechs" width="80" height="80" style="margin-left: 0.3cm;"> 
             </div>
             <div>
-              <h3 class="h3">PGTechs (Discontinued)</h3>
+              <h3>PGTechs (Discontinued)</h3>
               <p>เทคโนโลยีเพื่อทุกคน</p>
             </div>
             <div>
@@ -182,18 +181,47 @@
 
         </div>  
 
-    <div class="right"></div>
+
+      <h2>รู้จักกับเรา</h2>
+
+      <div class="list">
+        <div class="inner-grid">
+              <div>
+                <img src="icons/latenightdef.png" alt="Dawncraft" width="80" height="80" style="margin-left: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);"> 
+              </div>
+              <div>
+                <div style="display: flex; margin-bottom: -5%; align-items: center;">
+                  <h3>Late Night Defender</h3>
+                  <p></p>
+                </div>
+                <p>Linux, BOINC and OSM nerd จากประเทศไทย</p>
+              </div>
+              <div>
+                <a href="https://en.pronouns.page/@latenightdef" class="button">Profile...</a>
+              </div>
             </div>
       </div>
 
-  
+      <h2>ข้อมูลเพิ่มเติม</h2>
-    <div class="footer">
+        <div style="display: grid;   grid-auto-columns: 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; ">
-      <a href="https://codeberg.org/latenightdef/ttt-org" class="versionbutton">DATE-VERSION</a>
+          <a href="https://codeberg.org/latenightdef/ttt-org" class="bigbutton" style="display: flex;>">
+            <img src="icons/version.png"; alt="version" width="36" height="36" style="margin-right: 10px;" > 
+            <div>
+              <h3 style="margin-bottom: -5%">เวอร์ชัน DATE-VERSION</h3>
+              <p>ดูซอร์สโค้ดของเว็บไซต์นี้บน Codeberg</p>
             </div>
-    <div class="footer">
+          </a>
-      <a href="https://status.techtransthai.org/status/techtransthai">Service status</a>
+          <a href="https://status.techtransthai.org/status/techtransthai" class="bigbutton" style="display: flex;"">
+            <img src="icons/version.png"; alt="version" width="36" height="36" style="margin-right: 10px;" > 
+            <div>
+              <h3 style="margin-bottom: -5%;">สถานะของบริการ</h3>
+              <p>ดูสถานะการทำงานบน Uptime Kuma</p>
             </div>
+          </a>
 
+        </div>
+    </div>
+  </div>
 
 </body>
 </html>

style.css

@@ -44,17 +44,17 @@ body {
   align-items: center;
 }
 
-.versionbutton {
+.bigbutton {
-  background-color: #E5EFFB;
+
-  color: #1a5fb4;
+  background-color: #fafafa;
+  color: black;
   border: none;
-  border-radius:50px;
+  border-radius:10px;
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  display: flex;
+  display: grid;
-  font-size: 16px;
+  font-size: 12px;
-  font-weight: bold;
   cursor: pointer;
   padding-top: 10px;
   padding-right: 15px;
@@ -62,6 +62,12 @@ body {
   padding-left: 15px;
   margin-top: 10px;
   margin-bottom: 10px;
+  transition-duration: 0.2s;
+}
+
+.bigbutton:hover {
+  background-color: #E0E0E0;
+  
 }
 
 .grid-container {