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

implement grid

Browse source
This commit is contained in:
Late Night Defender 2024-07-04 01:18:10 +07:00
parent 78850a7145
commit 386b2c4920
2 changed files with 4 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -99,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;">
@ -128,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;">
@ -157,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;">
@ -203,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;">
@ -232,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;">
@ -252,7 +242,6 @@
</div> </div>
</div> </div>
</a> </a>
<a class="itemcard-placeholder"></a>
</div> </div>

70
style.css
View file

@ -65,8 +65,9 @@ h1 {
} }
.row { .row {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
} }
.button { .button {
@ -117,35 +118,11 @@ 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 {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
}
.listaction { .listaction {
display: flex; display: flex;
align-items: center; align-items: center;
@ -170,39 +147,20 @@ h1 {
width: 90vw; width: 90vw;
max-width: 35cm; max-width: 35cm;
} }
.row {
display: flex;
flex-direction: column;
}
.itemcard { .itemcard {
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: 100%;
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: 100%
}
.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: 100%;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
h1 { h1 {
@ -217,39 +175,21 @@ h1 {
width: 90vw; width: 90vw;
max-width: 35cm; max-width: 35cm;
} }
.row {
display: flex;
flex-direction: column;
}
.itemcard { .itemcard {
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: 100%;
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: 100%
}
.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: 100%;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
h1 { h1 {
@ -257,8 +197,6 @@ h1 {
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { body {