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

add responsive menu #1

Merged
tuxmain merged 3 commits from responsive-menu into main 2023-05-27 12:15:47 +00:00
Conversation 0 Commits 3 Files changed 2 +32 -27
2 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a2c3c3eab0 - Show all commits

23
sass/css/header.scss
View file

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

16
templates/base.html
View file

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