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

Compare commits

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

15 commits
05e4606733 ... 4e0ee79409

Author SHA1 Message Date
Late Night Defender
4e0ee79409 make pronouns look better on small screens 2024-07-04 01:35:46 +07:00
Late Night Defender
f2431b11bc call it "section" instead of "row" 2024-07-04 01:29:27 +07:00
Late Night Defender
befb166b09 css cleanup 2024-07-04 01:28:06 +07:00
Late Night Defender
879f1fd21d use grid in team page 2024-07-04 01:21:24 +07:00
Late Night Defender
63460607a8 bring back itemcard-stealth 2024-07-04 01:19:25 +07:00
Late Night Defender
386b2c4920 implement grid 2024-07-04 01:18:10 +07:00
Late Night Defender
78850a7145 wrap quickbuttons 2024-07-04 00:54:08 +07:00
Late Night Defender
fd4e3d87c9 implement quickbuttons class 2024-07-04 00:49:43 +07:00
Late Night Defender
4768cad8eb Add support for tablet screens 2024-07-04 00:31:20 +07:00
Late Night Defender
cfdf6a6c9b Move title decorations 2024-07-04 00:23:04 +07:00
Late Night Defender
270d7d7887 Fix navigation between team and index 2024-07-02 03:15:00 +07:00
Late Night Defender
f13ec7982f Implement basic RWD for team page 2024-07-02 03:13:27 +07:00
Late Night Defender
17618f31bb Implement RWD for item cards 2024-07-02 03:11:28 +07:00
Late Night Defender
4fb6883950 RWD for NavBar 2024-07-02 03:00:09 +07:00
Late Night Defender
2bea14b81d refactor css 2024-07-02 02:25:46 +07:00
4 changed files with 130 additions and 120 deletions
Show stats Expand all files Collapse all files

29
index.html
View file

@ -5,15 +5,14 @@
<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>
@ -37,7 +36,6 @@
</div> </div>
</div> </div>
</div>
<div class="header" style="margin-top: 2cm;"> <div class="header" style="margin-top: 2cm;">
@ -48,13 +46,13 @@
<div class="middle-large"> <div class="middle-large">
<h1>เทคทรานส์ไทย 🏳️‍⚧️ 🇹🇭</h1> <h1>เทคทรานส์ไทย</h1>
<p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p> <p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p>
<p>กด Ctrl+F หรือ Command-F เพื่อค้นหาในหน้านี้</p> <p class="emojidecorations">💻 🏳️‍⚧️ 🇹🇭</p>
<div style="margin-top: 1cm; margin-bottom: 1cm; "> <div class="quickbuttons">
<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>
@ -70,9 +68,9 @@
</div> </div>
<h3>บริการ โปรเจกต์ และคอนเทนต์ของเรา</h3> <h3>บริการ โปรเจกต์ และคอนเทนต์</h3>
<div class="row"> <div class="section">
<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;">
@ -101,8 +99,6 @@
</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;">
@ -130,8 +126,6 @@
</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;">
@ -159,8 +153,6 @@
</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;">
@ -175,7 +167,7 @@
<h3>สำหรับใช้งานภายในเท่านั้น</h3> <h3>สำหรับใช้งานภายในเท่านั้น</h3>
<div class="row"> <div class="section">
<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;">
@ -205,8 +197,6 @@
</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;">
@ -234,8 +224,6 @@
</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;">
@ -254,7 +242,6 @@
</div> </div>
</div> </div>
</a> </a>
<a class="itemcard-placeholder"></a>
</div> </div>

80
navbar.css
View file

@ -1,14 +1,4 @@
.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;
@ -24,19 +14,61 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.headerbutton:hover {
background-color: #fafafa;
}
.topbar { .topbar {
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0px; top: 0px;
left: 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 {
background-color: #fafafa;
}
.topbar {
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;
} }
} }
@ -45,19 +77,6 @@
.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 {
@ -65,13 +84,8 @@
} }
.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,6 +6,13 @@ 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;
@ -52,25 +59,25 @@ html *
} }
.pronouns { .pronouns {
font-size: 12pt; font-size: 10pt;
opacity: 0.5; opacity: 0.5;
margin-left: 0.25cm; margin-top: -0.5cm;
margin-bottom: 0.5cm;
} }
.row { .section {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
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;
} }
@ -93,17 +100,15 @@ html *
} }
.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 {
@ -114,32 +119,16 @@ html *
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;
} }
@ -148,6 +137,34 @@ html *
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,15 +5,14 @@
<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>
@ -37,7 +36,6 @@
</div> </div>
</div> </div>
</div>
<div class="header" style="margin-top: 2cm;"> <div class="header" style="margin-top: 2cm;">
</div> </div>
@ -50,12 +48,12 @@
นี่คือรายชื่อสมาชิกของพวกเราในทีมงาน TechTransThai นี่คือรายชื่อสมาชิกของพวกเราในทีมงาน TechTransThai
<div class="row" style="margin-top: 1cm"> <div class="section" 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 style="display: flex; align-items: center;"> <div>
<h3>Late Night Defender</h3> <h3>Late Night Defender</h3>
<p class="pronouns">she/they</p> <p class="pronouns">she/they</p>
</div> </div>
@ -68,7 +66,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 style="display: flex; align-items: center;"> <div>
<h3>NekoVari</h3> <h3>NekoVari</h3>
<p class="pronouns">he/they</p> <p class="pronouns">he/they</p>
</div> </div>
@ -80,7 +78,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 style="display: flex; align-items: center;"> <div>
<h3>SRP mangoeater</h3> <h3>SRP mangoeater</h3>
<p class="pronouns">she/her</p> <p class="pronouns">she/her</p>
</div> </div>
@ -88,8 +86,6 @@
</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)">
@ -107,10 +103,6 @@
</div> </div>
</div> </div>
</a> </a>
<a class="itemcard-placeholder">
</a>
</div> </div>
</div> </div>