From 871731b61d43b3de840756b341e73c087e91b9e2 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Sun, 14 Mar 2021 13:18:17 +0100
Subject: [PATCH] bouton langue fonctionne et reorganisation langues en cours

---
 {pages => fr}/kosmopolit.html  |  0
 {pages => fr}/lettredeeda.html |  0
 {pages => fr}/litterall.html   | 24 +++++++------
 styles/nav.css                 | 63 +++++++++++++++++++++++++++-------
 styles/skeleton.css            | 35 ++++++++++++++++++-
 styles/text.css                |  8 ++---
 6 files changed, 101 insertions(+), 29 deletions(-)
 rename {pages => fr}/kosmopolit.html (100%)
 rename {pages => fr}/lettredeeda.html (100%)
 rename {pages => fr}/litterall.html (90%)

diff --git a/pages/kosmopolit.html b/fr/kosmopolit.html
similarity index 100%
rename from pages/kosmopolit.html
rename to fr/kosmopolit.html
diff --git a/pages/lettredeeda.html b/fr/lettredeeda.html
similarity index 100%
rename from pages/lettredeeda.html
rename to fr/lettredeeda.html
diff --git a/pages/litterall.html b/fr/litterall.html
similarity index 90%
rename from pages/litterall.html
rename to fr/litterall.html
index 69afa9c..d12b042 100644
--- a/pages/litterall.html
+++ b/fr/litterall.html
@@ -20,18 +20,20 @@
 				<a href="./pages/evenements.html"><p>evenements</p></a>
 			</div>
 			<div class="nav_right">
-				<div class="dropdown vertical">
-					<div class="drop_item drop_title horizontal">
-						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais"></a>
+				<div class="dropdown">
+					<a class="drop_title drop horizontal" tabindex="0">
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
 						<p>fr</p>
-					</div>
-					<div class="drop_item horizontal">
-						<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag"></a>
-						<p>en</p>
-					</div>
-					<div class="drop_item horizontal">
-						<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge"></a>
-						<p>de</p>
+					</a>
+					<div class="drop_items">
+						<a class="drop horizontal" href="./pages/litterall_en.html">
+							<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
+							<p>en</p>
+						</a>
+						<a class="drop horizontal" href="./pages/litterall_de.html">
+							<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
+							<p>de</p>
+						</a>
 					</div>
 				</div>
 			</div>
diff --git a/styles/nav.css b/styles/nav.css
index a850b3e..59e4e20 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -1,45 +1,82 @@
 
 /*---------------------------------------------*/
 /*NAVBAR*/
-body nav {
+nav {
 	border-bottom: 1px solid var(--color-lines-4);
 }
-body nav * {
+nav * {
 	display: flex;
 	flex-direction: row;
 	margin: auto;
 	height: 100%;
 }
 /* nav_left is used for links to pages*/
-body nav .nav_left {
+nav .nav_left {
 	margin-left: 0px;
 }
-body nav .nav_left a {
+nav .nav_left a {
 	padding: 0px 20px;
 }
-body nav .nav_left #nav_logo {
+nav .nav_left #nav_logo {
 	padding-left: 40px;
 	padding-right: 40px;
 }
-body nav .nav_left a p {
+nav a p {
 	/*to center vertically the text*/
 	height: auto;
 }
-body nav .nav_left img {
+nav .nav_left img {
 	height: calc(100% - 4px);
 }
-body nav a:not(#nav_logo):hover, body nav a:not(#nav_logo):focus {
+nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
 	background-color: var(--color-back-dark);
 }
 /* nav_right is used for actions such as connection, search or language*/
-body nav .nav_right {
+nav .nav_right {
 	margin-right: 2px;
 }
-body nav .nav_right .dropdown .drop_item > * {
-	margin-right: 10px;
+/*DROPDOWN*/
+/*
+	.dropdown
+		.drop .drop_title
+		.drop_items
+			.drop
+			.drop
+*/
+nav .nav_right .dropdown {
+	position: relative;
+	height: 100%;
+	flex-direction: column;
 }
-body nav .nav_right .dropdown img.flag {
+nav .nav_right .dropdown .drop {
+	padding: 0px 20px;
+	background-color: var(--color-back-base);
+}
+nav .nav_right .dropdown .drop_items {
+	position: absolute;
+	top: 100%;
+	left: 0px;
+	height: 100%;
+	flex-direction: column;
+	display: none;
+}
+nav .nav_right .dropdown:focus-within * {
+	display: flex;
+}
+/*a rectangle cover the div when focus, so you can click on it to unfocus*/
+nav .nav_right .dropdown:focus-within:after {
+	content: "";
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+}
+/* horizontal space between flag and name*/
+nav .nav_right .dropdown .drop > * {
+	margin: auto 5px;
+}
+nav .nav_right .dropdown img.flag {
 	height:  15px;
 }
 
-
diff --git a/styles/skeleton.css b/styles/skeleton.css
index a6a9455..8078ffb 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -73,4 +73,37 @@ footer.page_footer {
 	position: sticky;
 	top: 0;
 }
-
+/*dropdown element*/
+/*
+	.dropdown
+		.drop .drop_title
+		.drop_items
+			.drop
+			.drop
+*/
+/*
+.dropdown {
+	flex-direction: column;
+	position: relative;
+	margin-right: 20px;
+}
+.dropdown:after {
+	content: "▼";
+	position: absolute;
+	left: 100%;
+	top: 50%;
+	-ms-transform: translateY(-50%); old IE
+	transform: translateY(-50%);
+}
+.dropdown .drop_title {
+}
+.dropdown .drop_items {
+	position: absolute;
+	top: 100%;
+	left: 0px;
+	height: auto;
+}
+.dropdown .drop {
+	margin: var(--gap-unit);
+}
+*/
diff --git a/styles/text.css b/styles/text.css
index 8e02c9d..171a43b 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -60,15 +60,15 @@ small {
 	line-height: 1.2em;
 }
 /*specials settings*/
-body p, body p *, body h1, body h1 *, body h2, body h2 * {
+p, p *, h1, h1 *, h2, h2 * {
+	display: inline;
+}
+li *, li p, p b, p em, p i, p a, p span {
 	display: inline;
 }
 a, a > * {
 	cursor: pointer;
 }
-li *, li p, b, em, i, a, var, span {
-	display: inline;
-}
 i {
 	font-style: italic;
 }