Basic implementation of custom top bar
This commit is contained in:
parent
60eafe58d5
commit
16e81e00c2
2 changed files with 27 additions and 0 deletions
15
customwidgets.css
Normal file
15
customwidgets.css
Normal 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);}
|
||||
}
|
12
index.html
12
index.html
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue