ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

style: Add -webkit-backdrop-filter for blur effects and refine mobile navigation background colors.

Browse Source
This commit is contained in:
Melvin Ragusa
2026-01-24 13:54:03 +01:00
parent cefa3ef7aa
commit de14bfdf5d
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/layout/Navbar.module.css
View File

@@ -7,12 +7,14 @@
padding: var(--space-md) 0; padding: var(--space-md) 0;
transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal); transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
/* Ensure visibility against bright backgrounds on homepage */ /* Ensure visibility against bright backgrounds on homepage */
background-color: rgba(15, 20, 16, 0.4); background-color: rgba(15, 20, 16, 0.4);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.header.scrolled { .header.scrolled {
background-color: rgba(15, 20, 16, 0.85); background-color: rgba(15, 20, 16, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant);
} }
@@ -172,7 +174,8 @@
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
padding: var(--space-lg); padding: var(--space-lg);
background-color: rgba(15, 20, 16, 0.85); background-color: rgba(15, 20, 16, 0.4);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant);
transform: translateY(-100%); transform: translateY(-100%);
@@ -187,6 +190,10 @@
visibility: visible; visibility: visible;
} }
.header.scrolled .navLinks {
background-color: rgba(15, 20, 16, 0.85);
}
.navLink { .navLink {
width: 100%; width: 100%;
padding: var(--space-md); padding: var(--space-md);
@@ -199,4 +206,4 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }