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