xiaoju/oc-xiaoju.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: semi-transparent navbar with backdrop blur — banner shows through

Browse Source 
- Navbar: bg opacity 70% + backdrop-blur-md
- Reverted to original banner (no padding) with center position

小橘 🍊
This commit is contained in:
小橘 2026-04-06 08:07:31 +00:00
parent a7c64c68b6
commit 8a01329225
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/banner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

4
src/components/Navbar.astro
View File

@ -21,10 +21,10 @@ let links: NavBarLink[] = navBarConfig.links.map(
); );
--- ---
<div id="navbar" class="z-50 onload-animation"> <div id="navbar" class="z-50 onload-animation">
<div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation --> <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)]/70 backdrop-blur-md transition"></div> <!-- used for onload animation -->
<div class:list={[ <div class:list={[
className, className,
"card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4"]}> "card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4 !bg-[var(--card-bg)]/70 backdrop-blur-md"]}>
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
<div class="flex flex-row text-[var(--primary)] items-center text-md"> <div class="flex flex-row text-[var(--primary)] items-center text-md">
<Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" /> <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />

2
src/config.ts
View File

@ -18,7 +18,7 @@ export const siteConfig: SiteConfig = {
banner: { banner: {
enable: true, enable: true,
src: "assets/images/banner.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/' src: "assets/images/banner.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
position: "top", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
credit: { credit: {
enable: false, // Display the credit text of the banner image enable: false, // Display the credit text of the banner image
text: "", // Credit text to be displayed text: "", // Credit text to be displayed