website/components/Header.css

180 lines
2.8 KiB
CSS

header {
width: 100%;
padding: 0;
margin: 0;
background-color: var(--_translucent);
color: var(--_font-color);
user-select: none;
}
header div {
max-width: var(--_wide-screen);
margin: auto;
padding: var(--_gap);
display: flex;
gap: var(--_gap);
}
.components__header__brand {
text-wrap: nowrap;
padding: var(--_gap);
font-size: large;
font-weight: bolder;
& a {
text-decoration: none;
color: currentColor;
}
@media (width < 800px) {
.components__header__brand__text {
display: none;
}
& img {
min-width: 1rem;
}
}
}
header menu {
margin: 0;
padding: 0;
width: 100%;
display: flex;
gap: var(--_gap);
align-items: center;
& > li {
list-style: none;
transition: border var(--_transition-delay) ease;
border: var(--_border-size) solid transparent;
}
& > li:hover,
& > li:has(a:focus-visible),
& > li:has(summary:focus-visible),
& > li:has(details[open]) {
border: var(--_border-size) solid currentColor;
}
@media (width < 800px) {
& {
justify-content: space-around;
}
}
}
header details {
cursor: pointer;
padding: var(--_gap-half);
& summary {
display: flex;
gap: var(--_gap);
list-style: none;
outline: none;
& i {
display: none;
}
&::after {
display: inline-block;
content: '▽';
transition: all var(--_transition-delay) ease;
}
@media (width < 800px) {
& {
display: grid;
gap: 0;
font-size: x-small;
justify-items: center;
align-items: center;
font-weight: normal;
}
& i {
display: inline;
font-size: 1rem;
}
&::after {
display: none;
}
}
}
&[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-half) - 2px),
calc(var(--_gap-half) + 2px)
);
@media (width < 800px) {
& {
border: var(--_border-size) solid currentColor;
transform: translate(-33%, var(--_gap));
}
}
}
& li {
list-style: none;
border: none;
}
& li:hover,
& li:has(a:focus-visible) {
background-color: var(--_translucent);
}
& a {
text-decoration: none;
padding: var(--_gap) calc(var(--_gap-half) + 0.21rem);
display: inline-block;
outline: none;
}
}
.components__header__menu_button {
color: var(--_font-color);
display: inline-block;
text-decoration: none;
outline: none;
padding: var(--_gap-half) var(--_gap);
& i {
display: none;
}
@media (width < 800px) {
& {
display: grid;
font-size: x-small;
justify-items: center;
align-items: center;
font-weight: normal;
}
& i {
display: inline;
font-size: 1rem;
}
}
}