Basic implementation of custom top bar

This commit is contained in:
Late Night Defender 2025-02-24 01:18:59 +07:00
parent 60eafe58d5
commit 16e81e00c2
2 changed files with 27 additions and 0 deletions

15
customwidgets.css Normal file
View file

@ -0,0 +1,15 @@
.topbar.stealth {
background-color: unset;
border: unset;
}
.button.header {
font-weight: normal;
margin-top: 0.25cm;
width: 4cm;
}
@media (prefers-color-scheme: light) {
.button.header {background-color: unset;}
.button:hover {background-color: rgba(var(--black), 0.18);}
}

View file

@ -2,6 +2,7 @@
<html>
<head>
<link rel="stylesheet" href="https://www.techtransthai.org/style.css">
<link rel="stylesheet" href="customwidgets.css">
<meta http-equiv="Content-Language" content="th">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Pongpeera Wongprasitthiporn's profile">
@ -12,6 +13,17 @@
<body>
<div class="topbar stealth">
<div style="display: flex; align-items: center;">
<a href="/team" class="button header">About</a>
<a href="" class="button header">Work</a>
<a href="" class="button header">Links</a>
</div>
</div>
<div style="display: flex; justify-content: center; align-items: center; margin-top: 2cm;">
<img src="icons/pfp.webp" alt="profile picture" width="160" height="160" style="border-radius: 80px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
</div>