webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: lp and navigation

Browse source 
Added... a lot of stuff
This commit is contained in:
Fiona Lena Urban 2025-05-22 09:59:27 +02:00
parent 55fc3fe4e0
commit f60719fa9e
20 changed files with 332 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

83
app/assets/styles/header.css
View file

@ -2,20 +2,37 @@
position: sticky;
top: 0;
z-index: 100;
background: var(--color-main-darkest);
display: flex;
align-items: center;
gap: var(--padding-default);
padding: var(--padding-default);
&:not(.lp) {
background: var(--color-main-darkest);
}
&.lp {
position: absolute;
backdrop-filter: blur(10px);
mask: linear-gradient(to top, transparent, black 20%);
width: 100%;
top: 0;
}
& .logo {
height: 40px;
}
& .burger-button {
all: unset;
color: var(--color-lightest);
}
& header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-weight: bold;
& a {
@ -42,61 +59,27 @@
font-weight: 100;
}
}
}
& input[type="checkbox"] {
display: none;
&:not(.lp) {
&:after, &:before {
content: '';
display: block;
position: absolute;
bottom: calc(-1 * var(--radius-border));
background: var(--color-blue-darkest);
width: var(--radius-border);
height: var(--radius-border);
}
& input[type="checkbox"]:checked + nav {
translate: 0;
}
& nav,
& ul {
gap: var(--padding-default);
}
& nav {
position: fixed;
padding: var(--padding-default);
translate: 100% 0;
width: 100vw;
&:after {
right: 0;
top: 0;
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-lightest);
font-size: var(--font-size-xl);
align-items: end;
z-index: 100;
mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000);
}
& ul {
width: 100%;
align-items: center;
& li {
list-style: none;
}
&:before {
left: 0;
mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
}
}
&:after, &:before {
content: '';
display: block;
position: absolute;
bottom: calc(-1 * var(--radius-border));
background: var(--color-blue-darkest);
width: var(--radius-border);
height: var(--radius-border);
}
&:after {
right: 0;
mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000);
}
&:before {
left: 0;
mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
}
}