Librezo/website
Librezo/website
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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 +69 -1
2 changed files with 69 additions and 1 deletions
Show stats Download patch file Download diff file 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 %}