From 2f530ecd33467db728012a9e6786bbb1c08a1c8b Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Thu, 22 Apr 2021 17:30:54 +0200
Subject: [PATCH] burger menu pour page fr litterall

---
 fr/litterall.html |  2 ++
 styles/media.css  | 38 ++++++++++++++++++++++----------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/fr/litterall.html b/fr/litterall.html
index ac2e51d..f45fd82 100644
--- a/fr/litterall.html
+++ b/fr/litterall.html
@@ -15,6 +15,8 @@
 
 		<nav class="navbar sticky">
 
+			<label for="burger" class="burger"></label>
+			<input type="checkbox" id="burger">
 			<div class="nav_left">
 				<a id="nav_logo" href="index.html"	target="_parent"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
 				<a href="./fr/kosmopolit.html"		target="_parent"><p>KOSMOPOLIT</p></a>
diff --git a/styles/media.css b/styles/media.css
index b11c2dc..bb53411 100644
--- a/styles/media.css
+++ b/styles/media.css
@@ -21,7 +21,6 @@
 	}
 	.navbar .nav_left a {
 		display: none;
-		display: flex;
 		margin-left: 0px;
 		width: 100%;
 	}
@@ -30,11 +29,10 @@
 	}
 	.navbar .nav_right {
 		display: none;
-		display: flex;
 	}
 	.navbar .nav_left a#nav_logo {
 		display: flex;
-		margin-bottom: 40px;
+		margin-bottom: 0px;
 		width: auto;
 	}
 	.navbar .nav_left {
@@ -46,7 +44,18 @@
 		width: 150px;
 	}
 	/*burger menu*/
-	nav.navbar::before {
+	nav.navbar input#burger {
+		display: none;
+	}
+	nav.navbar .burger {
+		position: absolute;
+		right: 0px;
+		top: 0px;
+		height: 100%;
+		width: 50%;
+		cursor: pointer;
+	}
+	nav.navbar .burger::before {
 		content: "";
 		position: absolute;
 		right: 20px;
@@ -55,9 +64,8 @@
 		height: 14px;
 		border-top: 2px solid lightgrey;
 		border-bottom: 2px solid lightgrey;
-		cursor: pointer;
 	}
-	nav.navbar::after {
+	nav.navbar .burger::after {
 		content: "";
 		position: absolute;
 		right: 20px;
@@ -65,18 +73,16 @@
 		width: 26px;
 		height: 2px;
 		border-top: 2px solid lightgrey;
-		pointer-events: none;
-		display: none;
 	}
-	nav.navbar:hover .nav_right {
-		display: none;
-	}
-	nav.navbar:hover .nav_left a {
-		display: none;
-	}
-	nav.navbar:hover .nav_left a#nav_logo {
+	nav.navbar #burger:checked ~ .nav_right {
 		display: flex;
-		margin-bottom: 0px;
+	}
+	nav.navbar #burger:checked ~ .nav_left a {
+		display: flex;
+	}
+	nav.navbar #burger:checked ~ .nav_left a#nav_logo {
+		display: flex;
+		margin-bottom: 40px;
 	}
 	/*MAIN*/
 	main {