forked from david-swift/duckling
Remove auto hiding navigation bar option #1
This commit is contained in:
parent
8d66e8e2b3
commit
bcdf64867f
@ -125,8 +125,6 @@ csp = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
[extra.nav]
|
[extra.nav]
|
||||||
# Whether to automatically hide nav when not hovered or focused
|
|
||||||
# auto_hide = true
|
|
||||||
# Whether to show the Atom/RSS feed button in the nav
|
# Whether to show the Atom/RSS feed button in the nav
|
||||||
show_feed = true
|
show_feed = true
|
||||||
# Whether to show the link to the source repository in the nav
|
# Whether to show the link to the source repository in the nav
|
||||||
|
|||||||
@ -1,67 +1,3 @@
|
|||||||
#handle {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
transition: var(--transition);
|
|
||||||
margin: 0 auto;
|
|
||||||
inset-block-start: 0;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
width: min(var(--container-width), 90%);
|
|
||||||
height: 4.25rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
transition: var(--transition);
|
|
||||||
margin: 0 auto;
|
|
||||||
inset-block-start: 0.5rem;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
box-shadow: var(--edge-highlight);
|
|
||||||
border-radius: 999px;
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
width: min(calc(var(--container-width) / 4), 100%);
|
|
||||||
height: 0.5rem;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before,
|
|
||||||
&:has(+ #site-nav:hover)::before,
|
|
||||||
&:has(+ #site-nav *:focus-visible, + #site-nav *:focus)::before {
|
|
||||||
transform: translateY(-1rem) scale(0.5);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover + #site-nav,
|
|
||||||
& + #site-nav:hover,
|
|
||||||
& + #site-nav:has(*:focus-visible, *:focus) {
|
|
||||||
transform: none;
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
-webkit-backdrop-filter: var(--blur);
|
|
||||||
backdrop-filter: var(--blur);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& + #site-nav {
|
|
||||||
position: fixed;
|
|
||||||
transform: translateY(-1rem) scale(0.5);
|
|
||||||
transform-origin: top;
|
|
||||||
opacity: 0;
|
|
||||||
transition: var(--transition);
|
|
||||||
margin: 0 auto;
|
|
||||||
width: max-content;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
-webkit-backdrop-filter: saturate(1) blur(0);
|
|
||||||
backdrop-filter: saturate(1) blur(0);
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#site-nav {
|
#site-nav {
|
||||||
grid-area: nav;
|
grid-area: nav;
|
||||||
margin: 1rem auto 0;
|
margin: 1rem auto 0;
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
|
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
|
||||||
|
|
||||||
{%- if config.extra.nav.auto_hide %}
|
|
||||||
<div id="handle"></div>
|
|
||||||
{%- endif %}
|
|
||||||
<header id="site-nav">
|
<header id="site-nav">
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#main-content" tabindex="0">
|
<a href="#main-content" tabindex="0">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user