-
-
บริการสาธารณะ
-
+
+
+
-
- เทคทรานส์ไทย 🏳️⚧️ 🇹🇭
+ + ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี แพลตฟอร์มกระจายศูนย์ และข้อมูลเปิด - - + - + +บริการ โปรเจกต์ และคอนเทนต์ของเรา
- - - - - - - - - - - - - -เฉพาะบุคคลที่ได้รับอนุญาตเท่านั้น
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- โปรเจกต์
- -
-
-
-
-
-
-
-
-
-
-
+
+
- 
-
+
+
+
+
-
+ 
+
+
+
+
+
+ Invidious
+ดูวิดีโอจาก YouTube ไร้โฆษณากวนใจ
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ LibreSpeed
+ทดสอบความเร็วอินเทอร์เน็ต
+
+ 
+
+
+
+
+
+
+ Little Lines
+ระบบนำทางสำหรับล้อขนาดเล็ก
+
+ 
+
+
+
+
+
+ Syncthing Relay
+Relay server แห่งแรกในไทย
+สำหรับใช้งานภายในเท่านั้น
+ +
+
+
+
diff --git a/navbar.css b/navbar.css
new file mode 100644
index 0000000..d80f06a
--- /dev/null
+++ b/navbar.css
@@ -0,0 +1,77 @@
+.header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+@media (prefers-color-scheme: light) {
+
+ .headerbutton {
+ color: black;
+ border: none;
+ border-radius: 8px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: flex;
+ font-size: 16px;
+ margin: 4px 2px;
+ padding-left: 0.3cm;
+ padding-right: 0.3cm;
+ cursor: pointer;
+ height: 35px;
+ transition-duration: 0.2s;
+ }
+
+ .headerbutton:hover {
+ background-color: #EBEBEB;
+ }
+
+ .topbar {
+ position: fixed;
+ width: 100%;
+ top: 0px;
+ left: 0px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(224, 224, 224, 1);
+ color: #000000;
+ z-index: 10;
+ }
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+ .headerbutton {
+ color: #ffffff;
+ border: none;
+ border-radius: 8px;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+ display: flex;
+ font-size: 16px;
+ margin: 4px 2px;
+ padding-left: 0.3cm;
+ padding-right: 0.3cm;
+ cursor: pointer;
+ height: 35px;
+ transition-duration: 0.2s;
+ }
+
+ .headerbutton:hover {
+ background-color: #4a4a4a;
+ }
+
+ .topbar {
+ position: fixed;
+ width: 100%;
+ top: 0px;
+ left: 0px;
+ background-color: #303030;
+ border: 1px solid #1f1f1f;
+ color: #ffffff;
+ z-index: 10;
+ }
+}
diff --git a/style.css b/style.css
index 4487ecf..5aab287 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
@import url("cantarell/cantarell.css");
+@import url("navbar.css");
html *
{
@@ -28,7 +29,13 @@ html *
.middle {
grid-area: middle;
- width: 15cm;
+ width: 30cm;
+}
+
+.middle-large {
+ grid-area: middle;
+ width: 80vw;
+ max-width: 35cm;
}
.description {
@@ -37,6 +44,11 @@ html *
opacity: 0.5;
}
+.row {
+ display: flex;
+ justify-content: space-between;
+}
+
@media (prefers-color-scheme: light) {
body {
@@ -57,34 +69,6 @@ html *
'left middle right'
}
- .headerbutton {
- color: black;
- border: none;
- border-radius: 8px;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- display: flex;
- font-size: 16px;
- margin: 4px 2px;
- padding-left: 0.3cm;
- padding-right: 0.3cm;
- cursor: pointer;
- height: 35px;
- transition-duration: 0.2s;
- }
-
- .headerbutton:hover {
- background-color: #EBEBEB;
- }
-
- .list {
- border-radius: 12px 12px 12px 12px;
- background-color: #ffffff;
- box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
- margin-bottom: 50px;
- }
-
.separator {
width: 15cm;
height: 1px;
@@ -92,32 +76,21 @@ html *
}
.listaction {
- display: grid;
- grid-template-columns: 1fr 1cm;
- text-decoration: none;
+ display: flex;
color: black;
align-items: center;
- height: 1.5cm;
}
- .listinfo {
- display: grid;
- grid-template-columns: 1fr 2fr;
- text-decoration: none;
+ .button {
+ height: 1cm;
+ border-radius: 6px;
+ background-color: rgba(0, 0, 0, 0.08);
color: black;
- align-items: center;
- height: 1.5cm;
- }
-
- .topbar {
- position: fixed;
- width: 100%;
- top: 0px;
- left: 0px;
- background-color: rgba(255, 255, 255, 1);
- border: 1px solid rgba(224, 224, 224, 1);
- color: #000000;
- z-index: 10;
+ text-decoration: none;
+ font-weight: bold;
+ padding: 10px 10px;
+ margin-top: 1cm;
+ margin-bottom: 1cm;
}
.gtk-button-pill {
@@ -137,6 +110,18 @@ html *
padding: 0px 32px;
flex-wrap: nowrap;
}
+
+ .itemcard {
+ display: grid;
+ border-radius: 12px;
+ text-decoration: none;
+ background-color: #ffffff;
+ box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+ margin-bottom: 0.5cm;
+ min-height: 3cm;
+ min-width: 6cm;
+ width: 32.5%
+ }
}
@media (prefers-color-scheme: dark) {
@@ -159,27 +144,6 @@ html *
'left middle right'
}
- .headerbutton {
- color: #ffffff;
- border: none;
- border-radius: 8px;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- display: flex;
- font-size: 16px;
- margin: 4px 2px;
- padding-left: 0.3cm;
- padding-right: 0.3cm;
- cursor: pointer;
- height: 35px;
- transition-duration: 0.2s;
- }
-
- .headerbutton:hover {
- background-color: #4a4a4a;
- }
-
.list {
border-radius: 12px 12px 12px 12px;
background-color: #363636;
@@ -211,17 +175,6 @@ html *
height: 1.5cm;
}
- .topbar {
- position: fixed;
- width: 100%;
- top: 0px;
- left: 0px;
- background-color: #303030;
- border: 1px solid #1f1f1f;
- color: #ffffff;
- z-index: 10;
- }
-
.gtk-button-pill {
position: relative;
width: auto;
+ 
+
+
+
+
+
+
+ TechTransThai Cloud
+Nextcloud instance ของเรา
+
+ 
+
+
+
+
+
+
+ TechTransThai F-Social
+Sharkey instance ของเรา
+
+ 
+
+
+
+
+
+ TechTransThai Home
+Home Assistant instance ของเรา
+