techtransthai/www.techtransthai.org
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: techtransthai:4e0ee79409f8313d1e95f4bfa0d635d3cb669529
Branches Tags
techtransthai:main
techtransthai:classic-design
..
compare: techtransthai:05e4606733965e4521254feacb129ef409b2d1c0
Branches Tags
techtransthai:main
techtransthai:classic-design

No commits in common. "4e0ee79409f8313d1e95f4bfa0d635d3cb669529" and "05e4606733965e4521254feacb129ef409b2d1c0" have entirely different histories.
4e0ee79409 ... 05e4606733

4 changed files with 121 additions and 131 deletions
Show stats Expand all files Collapse all files

29
index.html
View file

@ -5,14 +5,15 @@
<meta http-equiv="Content-Language" content="th"> <meta http-equiv="Content-Language" content="th">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Home of TechTransThai's available services"> <meta name="description" content="Home of TechTransThai's available services">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechTransThai</title> <title>TechTransThai</title>
<link rel="icon" type="image/png" href="icons/ttt-org.png"> <link rel="icon" type="image/png" href="icons/ttt-org.png">
</head> </head>
<body> <body>
<div class="header" >
<div class="topbar"> <div class="topbar">
<div class="topbar-group">
<div style="display: flex; justify-content: space-between; margin-left: 1cm; margin-right: 1cm;">
<a style="display: flex; align-items: center; text-decoration: none;"> <a style="display: flex; align-items: center; text-decoration: none;">
<img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;"> <img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;">
<h4 class="logo">TechTransThai</h4> <h4 class="logo">TechTransThai</h4>
@ -36,6 +37,7 @@
</div> </div>
</div> </div>
</div>
<div class="header" style="margin-top: 2cm;"> <div class="header" style="margin-top: 2cm;">
@ -46,13 +48,13 @@
<div class="middle-large"> <div class="middle-large">
<h1>เทคทรานส์ไทย</h1> <h1>เทคทรานส์ไทย 🏳️‍⚧️ 🇹🇭</h1>
<p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p> <p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p>
<p class="emojidecorations">💻 🏳️‍⚧️ 🇹🇭</p> <p>กด Ctrl+F หรือ Command-F เพื่อค้นหาในหน้านี้</p>
<div class="quickbuttons"> <div style="margin-top: 1cm; margin-bottom: 1cm; ">
<a class="gtk-button" target="_blank" rel="noopener noreferrer" href="https://f-social.techtransthai.org/@techtransthai"> <a class="gtk-button" target="_blank" rel="noopener noreferrer" href="https://f-social.techtransthai.org/@techtransthai">
ติดตามเราบน Fediverse ติดตามเราบน Fediverse
</a> </a>
@ -68,9 +70,9 @@
</div> </div>
<h3>บริการ โปรเจกต์ และคอนเทนต์</h3> <h3>บริการ โปรเจกต์ และคอนเทนต์ของเรา</h3>
<div class="section"> <div class="row">
<a class="itemcard" style="opacity: 0.4;"> <a class="itemcard" style="opacity: 0.4;">
<div class="listaction"> <div class="listaction">
<img src="icons/ttt-org-blueprint.svg" alt="behind-ttt" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/ttt-org-blueprint.svg" alt="behind-ttt" width="80" height="80" style="margin: 0.3cm;">
@ -99,6 +101,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://inv.techtransthai.org/feed/trending"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://inv.techtransthai.org/feed/trending">
<div class="listaction"> <div class="listaction">
<img src="icons/inv.svg" alt="Invidious" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/inv.svg" alt="Invidious" width="80" height="80" style="margin: 0.3cm;">
@ -126,6 +130,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://openkmitl.gitlab.io"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://openkmitl.gitlab.io">
<div class="listaction"> <div class="listaction">
<img src="icons/openkmitl.png" alt="openKMITL" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/openkmitl.png" alt="openKMITL" width="80" height="80" style="margin: 0.3cm;">
@ -153,6 +159,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org">
<div class="listaction"> <div class="listaction">
<img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;">
@ -167,7 +175,7 @@
<h3>สำหรับใช้งานภายในเท่านั้น</h3> <h3>สำหรับใช้งานภายในเท่านั้น</h3>
<div class="section"> <div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://ci.techtransthai.org/"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://ci.techtransthai.org/">
<div class="listaction"> <div class="listaction">
<svg width="80" height="80" viewBox="0 0 285 254" xmlns="http://www.w3.org/2000/svg" style="margin: 0.3cm;"> <svg width="80" height="80" viewBox="0 0 285 254" xmlns="http://www.w3.org/2000/svg" style="margin: 0.3cm;">
@ -197,6 +205,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/">
<div class="listaction"> <div class="listaction">
<img src="icons/forgejo.svg" alt="Forgejo" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/forgejo.svg" alt="Forgejo" width="80" height="80" style="margin: 0.3cm;">
@ -224,6 +234,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://meet.techtransthai.org/"> <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://meet.techtransthai.org/">
<div class="listaction"> <div class="listaction">
<img src="icons/jitsi.svg" alt="Jitsi" width="80" height="80" style="margin: 0.3cm;"> <img src="icons/jitsi.svg" alt="Jitsi" width="80" height="80" style="margin: 0.3cm;">
@ -242,6 +254,7 @@
</div> </div>
</div> </div>
</a> </a>
<a class="itemcard-placeholder"></a>
</div> </div>

80
navbar.css
View file

@ -1,4 +1,14 @@
.header {
display: flex;
justify-content: center;
align-items: center;
}
@media (prefers-color-scheme: light) {
.headerbutton { .headerbutton {
color: black;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
justify-content: center; justify-content: center;
@ -14,61 +24,19 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.topbar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
z-index: 10;
}
.topbar-group {
display: flex;
justify-content: space-between;
margin-left: 1cm;
margin-right: 1cm;
}
@media only screen and (max-width: 750px) {
.topbar-group {
display: flex;
align-items: center;
flex-direction: column;
margin-left: 0cm;
margin-right: 0cm;
}
.headerbutton {
border: none;
border-radius: 8px;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
font-size: 14px;
margin: 4px 2px;
padding-left: 0.2cm;
padding-right: 0.2cm;
cursor: pointer;
height: 35px;
transition-duration: 0.2s;
}
}
@media (prefers-color-scheme: light) {
.headerbutton {
color: black;
}
.headerbutton:hover { .headerbutton:hover {
background-color: #fafafa; background-color: #fafafa;
} }
.topbar { .topbar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(224, 224, 224, 1); border: 1px solid rgba(224, 224, 224, 1);
color: #000000; color: #000000;
z-index: 10;
} }
} }
@ -77,6 +45,19 @@
.headerbutton { .headerbutton {
color: #ffffff; 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 { .headerbutton:hover {
@ -84,8 +65,13 @@
} }
.topbar { .topbar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background-color: #303030; background-color: #303030;
border: 1px solid #1f1f1f; border: 1px solid #1f1f1f;
color: #ffffff; color: #ffffff;
z-index: 10;
} }
} }

75
style.css
View file

@ -6,13 +6,6 @@ html *
font-family: Inter, Cantarell, sans-serif; font-family: Inter, Cantarell, sans-serif;
} }
p {
font-size: 11pt;
}
h1 {
margin-top: 3vh;
}
.centerscreen { .centerscreen {
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -59,25 +52,25 @@ h1 {
} }
.pronouns { .pronouns {
font-size: 10pt; font-size: 12pt;
opacity: 0.5; opacity: 0.5;
margin-top: -0.5cm; margin-left: 0.25cm;
margin-bottom: 0.5cm;
} }
.section { .row {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); justify-content: space-between;
grid-gap: 1rem;
} }
.button { .button {
height: 1cm;
border-radius: 6px; border-radius: 6px;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
padding: 10px 10px; padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: 0.25cm; margin-right: 0.25cm;
margin-bottom: 0.25cm;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -100,15 +93,17 @@ h1 {
} }
.gtk-button { .gtk-button {
height: 1cm;
border-radius: 6px; border-radius: 6px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
padding: 10px 10px; padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: 0.25cm; margin-right: 0.25cm;
margin-bottom: 0.25cm;
transition-duration: 0.2s; transition-duration: 0.2s;
background-color: rgba(53, 132, 228, 1);
color: white;
} }
.gtk-button:hover { .gtk-button:hover {
@ -119,16 +114,32 @@ h1 {
display: grid; display: grid;
border-radius: 12px; border-radius: 12px;
text-decoration: none; text-decoration: none;
margin-bottom: 0.5cm;
height: 3cm; height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s; transition-duration: 0.2s;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); 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 { .itemcard-stealth {
display: grid; display: grid;
border-radius: 12px; border-radius: 12px;
text-decoration: none; text-decoration: none;
margin-bottom: 0.5cm;
height: 3cm; height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -137,34 +148,6 @@ h1 {
align-items: center; align-items: center;
} }
.emojidecorations {
font-size: 16pt;
text-align: center;
}
.quickbuttons {
margin-top: 1cm;
margin-bottom: 1cm;
display: flex;
flex-wrap: wrap;
}
/* For tablet screens */
@media only screen and (max-width: 1366px) {
.middle-large {
grid-area: middle;
width: 90vw;
max-width: 35cm;
}
}
/* For phone screens */
@media only screen and (max-width: 750px) {
h1 {
margin-top: 8vh;
}
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { body {

20
team.html
View file

@ -5,14 +5,15 @@
<meta http-equiv="Content-Language" content="th"> <meta http-equiv="Content-Language" content="th">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="List of current TechTransThai's team members"> <meta name="description" content="List of current TechTransThai's team members">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team members</title> <title>Team members</title>
<link rel="icon" type="image/png" href="icons/ttt-org.png"> <link rel="icon" type="image/png" href="icons/ttt-org.png">
</head> </head>
<body> <body>
<div class="header" >
<div class="topbar"> <div class="topbar">
<div class="topbar-group">
<div style="display: flex; justify-content: space-between; margin-left: 1cm; margin-right: 1cm;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;"> <a href="/" style="display: flex; align-items: center; text-decoration: none;">
<img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;"> <img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;">
<h4 class="logo">TechTransThai</h4> <h4 class="logo">TechTransThai</h4>
@ -36,6 +37,7 @@
</div> </div>
</div> </div>
</div>
<div class="header" style="margin-top: 2cm;"> <div class="header" style="margin-top: 2cm;">
</div> </div>
@ -48,12 +50,12 @@
นี่คือรายชื่อสมาชิกของพวกเราในทีมงาน TechTransThai นี่คือรายชื่อสมาชิกของพวกเราในทีมงาน TechTransThai
<div class="section" style="margin-top: 1cm"> <div class="row" style="margin-top: 1cm">
<a class="itemcard-stealth" target="_blank" rel="noopener noreferrer" href="https://latenightdef.techtransthai.org/"> <a class="itemcard-stealth" target="_blank" rel="noopener noreferrer" href="https://latenightdef.techtransthai.org/">
<div class="listaction"> <div class="listaction">
<img src="https://latenightdef.techtransthai.org/icons/avatar.png" alt="no-avatar" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)"> <img src="https://latenightdef.techtransthai.org/icons/avatar.png" alt="no-avatar" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
<div> <div>
<div> <div style="display: flex; align-items: center;">
<h3>Late Night Defender</h3> <h3>Late Night Defender</h3>
<p class="pronouns">she/they</p> <p class="pronouns">she/they</p>
</div> </div>
@ -66,7 +68,7 @@
<div class="listaction"> <div class="listaction">
<img src="https://gitlab.com/uploads/-/system/user/avatar/9471734/avatar.png" alt="latenightdef" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)"> <img src="https://gitlab.com/uploads/-/system/user/avatar/9471734/avatar.png" alt="latenightdef" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
<div> <div>
<div> <div style="display: flex; align-items: center;">
<h3>NekoVari</h3> <h3>NekoVari</h3>
<p class="pronouns">he/they</p> <p class="pronouns">he/they</p>
</div> </div>
@ -78,7 +80,7 @@
<div class="listaction"> <div class="listaction">
<img src="avatars/srp-rottenmango.webp" alt="srp-mangoeater" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)"> <img src="avatars/srp-rottenmango.webp" alt="srp-mangoeater" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
<div> <div>
<div> <div style="display: flex; align-items: center;">
<h3>SRP mangoeater</h3> <h3>SRP mangoeater</h3>
<p class="pronouns">she/her</p> <p class="pronouns">she/her</p>
</div> </div>
@ -86,6 +88,8 @@
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="row">
<a class="itemcard-stealth" target="_blank" rel="noopener noreferrer" href="https://matsuri.techtransthai.org/"> <a class="itemcard-stealth" target="_blank" rel="noopener noreferrer" href="https://matsuri.techtransthai.org/">
<div class="listaction"> <div class="listaction">
<img src="avatars/placeholder.png" alt="no-avatar" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)"> <img src="avatars/placeholder.png" alt="no-avatar" width="80" height="80" style="margin: 0.3cm; border-radius: 40px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
@ -103,6 +107,10 @@
</div> </div>
</div> </div>
</a> </a>
<a class="itemcard-placeholder">
</a>
</div> </div>
</div> </div>