Optimize for smaller screens

This commit is contained in:
Late Night Defender 2024-06-19 17:23:04 +07:00
parent 3be4764fb0
commit 658bf29a41
3 changed files with 85 additions and 66 deletions

View file

@ -17,7 +17,7 @@
</div>
<div class="name">
<h1 class="logo">Pongpeera Wongprasitthiporn</h1>
<a class="gtk-button-pill" href="/index.html">See my real face</a>
<a class="gtk-button-pill" href="/">See my real face</a>
</div>
@ -26,7 +26,7 @@
Linux
</a>
<a class="headerbutton">
Libvirt & QEMU/KVM
Libvirtd
</a>
<a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton">
Podman
@ -37,54 +37,27 @@
<a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton">
Docker
</a>
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton">
OpenStreetMap
</a>
<a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton">
BOINC
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton">
GitLab CI, Pages
GitLab
</a>
<a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton">
Forgejo
</a>
</div>
<div class="header">
<a class="headerbutton">
On-premise hosting
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
Woodpecker/Drone CI
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton">
Python
</a>
@ -98,8 +71,34 @@
<div class="header">
<a class="headerbutton">
Content Creation
Servers
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a class="headerbutton">
Documentation
</a>
@ -107,6 +106,12 @@
Localization
</a>
</div>
<div class="header">
<a class="headerbutton">
Content Creation
</a>
</div>
<div class="grid-container">
@ -225,6 +230,13 @@
<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>
<div class="separator"></div>
<a class="listaction" href="work-i-bitz.html">
<div style="display: flex; margin-left: 0.5cm; align-items: center;">
<p>Intern at i-bitz company limited</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>
<div class="separator"></div>
<a class="listaction" href="work-others.html">
<div style="display: flex; margin-left: 0.5cm; align-items: center;">
<p>Other works</p>

View file

@ -26,7 +26,7 @@
Linux
</a>
<a class="headerbutton">
Libvirt & QEMU/KVM
Libvirtd
</a>
<a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton">
Podman
@ -37,25 +37,17 @@
<a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton">
Docker
</a>
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton">
OpenStreetMap
</a>
<a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton">
BOINC
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton">
GitLab CI, Pages
GitLab
</a>
<a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton">
Forgejo
@ -63,28 +55,9 @@
</div>
<div class="header">
<a class="headerbutton">
On-premise hosting
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a target="_blank" rel="noopenTHEORY OF COMPUTATION, 2023er noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
<a target="_blank" rel="noopener noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
Woodpecker/Drone CI
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton">
Python
</a>
@ -98,8 +71,34 @@
<div class="header">
<a class="headerbutton">
Content Creation
Servers
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a class="headerbutton">
Documentation
</a>
@ -107,6 +106,12 @@
Localization
</a>
</div>
<div class="header">
<a class="headerbutton">
Content Creation
</a>
</div>
<div class="grid-container">

View file

@ -54,6 +54,7 @@ html *
.logo {
color: #000;
text-align: center;
}
.grid-container {
@ -95,13 +96,13 @@ html *
align-items: center;
text-decoration: none;
display: flex;
font-size: 16px;
font-size: 14px;
font-weight: bold;
margin: 4px 2px;
padding-left: 0.3cm;
padding-right: 0.3cm;
cursor: pointer;
height: 35px;
min-height: 35px;
transition-duration: 0.2s;
}
@ -212,6 +213,7 @@ html *
.logo {
color: #fff;
text-align: center;
}
body {
@ -257,13 +259,13 @@ html *
align-items: center;
text-decoration: none;
display: flex;
font-size: 16px;
font-size: 14px;
font-weight: bold;
margin: 4px 2px;
padding-left: 0.3cm;
padding-right: 0.3cm;
cursor: pointer;
height: 35px;
min-height: 35px;
transition-duration: 0.2s;
}