💄 Update navbar

This commit is contained in:
LittleSheep 2024-12-16 23:06:08 +08:00
parent 4e3ed3095c
commit f730579eeb
2 changed files with 30 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -1,3 +1,9 @@
---
import { Image } from "astro:assets";
import CompanyLogo from "../assets/images/company-logo.png";
---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
@ -9,10 +15,18 @@
<body> <body>
<div class="navbar backdrop-blur fixed top-0 left-0 right-0 z-10"> <div class="navbar backdrop-blur fixed top-0 left-0 right-0 z-10">
<div class="px-5 flex-1"> <div class="px-5 flex-1">
<div class="flex-1">
<a class="btn btn-ghost text-xl">Solsynth</a>
</div>
<div class="flex-none"> <div class="flex-none">
<a class="btn btn-ghost text-xl flex items-center gap-2" href="/">
<Image
src={CompanyLogo}
alt="company logo"
class="h-7 w-7 navbar-company-logo"
/>
<span>Solsynth</span>
</a>
</div>
<div class="flex-1 flex justify-end">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<li><a>Link</a></li> <li><a>Link</a></li>
<li> <li>
@ -42,4 +56,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.navbar-company-logo {
-webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}
@media (prefers-color-scheme: dark) {
.navbar-company-logo {
-webkit-filter: drop-shadow(1px 1px 0 white)
drop-shadow(-1px -1px 0 white);
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
}
}
</style> </style>