Librezo/website
Librezo/website
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: Librezo:df0cde7f95104a47f727e5973bbbcf7df912f03e
Branches Tags
Librezo:main
Librezo:attilax-changementaccueil
...
compare: Librezo:a2c3c3eab07c2cc4e08454f2cb021ff827125e73
Branches Tags
Librezo:main
Librezo:attilax-changementaccueil

3 commits
df0cde7f95 ... a2c3c3eab0

Author SHA1 Message Date
Pascal Engélibert
a2c3c3eab0 Phone menu: fix color theme, a11y, correctness 2023-05-26 19:02:48 +02:00
oiseauroch
67921ddfaa remove js 2023-05-26 17:59:46 +02:00
oiseauroch
a5ed3add25 add responsive menu 2023-05-26 17:02:04 +02:00
2 changed files with 69 additions and 1 deletions
Show stats Expand all files Collapse all files

50
sass/css/header.scss
View file

@ -37,8 +37,58 @@ 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) {
.phone-only {
display: none;
}
}
@media (max-width: 767px) {
.header-menu-phone {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
}
.phone-hidden {
display: none;
}
}
.hamburger-menu {
font-size: 1.5em;
margin: 0.25em;
font-family: LunaSans;
border: none;
background-color: transparent;
cursor: pointer;
opacity: 65%;
}
.hamburger-menu:hover, .hamburger-menu:focus {
opacity: 100%;
}
.hamburger-menu > summary {
list-style: none;
}

20
templates/base.html
View file

@ -28,13 +28,31 @@
<h1 class="sr-only">Librezo</h1>
</a>
<nav id="header-menu">
<ul>
<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>
<li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<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"/>
</picture>
</li>
<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>
<li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</details>
</nav>
</header>
{% block body %}{% endblock body %}