Librezo/website
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Phone menu: fix color theme, a11y, correctness

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
sass/css/header.scss
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;
}

16
templates/base.html
View File

@ -28,7 +28,7 @@
<h1 class="sr-only">Librezo</h1>
</a>
<nav id="header-menu">
<ul class="hidden-phone">
<ul class="phone-hidden">
<li><a href="/fonctionnement">Fonctionnement</a></li>
<li><a href="/tarifs">Services et tarifs</a></li>
<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
@ -36,14 +36,14 @@
<li><a href="/contact">Contact</a></li>
</ul>
<li><details class="phone-only hamburger-menu" >
<summary>&#9776;</summary>
<ul id="menu" class=" menu-phone ">
<li>
<picture class="phone-only">
<details class="phone-only hamburger-menu">
<summary aria-label="Menu" title="Menu">&#9776;</summary>
<ul class="header-menu-phone">
<li aria-hidden>
<picture>
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light)"/>
<img decoding="async" src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
<img decoding="async" src="/img/librezo-little-black.png" alt="Librezo"/>
</picture>
</li>
<li><a href="/fonctionnement">Fonctionnement</a></li>
@ -52,7 +52,7 @@
<li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</details></li>
</details>
</nav>
</header>
{% block body %}{% endblock body %}