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 +55 -1
2 changed files with 55 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a5ed3add25 - Show all commits

40
sass/css/header.scss
View file

@ -42,3 +42,43 @@ header {
color: white;
}
}
@media (min-width: 1024px) {
.phone-only {
display: none;
}
}
@media (max-width: 1023px) {
.menu-phone {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 1em;
padding: 2em;
background-color: white;
}
.hidden-phone {
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 {
opacity: 100%;
}

16
templates/base.html
View file

@ -28,14 +28,28 @@
<h1 class="sr-only">Librezo</h1>
</a>
<nav id="header-menu">
<ul>
<ul id="menu" class="hidden-phone menu-phone ">
<li>
<picture class="phone-only">
<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/>
</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>
<li><button class="phone-only hamburger-menu" onclick="toggleMenu()">&#9776;</button></li>
</nav>
<script>
var menu = document.getElementById('menu');
function toggleMenu() {
menu.classList.toggle('hidden-phone');
}
</script>
</header>
{% block body %}{% endblock body %}
<footer>