fix the navigation mess
This commit is contained in:
madrilene
parent
af4a83c29e
commit
388082d13e
4 changed files with 144 additions and 185 deletions
|
|
@ -1,7 +1,14 @@
|
|||
<!-- toggle drawer menu in _data/meta.js -->
|
||||
{% set drawerNav = meta.navigation.drawerNav %}
|
||||
|
||||
<nav id="mainnav" class="mainnav" aria-label="{{ meta.navigation.ariaTop }}">
|
||||
<nav
|
||||
id="mainnav"
|
||||
class="mainnav
|
||||
{% if drawerNav %}
|
||||
drawernav
|
||||
{% endif %}"
|
||||
aria-label="{{ meta.navigation.ariaTop }}"
|
||||
>
|
||||
<ul class="cluster" role="list">
|
||||
{% for item in navigation.top %}
|
||||
<li>
|
||||
|
|
@ -49,15 +56,15 @@
|
|||
{% endif %}
|
||||
|
||||
{% css "inline" %}
|
||||
{% include "css/nav-pills.css" %}
|
||||
{% if drawerNav %}
|
||||
{% include "css/nav-drawer.css" %}
|
||||
{% else %}
|
||||
{% include "css/nav-pills.css" %}
|
||||
{% endif %}
|
||||
{% include "css/nav-desktop.css" %}
|
||||
{% endcss %}
|
||||
|
||||
{% if drawerNav %}
|
||||
{% js "defer" %}
|
||||
{% include "scripts/nav-drawer-inline.js" %}
|
||||
{% include "scripts/nav-drawer.js" %}
|
||||
{% endjs %}
|
||||
{% endif %}
|
||||
|
|
|
|||
47
src/assets/css/bundle/nav-desktop.css
Normal file
47
src/assets/css/bundle/nav-desktop.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
@media screen(navigation) {
|
||||
.mainnav {
|
||||
--nav-button-display: none;
|
||||
--nav-position: static;
|
||||
}
|
||||
|
||||
.mainnav ul {
|
||||
--list-background: transparent;
|
||||
--list-layout: row;
|
||||
--list-position: static;
|
||||
--list-height: auto;
|
||||
--list-width: 100%;
|
||||
--list-shadow: none;
|
||||
--list-transform: none;
|
||||
--list-visibility: visible;
|
||||
--list-width: auto;
|
||||
--list-block-padding: 0;
|
||||
--list-inline-padding: 0;
|
||||
}
|
||||
|
||||
.mainnav a {
|
||||
--item-padding: var(--space-xs) 0.2em;
|
||||
--item-border-color: transparent;
|
||||
--item-background-color: transparent;
|
||||
--item-text-decoration: transparent;
|
||||
--item-text-color: var(--color-text);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--item-text-decoration, transparent);
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.mainnav a:where(:hover, :focus) {
|
||||
--item-background-color: transparent;
|
||||
--item-text-color: var(--color-text);
|
||||
--item-text-decoration: var(--color-text);
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
.mainnav [aria-current='page'],
|
||||
.mainnav [data-state='active'] {
|
||||
--item-border-color: transparent;
|
||||
--item-background-color: transparent;
|
||||
--item-text-color: var(--color-primary);
|
||||
--item-text-decoration: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,156 +1,90 @@
|
|||
/* Remove default list styling and create layout for list */
|
||||
.mainnav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
--gutter: var(--space-xs);
|
||||
line-height: 0.5em;
|
||||
padding-block-end: var(--space-s);
|
||||
}
|
||||
|
||||
/* drawerif JS enabled */
|
||||
@media (scripting: enabled) {
|
||||
.mainnav {
|
||||
position: var(--nav-position, absolute);
|
||||
inset-inline-end: 0.1rem;
|
||||
--nav-position: fixed;
|
||||
inset-inline-end: 1em;
|
||||
}
|
||||
|
||||
.mainnav ul {
|
||||
--gutter: var(--space-xs);
|
||||
--cluster-vertical-alignment: normal;
|
||||
--list-block-padding: var(--space-2xl);
|
||||
--list-inline-padding: var(--space-s);
|
||||
z-index: 1;
|
||||
padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
|
||||
background: var(--nav-list-background, var(--color-bg));
|
||||
box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
|
||||
flex-direction: var(--nav-list-layout, column);
|
||||
block-size: var(--nav-list-height, 100vh);
|
||||
position: var(--nav-list-position, fixed);
|
||||
background: var(--list-background, var(--color-bg));
|
||||
box-shadow: var(--list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
|
||||
flex-direction: var(--list-layout, column);
|
||||
block-size: var(--list-height, 100vh);
|
||||
position: var(--list-position, fixed);
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inline-size: var(--nav-list-width, min(18rem, 100vw));
|
||||
visibility: var(--nav-list-visibility, visible);
|
||||
inline-size: var(--list-width, min(18rem, 100vw));
|
||||
visibility: var(--list-visibility, visible);
|
||||
}
|
||||
}
|
||||
|
||||
.mainnav [aria-expanded='false'] + ul {
|
||||
transform: var(--nav-list-transform, translateX(100%));
|
||||
visibility: var(--nav-list-visibility, hidden);
|
||||
}
|
||||
.mainnav :where([aria-expanded='false']) + ul {
|
||||
transform: var(--list-transform, translateX(100%));
|
||||
--list-visibility: hidden;
|
||||
}
|
||||
|
||||
/* animates ul only when opening to avoid flash on page load, svg always */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.mainnav [aria-expanded='true'] + ul,
|
||||
.mainnav svg {
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
||||
visibility 0.05s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.mainnav [aria-expanded='true'] + ul {
|
||||
padding-top: var(--space-2xl);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.mainnav button {
|
||||
display: var(--nav-button-display, flex);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.mainnav span {
|
||||
font-weight: var(--font-extra-bold);
|
||||
text-transform: uppercase;
|
||||
padding-inline-end: 0.1em;
|
||||
font-size: var(--size-step-min-1);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
/* animates ul only when opening to avoid flash on page load, svg always */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.mainnav [aria-expanded='true'] + ul,
|
||||
.mainnav svg {
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
||||
visibility 0.05s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.mainnav [aria-expanded='true'] + ul {
|
||||
padding-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
/* Basic link styling */
|
||||
.mainnav a {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: var(--color-bg);
|
||||
--border-color: transparent;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: var(--anchor-padding, var(--space-s));
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Change the border-color on :hover and :focus */
|
||||
.mainnav a:where(:hover, :focus) {
|
||||
--background-color: var(--color-bg-accent);
|
||||
--text-color: var(--color-text-accent);
|
||||
--border-color: var(--color-bg-accent);
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
.mainnav [aria-current='page'],
|
||||
.mainnav [data-state='active'] {
|
||||
--background-color: var(--color-bg-accent);
|
||||
--text-color: var(--color-text);
|
||||
--border-color: var(--color-bg-accent);
|
||||
}
|
||||
|
||||
/* Reset button styling */
|
||||
.mainnav button {
|
||||
all: unset;
|
||||
display: var(--nav-button-display, flex);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.mainnav span {
|
||||
font-size: var(--size-step-min-1);
|
||||
font-weight: var(--font-bold);
|
||||
text-transform: uppercase;
|
||||
padding-inline-end: var(--space-2xs);
|
||||
}
|
||||
|
||||
.mainnav svg {
|
||||
block-size: 100%;
|
||||
inline-size: auto;
|
||||
transform: translateY(-0.1em);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.mainnav [aria-expanded='true'] svg {
|
||||
transform: var(--nav-list-rotate, rotate(45deg));
|
||||
}
|
||||
|
||||
@media screen(navigation) {
|
||||
.mainnav {
|
||||
--nav-button-display: none;
|
||||
--nav-position: static;
|
||||
block-size: 2ex;
|
||||
inline-size: auto;
|
||||
color: var(--color-text);
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.mainnav ul {
|
||||
--nav-list-background: transparent;
|
||||
--nav-list-layout: row;
|
||||
--nav-list-position: static;
|
||||
--nav-list-padding: 0;
|
||||
--nav-list-height: auto;
|
||||
--nav-list-width: 100%;
|
||||
--nav-list-shadow: none;
|
||||
--nav-list-transform: none;
|
||||
--nav-list-visibility: visible;
|
||||
.mainnav [aria-expanded='true'] svg {
|
||||
transform: var(--list-rotate, rotate(45deg));
|
||||
}
|
||||
|
||||
.mainnav a {
|
||||
--anchor-padding: var(--space-xs) 0.2em;
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: transparent;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--text-decoration, transparent);
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: 0.2em;
|
||||
--item-border-color: transparent;
|
||||
--item-padding: var(--space-m) var(--space-xs);
|
||||
--item-background-color: transparent;
|
||||
}
|
||||
|
||||
.mainnav a:where(:hover, :focus) {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: var(--color-text-accent);
|
||||
--item-background-color: var(--color-bg-accent);
|
||||
--item-text-color: var(--color-text);
|
||||
--item-border-color: transparent;
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
.mainnav [aria-current='page'],
|
||||
.mainnav [data-state='active'] {
|
||||
--text-color: var(--color-primary);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: var(--color-primary);
|
||||
--item-border-color: transparent;
|
||||
--item-background-color: var(--color-primary);
|
||||
--item-text-color: var(--color-light);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +1,43 @@
|
|||
/* Basic link styling */
|
||||
.mainnav {
|
||||
--gutter: var(--space-s);
|
||||
position: var(--nav-position, relative);
|
||||
}
|
||||
|
||||
.mainnav ul {
|
||||
--gutter: var(--space-xs);
|
||||
list-style: none;
|
||||
--list-block-padding: var(--space-s);
|
||||
--list-inline-padding: 0;
|
||||
margin: 0;
|
||||
line-height: 0.5em;
|
||||
padding-block-end: var(--space-s);
|
||||
padding-block: var(--list-block-padding);
|
||||
padding-inline: var(--list-inline-padding);
|
||||
}
|
||||
|
||||
.mainnav a {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: var(--color-bg);
|
||||
--border-color: var(--color-bg-accent-2);
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: var(--space-s);
|
||||
--item-text-color: var(--color-text);
|
||||
--item-background-color: var(--color-bg);
|
||||
--item-border-color: var(--color-bg-accent-2);
|
||||
--item-padding: var(--space-s);
|
||||
background-color: var(--item-background-color);
|
||||
color: var(--item-text-color);
|
||||
padding: var(--item-padding);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--item-border-color);
|
||||
}
|
||||
|
||||
/* Change the border-color on :hover and :focus */
|
||||
.mainnav a:where(:hover, :focus) {
|
||||
--background-color: var(--color-text);
|
||||
--text-color: var(--color-bg);
|
||||
--border-color: var(--color-bg);
|
||||
--item-background-color: var(--color-text);
|
||||
--item-text-color: var(--color-bg);
|
||||
--item-border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page. data-state='active' if a child is active. */
|
||||
.mainnav [aria-current='page'],
|
||||
.mainnav [data-state='active'] {
|
||||
--background-color: var(--color-text);
|
||||
--text-color: var(--color-bg);
|
||||
--border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media screen(navigation) {
|
||||
/* Basic link styling */
|
||||
.mainnav ul {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
.mainnav a {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: transparent;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: var(--space-xs) 0.2em;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--text-decoration, transparent);
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
/* Change the border-color on :hover and :focus */
|
||||
.mainnav a:where(:hover, :focus) {
|
||||
--text-decoration: var(--color-text-accent);
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
.mainnav [aria-current='page'],
|
||||
.mainnav [data-state='active'] {
|
||||
--text-decoration: var(--color-primary);
|
||||
--text-color: var(--color-primary);
|
||||
--background-color: transparent;
|
||||
}
|
||||
--item-background-color: var(--color-text);
|
||||
--item-border-color: var(--color-bg);
|
||||
--item-text-color: var(--color-bg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue