ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 02:33:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

can now click on "projects/*" text to close project

Browse Source
This commit is contained in:
Oliver Bryan
2025-09-29 01:18:00 +01:00
parent 45ff15a940
commit c0650f019c
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Header.astro
View File

@@ -11,16 +11,24 @@ const pages = [
<style> <style>
.cancel-button { .cancel-button {
background: none;
border: none;
color: var(--ayu-red-500); color: var(--ayu-red-500);
cursor: pointer; cursor: pointer;
padding: 0; }
.cancel-button .text {
transition: color 0.2s ease;
color: var(--ayu-accent);
}
.cancel-button:hover .text {
color: var(--ayu-red-500);
} }
</style> </style>
<header class=""> <header>
<div class="w-full flex items-center gap-3 px-4 py-2 border-b-1 border-ayu-gutter"> <div
class="w-full flex items-center gap-3 px-4 py-2 border-b-1 border-ayu-gutter"
>
<img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" /> <img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" />
<h1 class="text-2xl text-ayu-red-500">oliver bryan</h1> <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1>
</div> </div>
@@ -39,14 +47,17 @@ const pages = [
{ {
!pages.find((page) => page.path === currentPage.path) && ( !pages.find((page) => page.path === currentPage.path) && (
<span class="flex items-center justify-start gap-2"> <span class="flex items-center justify-start gap-4 text-ayu-gutter">
<span class="text-ayu-gutter">| {currentPage.path} </span> {"|"}
<button <button
class="cancel-button flex items-center justify-center" class="cancel-button flex items-center justify-center gap-2"
type="button" type="button"
onclick="window.location.href='/'" onclick="window.location.href='/'"
> >
<span class="text-2xl leading-none">&times;</span> <span class="text-sm text">{currentPage.path} </span>
<span class="text-xl leading-none text-ayu-red-500">
&times;
</span>
</button> </button>
</span> </span>
) )