hamburger menu angepasst & sidemenu sprint jetzt bei richtiger breite zurück

This commit is contained in:
edi 2024-05-30 12:57:58 +02:00
parent 896852f20d
commit 8a85359bdc
Signed by: edi
SSH key fingerprint: SHA256:KFkwZzDracWAjmHqmcEMriW2i/8qe9LcXBGY2UFyQe4

View file

@ -15,7 +15,9 @@
--primary: var(--ve-light-violett); --primary: var(--ve-light-violett);
--primary90: #a458aee0;
--secondary: var(--royal-plum); --secondary: var(--royal-plum);
--secondary90: #5d2169d0;
--light-primary: var(--ve-vanilla); --light-primary: var(--ve-vanilla);
--light-secondary: var(--sandstorm-taupe); --light-secondary: var(--sandstorm-taupe);
--netzlinien: var(--poppler-aftermath); --netzlinien: var(--poppler-aftermath);
@ -204,6 +206,7 @@ header#hero img {
#menu__toggle { #menu__toggle {
opacity: 0; opacity: 0;
} }
#menu__toggle:checked + .menu__btn > span { #menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg); transform: rotate(45deg);
@ -221,31 +224,40 @@ header#hero img {
} }
.menu__btn { .menu__btn {
position: fixed; position: fixed;
top: 50px; top: 40px;
left: 3.5%; left: 3.5%;
width: 40px; width: 60px;
height: 50px; height: 60px;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 2;
background-color: var(--primary90);
border-radius: 30px;
} }
.menu__btn > span, .menu__btn > span,
.menu__btn > span::before, .menu__btn > span::before,
.menu__btn > span::after { .menu__btn > span::after {
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 35px;
height: 2px; height: 2px;
background-color: var(--secondary); background-color: var(--secondary);
transition-duration: .3s; transition-duration: .3s;
}
.menu__btn > span {
top: 29px;
left: 12px
} }
.menu__btn > span::before { .menu__btn > span::before {
content: ''; content: '';
top: -8px; top: -10px;
} }
.menu__btn > span::after { .menu__btn > span::after {
content: ''; content: '';
top: 8px; top: 10px;
} }
.menu__box { .menu__box {
display: block; display: block;
@ -260,6 +272,7 @@ header#hero img {
background-color: var(--primary); background-color: var(--primary);
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .3s; transition-duration: .3s;
z-index:1;
} }
.menu__item { .menu__item {
display: block; display: block;
@ -480,7 +493,7 @@ a.imp:before {
text-decoration: underline; text-decoration: underline;
} }
/***********************************************************************/ /* START Newsgrid */
#newsgrid { #newsgrid {
@ -504,7 +517,7 @@ a.imp:before {
} }
/******************************************************************************/ /* ENDE Newsgrid */
.main_with_sidebar { .main_with_sidebar {
display: flex; display: flex;
@ -514,7 +527,7 @@ a.imp:before {
} }
.main_with_sidebar > :first-child { .main_with_sidebar > :first-child {
flex-basis: 30%; flex-basis: 29%;
flex-grow: 1; flex-grow: 1;
} }