Phone menu: fix color theme, a11y, correctness
This commit is contained in:
parent
67921ddfaa
commit
a2c3c3eab0
2 changed files with 32 additions and 27 deletions
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue