bouton langue fonctionne et reorganisation langues en cours

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="dropdown">
-					<div class="drop_item drop_title horizontal">
+					<a class="drop_title drop horizontal" tabindex="0">
-						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais"></a>
+						<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
 						<p>fr</p>
-					</div>
+					</a>
-					<div class="drop_item horizontal">
+					<div class="drop_items">
-						<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag"></a>
+						<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>
-					</div>
+						</a>
-					<div class="drop_item horizontal">
+						<a class="drop horizontal" href="./pages/litterall_de.html">
-						<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge"></a>
+							<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
 							<p>de</p>
+						</a>
 					</div>
 				</div>
 			</div>

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 > * {
+/*DROPDOWN*/
-	margin-right: 10px;
+/*
+	.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;
 }
 
-

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);
+}
+*/

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