Phone menu: fix color theme, a11y, correctness

This commit is contained in:
Pascal Engélibert
2023-05-26 19:02:48 +02:00
parent 67921ddfaa
commit a2c3c3eab0
2 changed files with 32 additions and 27 deletions

View File

@ -37,10 +37,20 @@ header {
text-decoration: none;
}
@media (prefers-color-scheme: light) {
.header-menu-phone {
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
#header-menu a {
color: white;
}
.header-menu-phone {
background-color: black;
}
}
@media (min-width: 768px) {
@ -50,7 +60,7 @@ header {
}
@media (max-width: 767px) {
.menu-phone {
.header-menu-phone {
position: absolute;
top: 0;
left: 0;
@ -58,10 +68,9 @@ header {
flex-direction: column;
gap: 1em;
padding: 2em;
background-color: white;
}
.hidden-phone {
.phone-hidden {
display: none;
}
}
@ -76,14 +85,10 @@ header {
opacity: 65%;
}
.hamburger-menu:hover {
.hamburger-menu:hover, .hamburger-menu:focus {
opacity: 100%;
}
summary {
.hamburger-menu > summary {
list-style: none;
}