From 4768cad8ebdb69f3102f342301e0e9ac71692643 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Thu, 4 Jul 2024 00:31:20 +0700
Subject: [PATCH] Add support for tablet screens

---
 index.html |  2 +-
 style.css  | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b2376c6..ebc9a1e 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
 
     <div class="middle-large">
       
-      <h1 class="title">เทคทรานส์ไทย</h1>
+      <h1>เทคทรานส์ไทย</h1>
       
       <p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p>
 
diff --git a/style.css b/style.css
index c3d73f6..b52e876 100644
--- a/style.css
+++ b/style.css
@@ -6,6 +6,13 @@ html *
    font-family: Inter, Cantarell, sans-serif;
 }
 
+p {
+  font-size: 11pt;
+}
+
+h1 {
+  margin-top: 3vh;
+}
 .centerscreen {
   height: 100vh;
   display: flex;
@@ -148,6 +155,59 @@ html *
   align-items: center;
 }
 
+.emojidecorations {
+  font-size: 16pt;
+  text-align: center;
+}
+
+/* For tablet screens */
+@media only screen and (min-width: 750px) and (max-width: 1366px) {
+  .middle-large {
+    grid-area: middle;
+    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 {
+    margin-top: 3vh;
+  }
+}
+
+/* For phone screens */
 @media only screen and (max-width: 750px) {
   .middle-large {
     grid-area: middle;
@@ -189,8 +249,13 @@ html *
     width: 100%;
     transition-duration: 0.2s;
   }
+  h1 {
+    margin-top: 8vh;
+  }
 }
 
+
+
 @media (prefers-color-scheme: light) {
 
   body {