From 3dc683d1c4796a89bc3a66dcae4808dc2b42da67 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Sun, 14 Mar 2021 13:58:13 +0100
Subject: [PATCH] dropdown language fleche plus legere

---
 fr/litterall.html |  4 ++--
 styles/nav.css    | 39 +++++++++++++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/fr/litterall.html b/fr/litterall.html
index 3858c34..a56104f 100644
--- a/fr/litterall.html
+++ b/fr/litterall.html
@@ -26,11 +26,11 @@
 						<p>fr</p>
 					</a>
 					<div class="drop_items">
-						<a class="drop horizontal" href="./en/litterall_en.html">
+						<a class="drop horizontal" href="./en/litterall.html">
 							<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
 							<p>en</p>
 						</a>
-						<a class="drop horizontal" href="./de/litterall_de.html">
+						<a class="drop horizontal" href="./de/litterall.html">
 							<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
 							<p>de</p>
 						</a>
diff --git a/styles/nav.css b/styles/nav.css
index 59e4e20..ffb91ef 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -35,10 +35,17 @@ nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
 nav .nav_right {
 	margin-right: 2px;
 }
+
+
+
+
+
+
+/*---------------------------------------------*/
 /*DROPDOWN*/
 /*
 	.dropdown
-		.drop .drop_title
+		.drop_title .drop
 		.drop_items
 			.drop
 			.drop
@@ -49,6 +56,7 @@ nav .nav_right .dropdown {
 	flex-direction: column;
 }
 nav .nav_right .dropdown .drop {
+	position: relative;
 	padding: 0px 20px;
 	background-color: var(--color-back-base);
 }
@@ -60,6 +68,19 @@ nav .nav_right .dropdown .drop_items {
 	flex-direction: column;
 	display: none;
 }
+/* horizontal space between flag and name*/
+nav .nav_right .dropdown .drop > * {
+	margin: auto 3px;
+}
+/*flag size*/
+nav .nav_right .dropdown img.flag {
+	height:  12px;
+}
+/*flag size*/
+nav .nav_right .dropdown .drop p {
+	font-size:  1.6em;
+}
+/*the menu appears when focus on an element inside*/
 nav .nav_right .dropdown:focus-within * {
 	display: flex;
 }
@@ -72,11 +93,17 @@ nav .nav_right .dropdown:focus-within:after {
 	width: 100%;
 	height: 100%;
 }
-/* horizontal space between flag and name*/
-nav .nav_right .dropdown .drop > * {
-	margin: auto 5px;
+/*the little arrow point down*/
+nav .nav_right .dropdown .drop_title:after {
+	content: "▼"; /* ▲ */
+	content: "v";
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	transform: translateY(-50%);
 }
-nav .nav_right .dropdown img.flag {
-	height:  15px;
+/*the little arrow point up*/
+nav .nav_right .dropdown .drop_title:focus:after {
+	transform: rotate(180deg) translateY(20%);
 }