139 lines
2.7 KiB
CSS
139 lines
2.7 KiB
CSS
/* Base elements */
|
|
nav.fwd-nav {
|
|
--fwd-nav-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
|
box-shadow: var(--fwd-nav-box-shadow);
|
|
}
|
|
|
|
nav.fwd-nav > ul {
|
|
display: flex;
|
|
align-items: start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
nav.fwd-nav > ul > li {
|
|
flex-grow: 0;
|
|
flex-basis: 0;
|
|
}
|
|
|
|
nav.fwd-nav li {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: var(--nav-element-spacing-horizontal);
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
nav.fwd-nav li > :first-child {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
nav.fwd-nav ul ul {
|
|
display: none;
|
|
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin: 0;
|
|
|
|
box-shadow: var(--fwd-nav-box-shadow);
|
|
}
|
|
|
|
nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
nav.fwd-nav ul ul ul {
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
/* z-index */
|
|
nav.fwd-nav a {
|
|
position: relative;
|
|
}
|
|
|
|
nav.fwd-nav > ul > li > ul {
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Colors and optional styling */
|
|
nav.fwd-nav,
|
|
nav.fwd-nav ul {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
nav.fwd-nav li.border-above {
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
nav.fwd-nav li:where(:active, :focus-within, :hover) {
|
|
background-color: var(--primary-focus-dark);
|
|
}
|
|
|
|
nav.fwd-nav li.current-page:not(:where(:active, :focus-within, :hover)) {
|
|
background-color: var(--primary-focus-opaque);
|
|
}
|
|
|
|
nav.fwd-nav a {
|
|
color: var(--primary-inverse);
|
|
}
|
|
|
|
nav.fwd-nav a::after {
|
|
background-color: var(--primary-inverse);
|
|
}
|
|
|
|
/* Logo */
|
|
nav.fwd-nav #logo {
|
|
font-weight: bold;
|
|
}
|
|
|
|
nav.fwd-nav #logo::before {
|
|
display: inline-block;
|
|
|
|
width: calc(1em * var(--line-height));
|
|
height: calc(1em * var(--line-height));
|
|
margin-right: 0.25rem;
|
|
vertical-align: top;
|
|
|
|
--mask-image: url("https://fwdekker.com/favicon.png");
|
|
-webkit-mask-image: var(--mask-image);
|
|
-webkit-mask-size: cover;
|
|
mask-image: var(--mask-image);
|
|
mask-size: cover;
|
|
background-repeat: no-repeat no-repeat;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-color: var(--primary-inverse);
|
|
|
|
content: "";
|
|
}
|
|
|
|
/* Hamburger */
|
|
nav.fwd-nav #nav-hamburger-label {
|
|
height: fit-content;
|
|
margin: 0;
|
|
padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));
|
|
|
|
color: var(--primary-inverse);
|
|
}
|
|
|
|
nav.fwd-nav #nav-hamburger-label:where(:active, :focus-within, :hover) {
|
|
background-color: var(--primary-focus-dark);
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
nav.fwd-nav #nav-hamburger-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
nav.fwd-nav #nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
|
|
display: none;
|
|
}
|
|
}
|