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

64
app/assets/css/burger.css Normal file
View file

@ -0,0 +1,64 @@
.Burger {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
justify-content: flex-end;
align-items: center;
transition: var(--transition-time) ease-in-out;
pointer-events: none;
&.open {
pointer-events: all;
background: rgba(0, 0, 0, 0.5);
& nav {
translate: -15vw 0;
}
}
& nav {
width: clamp(300px, 30vw, 400px);
background: var(--color-black);
align-items: end;
padding: 2rem;
height: max-content;
translate: 110% 0;
transition: 150ms ease-in-out;
border-radius: 20px;
& ul {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1.5rem;
& a {
&.active {
color: var(--color-orange);
}
&:hover {
scale: 1.1;
color: var(--color-orange);
}
}
}
}
}
@media (width <= 450px) {
.Burger.open nav {
translate: -10vw 0;
}
}
@media screen and (width >= 1180px) {
.Burger {
display: none;
}
}

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;
}
}
}

2
app/assets/css/person.css
View file

@ -1,5 +1,5 @@
.Person {
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
flex-basis: clamp(200px, calc(33% - 3rem), 500px);
flex-grow: 1;
flex-shrink: 0;
align-items: center;