website/components/Header.css

103 lines
1.7 KiB
CSS
Raw Normal View History

2024-02-06 13:30:47 +01:00
header {
width: 100%;
padding: var(--_gap);
display: flex;
gap: var(--_gap);
margin: 0;
background-color: var(--_translucent);
color: var(--_font-color);
user-select: none;
}
header span {
text-wrap: nowrap;
padding: var(--_gap);
font-size: large;
font-weight: bolder;
& a {
text-decoration: none;
}
}
header nav {
margin: 0;
padding: 0;
width: 100%;
display: flex;
gap: var(--_gap);
align-items: center;
& > li {
padding: var(--_gap-half) var(--_gap);
list-style: none;
border: var(--_border-size) solid transparent;
transition: border var(--_transition-delay) ease;
& > a {
text-decoration: none;
}
}
& > li:hover {
border: var(--_border-size) solid currentColor;
}
& > li:has(details[open]) {
border: var(--_border-size) solid currentColor;
}
}
header details {
cursor: pointer;
& summary {
display: flex;
gap: var(--_gap);
list-style: none;
&::after {
display: inline-block;
content: '▽';
transition: all var(--_transition-delay) ease;
}
}
&[open] summary::after {
transform: rotate(60deg);
}
& ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
position: absolute;
background-color: var(--_translucent);
backdrop-filter: blur(var(--_blur));
border: var(--_border-size) solid currentColor;
border-top: none;
transform: translate(
calc(-1 * var(--_gap) - 2px),
calc(var(--_gap-half) + 2px)
);
}
& li {
list-style: none;
border: none;
padding: var(--_gap) calc(var(--_gap) + 0.4rem);
}
& li:hover {
background-color: var(--_translucent);
}
}
header input {
padding: var(--_gap-half) var(--_gap);
align-self: center;
border: none;
background-color: var(--_translucent);
}