www.techtransthai.org/style.css

302 lines
4.4 KiB
CSS
Raw Normal View History

2024-06-21 08:51:57 +00:00
@import url("inter/inter.css");
2024-04-03 19:51:38 +00:00
@import url("navbar.css");
2023-08-03 07:08:41 +00:00
2023-07-25 16:04:31 +00:00
html *
{
2024-06-21 08:45:38 +00:00
font-family: Inter, Cantarell, sans-serif;
2023-07-25 16:04:31 +00:00
}
2023-08-02 17:00:53 +00:00
2024-07-03 17:31:20 +00:00
p {
font-size: 11pt;
}
h1 {
margin-top: 3vh;
}
2024-03-27 19:25:41 +00:00
.centerscreen {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2024-03-27 19:03:06 +00:00
2024-06-24 07:45:53 +00:00
.logo {
font-weight: bold;
text-decoration: none;
}
2023-08-02 17:00:53 +00:00
.header {
2023-08-11 07:34:22 +00:00
display: flex;
justify-content: center;
align-items: center;
2023-11-03 19:48:23 +00:00
}
.name {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2023-09-06 06:42:30 +00:00
2024-06-24 07:45:53 +00:00
.grid-container {
display: grid;
justify-content: center;
grid-template-areas:
'left middle right'
}
2024-04-03 19:51:38 +00:00
.middle-large {
grid-area: middle;
width: 80vw;
max-width: 35cm;
2023-08-02 17:43:14 +00:00
}
2023-09-13 19:13:44 +00:00
.description {
2023-11-03 19:48:23 +00:00
font-size: 10pt;
margin-top: -0.3cm;
2024-04-09 20:30:37 +00:00
opacity: 0.7;
2023-09-13 19:13:44 +00:00
}
2023-11-03 19:48:23 +00:00
2024-04-09 20:57:43 +00:00
.pronouns {
font-size: 10pt;
2024-04-09 20:57:43 +00:00
opacity: 0.5;
margin-top: -0.5cm;
margin-bottom: 0.5cm;
2024-04-09 20:57:43 +00:00
}
2024-07-03 18:29:27 +00:00
.section {
2024-07-03 18:18:10 +00:00
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
2024-04-03 19:51:38 +00:00
}
2024-06-24 07:45:53 +00:00
.button {
border-radius: 6px;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-right: 0.25cm;
2024-07-03 17:54:08 +00:00
margin-bottom: 0.25cm;
2024-06-24 07:45:53 +00:00
transition-duration: 0.2s;
}
.gtk-button-pill {
position: relative;
width: auto;
height: 44px;
border-radius: 22px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0px;
padding: 0px 32px;
flex-wrap: nowrap;
}
.gtk-button {
border-radius: 6px;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-right: 0.25cm;
2024-07-03 17:54:08 +00:00
margin-bottom: 0.25cm;
2024-06-24 07:45:53 +00:00
transition-duration: 0.2s;
2024-07-03 17:54:08 +00:00
background-color: rgba(53, 132, 228, 1);
color: white;
2024-06-24 07:45:53 +00:00
}
.gtk-button:hover {
background-color: rgba(53, 132, 228, 0.9);
}
.itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
height: 3cm;
transition-duration: 0.2s;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
}
2024-08-20 18:54:40 +00:00
.infocard {
border-radius: 12px;
text-decoration: none;
padding-left: 10px;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
}
2024-07-03 18:19:25 +00:00
.itemcard-stealth {
display: grid;
border-radius: 12px;
text-decoration: none;
height: 3cm;
transition-duration: 0.2s;
}
2024-08-27 13:07:07 +00:00
.list {
border-radius: 12px 12px 12px 12px;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
margin-bottom: 50px;
}
2024-06-24 07:45:53 +00:00
.listaction {
display: flex;
align-items: center;
}
2024-08-27 13:07:07 +00:00
.listactionmini {
display: grid;
grid-template-columns: 1fr 1cm;
text-decoration: none;
align-items: center;
min-height: 1.5cm;
}
.separator {
height: 1px;
}
2024-07-03 17:31:20 +00:00
.emojidecorations {
font-size: 16pt;
text-align: center;
}
2024-07-03 17:49:43 +00:00
.quickbuttons {
2024-07-03 17:54:08 +00:00
display: flex;
flex-wrap: wrap;
2024-07-03 17:49:43 +00:00
}
2024-07-03 17:31:20 +00:00
/* For tablet screens */
2024-07-03 18:28:06 +00:00
@media only screen and (max-width: 1366px) {
2024-07-03 17:31:20 +00:00
.middle-large {
grid-area: middle;
width: 90vw;
max-width: 35cm;
}
}
/* For phone screens */
2024-07-01 20:11:28 +00:00
@media only screen and (max-width: 750px) {
2024-07-03 17:31:20 +00:00
h1 {
margin-top: 8vh;
}
2024-07-01 20:11:28 +00:00
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: light) {
2023-08-02 18:24:02 +00:00
2023-08-11 07:34:22 +00:00
body {
background-color: #fafafa;
}
2023-08-02 19:37:58 +00:00
2023-08-11 07:34:22 +00:00
.logo {
color: #000;
}
2023-08-10 11:24:31 +00:00
2023-08-11 07:34:22 +00:00
.grid-container {
color: #000000;
2024-08-27 13:07:07 +00:00
}
.list {
background-color: #ffffff;
}
2023-08-10 11:24:31 +00:00
2023-08-11 07:34:22 +00:00
.listaction {
color: black;
2023-11-03 20:03:30 +00:00
}
2024-08-27 13:07:07 +00:00
.listactionmini {
color: black;
}
2024-04-03 19:51:38 +00:00
.button {
background-color: rgba(0, 0, 0, 0.08);
2023-11-03 20:03:30 +00:00
color: black;
2024-04-09 21:18:09 +00:00
}
.button:hover {
background-color: rgba(0, 0, 0, 0.18);
2023-08-11 07:34:22 +00:00
}
2024-04-03 19:51:38 +00:00
.itemcard {
background-color: #ffffff;
2024-04-09 20:57:43 +00:00
}
2024-04-09 21:18:09 +00:00
.itemcard:hover {
background-color: #fafafa;
}
2024-04-09 20:57:43 +00:00
.itemcard-stealth:hover {
background-color: #e0e0e0;
2024-04-09 20:30:37 +00:00
}
2024-08-20 18:54:40 +00:00
.infocard {
background-color: #ffffff;
}
.separator {
background-color: rgba(237, 237, 237, 1);
}
2023-08-10 11:24:31 +00:00
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: dark) {
2024-04-09 21:32:13 +00:00
body {
background-color: #222222;
}
2023-08-11 07:34:22 +00:00
.logo {
color: #fff;
}
.grid-container {
2024-04-09 21:32:13 +00:00
color: #fff;
2024-08-27 13:07:07 +00:00
}
.list {
background-color: #363636;
}
2023-08-11 07:34:22 +00:00
.listaction {
2024-04-09 21:32:13 +00:00
color: white;
2023-11-03 20:03:30 +00:00
}
2024-08-27 13:07:07 +00:00
.listactionmini {
color: #ffffff;
}
2024-04-09 21:32:13 +00:00
.button {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.button:hover {
background: rgba(255, 255, 255, 0.18);
2023-08-11 07:34:22 +00:00
}
2024-04-09 21:32:13 +00:00
.itemcard {
background-color: #303030;
}
.itemcard:hover {
background-color: #4a4a4a;
}
.itemcard-stealth:hover {
background-color: #4a4a4a;
}
2024-08-20 18:54:40 +00:00
.infocard {
background-color: #303030;
}
.separator {
background-color: #232323;
}
2023-08-11 07:34:22 +00:00
}