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

add bespoke itemcard style for works page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Late Night Defender 2025-02-24 04:36:12 +07:00
parent ac7d82aab9
commit cf92cd5462
2 changed files with 68 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
overrides.css
View file

@ -11,6 +11,16 @@
background-color: unset;
}
.itemcard-works {
display: flex;
justify-content: center;
border-radius: 12px;
text-decoration: none;
height: 2cm;
transition-duration: 0.2s;
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
}
/* For tablet screens */
@media only screen and (max-width: 600px) {
.button.header {width: 3cm;}

87
works/index.html
View file

@ -43,45 +43,74 @@
<div class="grid-container">
<div class="middle">
<div class="middle large">
<h3>Works & contributions</h3>
<h3>Works by type</h3>
<div class="list" >
<div class="separator"></div>
<a style="text-decoration: none;" href="work-kmitl.html" >
<div class="row" style="margin-left: 0.5cm; ">
<div class="propertyrow">
<p class="row-title">Student at KMITL</p>
<p class="row-subtitle">C++, UX/UI, CI/CD, Linux, Documentation</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
<div class="section">
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/applocalization.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>DevOps</h3>
</div>
</a>
<div class="separator"></div>
<a style="text-decoration: none;" href="work-i-bitz.html" >
<div class="row" style="margin-left: 0.5cm; ">
<div class="propertyrow">
<p class="row-title">Intern at i-bitz company limited</p>
<p class="row-subtitle">Python, Go, MongoDB, Docker, Kubernetes</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/applocalization.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>SysAdmin</h3>
</div>
</a>
<div class="separator"></div>
<a style="text-decoration: none;" href="work-others.html" >
<div class="row" style="margin-left: 0.5cm; ">
<div class="propertyrow">
<p class="row-title">Other works</p>
<p class="row-subtitle">WebDev, Cloud & Self-hosting, Email and more </p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/c4c.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>UI Design</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/c4c.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Icon Design</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/mappingthailand.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Open Data</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/opensourcefund.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Translation</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/openvoice.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Code</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/openvoice.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Documentation</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/openvoice.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Video</h3>
</div>
</a>
<a class="itemcard-works" href="/works">
<div class="listaction">
<!-- <img src="resources/icons/openvoice.svg" width="36" height="36" style="margin: 0.3cm;"> -->
<h3>Other</h3>
</div>
</a>
</div>
<h3>Talks</h3>
<h3 style="margin-top: 5vh;">Talks</h3>
<div class="list" >
<a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/techtransthai/openlkb-slides/raw/branch/main/Improving%20accessibility%20data%20on%20OpenStreetMap.pdf" >