OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Enhance site navigation styles and improve backdrop effects for better visibility

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-26 06:54:09 -05:00
parent 9039bdb70b
commit b70faa1980
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
theme/assets/css/main.css
View File

@@ -280,7 +280,9 @@ p:last-child { margin-bottom: 0; }
background: var(--header-scrolled-bg); background: var(--header-scrolled-bg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
padding-block: .65rem; padding-block: .65rem;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
will-change: transform;
} }
.header-inner { .header-inner {
@@ -496,6 +498,8 @@ p:last-child { margin-bottom: 0; }
gap: 5px; gap: 5px;
margin-left: auto; margin-left: auto;
padding: 4px; padding: 4px;
position: relative;
z-index: 101;
} }
.nav-toggle span { .nav-toggle span {
display: block; display: block;
@@ -516,7 +520,7 @@ p:last-child { margin-bottom: 0; }
display: block; display: block;
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
background: var(--color-dark); background: var(--color-bg);
z-index: 99; z-index: 99;
overflow: hidden; overflow: hidden;
} }
@@ -537,8 +541,9 @@ p:last-child { margin-bottom: 0; }
.site-nav.open .nav-menu > li { .site-nav.open .nav-menu > li {
width: 100%; width: 100%;
} }
.nav-toggle.open span { background: var(--color-heading); }
.site-nav.open .nav-menu a { .site-nav.open .nav-menu a {
color: #fff; color: var(--color-heading);
font-size: 1.25rem; font-size: 1.25rem;
} }
@@ -548,7 +553,7 @@ p:last-child { margin-bottom: 0; }
} }
.site-nav.open .nav-menu > li.menu-item-has-children > a::before { .site-nav.open .nav-menu > li.menu-item-has-children > a::before {
right: .25rem; right: .25rem;
border-color: rgba(255,255,255,.7); border-color: var(--color-text-muted);
} }
.site-nav.open .nav-menu > li.menu-item-has-children.submenu-open > a::before { .site-nav.open .nav-menu > li.menu-item-has-children.submenu-open > a::before {
transform: translateY(-30%) rotate(225deg); transform: translateY(-30%) rotate(225deg);
@@ -559,7 +564,7 @@ p:last-child { margin-bottom: 0; }
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
pointer-events: auto; pointer-events: auto;
background: rgba(255,255,255,.07); background: var(--color-bg-alt);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
box-shadow: none; box-shadow: none;
@@ -574,10 +579,10 @@ p:last-child { margin-bottom: 0; }
.site-nav.open .nav-menu .sub-menu a { .site-nav.open .nav-menu .sub-menu a {
font-size: 1rem; font-size: 1rem;
padding: .4rem .75rem; padding: .4rem .75rem;
color: rgba(255,255,255,.8); color: var(--color-text);
} }
.site-nav.open .nav-menu .sub-menu a:hover { .site-nav.open .nav-menu .sub-menu a:hover {
color: #fff; color: var(--color-primary);
background: transparent; background: transparent;
} }
} }
@@ -3775,7 +3780,6 @@ p:last-child { margin-bottom: 0; }
[data-theme="dark"] .site-footer { background: #0D0D0D; } [data-theme="dark"] .site-footer { background: #0D0D0D; }
[data-theme="dark"] .site-nav.open { background: #111111; }
[data-theme="dark"] .logo-text { color: #F5F5F5; } [data-theme="dark"] .logo-text { color: #F5F5F5; }
[data-theme="dark"] .logo-text strong { color: var(--color-primary); } [data-theme="dark"] .logo-text strong { color: var(--color-primary); }