Phone menu: fix color theme, a11y, correctness

sass/css/header.scss

@@ -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;
 }

templates/base.html

@@ -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 %}