webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FIX: some fixes for rollout

Browse source 
Burger
This commit is contained in:
webfussel 2025-05-28 09:49:56 +02:00
parent f7f27838a8
commit 65ebc71431
11 changed files with 268 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

82
app/assets/css/header.css
View file

@ -61,60 +61,12 @@
backdrop-filter: blur(10px);
border-radius: 0;
& > label {
& > .burger {
all: unset;
display: none;
width: 30px;
height: 25px;
position: relative;
transform: rotate(0deg);
transition: var(--transition-time) ease-in-out;
cursor: pointer;
z-index: 20000;
& > span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: var(--color-white);
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
&:nth-child(1) {
top: 0;
}
&:nth-child(2), &:nth-child(3) {
top: 9px;
}
&:nth-child(4) {
top: 18px;
}
}
}
& > input[type="checkbox"]:checked + label span:nth-child(1) {
top: 18px;
width: 0;
left: 50%;
}
& > input[type="checkbox"]:checked + label span:nth-child(2) {
transform: rotate(45deg);
}
& > input[type="checkbox"]:checked + label span:nth-child(3) {
transform: rotate(-45deg);
}
& > input[type="checkbox"]:checked + label span:nth-child(4) {
top: 18px;
width: 0;
left: 50%;
}
}
@ -142,40 +94,14 @@
}
}
@media screen and (width < 1180px) {
.Header {
& > .wrapper.wrapper > label {
& > .wrapper.wrapper > .burger {
display: block;
}
& input[type="checkbox"]:checked ~ nav {
transform: translateX(-15vw);
}
& nav {
background: var(--color-black);
position: absolute;
overflow: hidden;
height: 100vh;
width: 100vw;
top: -15px;
transition: var(--transition-time);
transform: translateX(100%);
color: var(--color-white);
flex-direction: column;
& ul {
flex-direction: column;
justify-content: center;
height: 100vh;
gap: 8vh;
& li {
font-size: clamp(1rem, 10vw, 3rem);
}
}
display: none;
}
}
}