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

FIX: mpa, nuxt4 future, improvements in intro and services

Browse source 
Added mpa support, nuxt4 future compatibility, improvements in intro and services
This commit is contained in:
webfussel 2025-02-12 13:18:55 +01:00
parent 078d4bfd82
commit 9642496e5a
35 changed files with 324 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

196
assets/css/header.css
View file

@ -1,196 +0,0 @@
.stickyWatch {
height: 0;
}
.Header {
padding: 15px calc(15vw - 30px);
width: 100%;
background: transparent;
top: 0;
position: fixed;
z-index: 1000;
& .socials {
gap: 1rem;
}
& .logo {
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
& .fussel {
stroke: white;
fill: var(--color-black);
stroke-width: 20px;
}
& .glasses {
fill: none;
stroke: white;
stroke-width: 62px;
}
}
& strong {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5rem;
flex: 1.5;
cursor: default;
display: flex;
align-items: center;
gap: 1rem;
& svg {
--size: 40px;
width: var(--size);
height: var(--size);
}
}
& nav {
flex: 3;
position: relative;
font-weight: normal;
font-size: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
& > .wrapper {
display: flex;
align-items: center;
padding: 15px 30px;
transition: 750ms;
backdrop-filter: blur(10px);
border-radius: 0;
& > label {
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%;
}
}
&.sticks > .wrapper {
background: var(--color-black-transparent);
border-radius: 20px;
}
& input[type="checkbox"] {
display: none;
}
& ul {
gap: var(--spacing-standard);
transform: scale(1);
& a {
display: block;
text-align: center;
&:hover {
transform: scale(1.15);
color: var(--color-orange);
}
}
}
}
@media screen and (width < 1180px) {
.Header {
& > .wrapper.wrapper > label {
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;
& .socials {
flex-direction: row;
height: max-content;
gap: 3rem;
padding-bottom: 2rem;
}
& ul {
flex-direction: column;
justify-content: center;
height: 100vh;
gap: 8vh;
& li {
font-size: 10vw;
}
}
}
}
}