menu entierement en ligne pour iframe et ajout liens vers revues litterall

styles/aside_right.css

@@ -1,6 +1,6 @@
 
 /*---------------------------------------------*/
-/*ASIDE RIGHT RELATIVES*/
+/*ASIDE RIGHT*/
 /* aside right is for links to relatives content*/
 aside.aside_right {
 	padding: calc(var(--gap-unit) / 2);
@@ -9,6 +9,9 @@ aside.aside_right {
 aside.aside_right *:first-child {
 	width: var(--aside-right-width);
 }
+
+/*---------------------------------------------*/
+/*RELATIVES BOX*/
 aside.aside_right .relative_box {
 	margin: var(--aside-margin);
 	padding: var(--gap-unit);
@@ -25,3 +28,27 @@ aside.aside_right .relative_box > * {
 aside.aside_right .relative_box a h2 {
 	color: var(--color-text-2);
 }
+
+
+
+/*---------------------------------------------*/
+/*BUTTON BOX*/
+aside.aside_right .button_box {
+	margin: 10px var(--aside-margin);
+	margin-bottom: 0px;
+	padding: calc(var(--gap-unit) / 2);
+	border: 1px solid var(--color-lines-2);
+	border-radius: 23px;
+	border-radius: 10em;
+}
+aside.aside_right .button_box:first-child {
+	margin-top: var(--aside-margin);
+}
+aside.aside_right .button_box * {
+	width: auto;
+}
+aside.aside_right .button_box h2 {
+	padding-left: 30px;
+}
+
+

styles/litterall_1.css

@@ -1,18 +1,28 @@
-aside.aside_right .relative_box {
-	border-radius: 23px;
-	margin: 5px var(--aside-margin);
-}
-aside.aside_right .relative_box:first-child {
-	margin-top: var(--aside-margin);
-}
-aside.aside_right .relative_box * {
-	width: auto;
-}
-aside.aside_right .relative_box a {
-	margin-bottom: 0px;
-}
 .sommaire_name_width {
 	padding: 0px 5px;
 	background-color: hsl(var(--hue-4) 50% 90%);
 }
 
+
+/*---------------------------------------------*/
+/*NAVBAR special DROPDOWN*/
+.navbar .nav_right .dropdown .drop {
+	background-color: var(--color-back-base);
+}
+.navbar .nav_right .dropdown a:hover, .navbar .nav_right .dropdown a:focus {
+	background-color: var(--color-back-dark);
+}
+.navbar .nav_right .dropdown .drop_items {
+	top: 100%;
+	left: 0px;
+	height: 100%;
+	flex-direction: column;
+	display: none;
+}
+.navbar .nav_right .dropdown .drop_items::before {
+	display: none;
+}
+.navbar .nav_right .dropdown:focus-within * {
+	display: flex;
+}
+

styles/nav.css

@@ -1,11 +1,19 @@
 
 /*---------------------------------------------*/
 /*NAVBAR*/
+nav iframe {
+	width: 100%;
+}
+body#body_navbar {
+	background-color: transparent;
+	overflow: hidden;
+}
 .navbar {
 	flex-direction: row;
 	/*we have to set the height to use the height % for childs elements*/
 	height: var(--nav-height);
 	background-color: var(--color-back-base);
+	border-bottom: 1px solid var(--color-lines-4);
 }
 .navbar * {
 	display: flex;
@@ -24,16 +32,19 @@
 	padding-left: 40px;
 	padding-right: 40px;
 }
-.navbar a p {
+.navbar a > * {
 	/*to center vertically the text*/
 	height: auto;
 }
 .navbar .nav_left img {
 	height: calc(100% - 4px);
 }
-.navbar a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
+.navbar a:hover, .navbar a:focus {
 	background-color: var(--color-back-dark);
 }
+.navbar a#nav_logo:hover, .navbar a#nav_logo:focus {
+	background-color: var(--color-back-base);
+}
 /* nav_right is used for actions such as connection, search or language*/
 .navbar .nav_right {
 	margin-right: 2px;
@@ -61,16 +72,31 @@
 .navbar .nav_right .dropdown .drop {
 	position: relative;
 	padding: 0px 20px;
+}
+.navbar .nav_right .dropdown .drop_title:focus {
 	background-color: var(--color-back-base);
 }
+/* the items that drop horizontally to the left*/
 .navbar .nav_right .dropdown .drop_items {
 	position: absolute;
-	top: 100%;
-	left: 0px;
+	top: 0px;
+	right: 100%;
 	height: 100%;
-	flex-direction: column;
+	width: auto;
+	background-color: var(--color-back-base);
+	flex-direction: row;
 	display: none;
 }
+/* create a gaz on the rest of the navbar when language menu drop*/
+.navbar .nav_right .dropdown .drop_items::before {
+	content: "";
+	position: absolute;
+	top: 0px;
+	right: 100%;
+	width: 100vw;
+	height: 100%;
+	background-color: rgba(240,240,240,0.5);
+}
 /* horizontal space between flag and name*/
 .navbar .nav_right .dropdown .drop > * {
 	margin: auto 3px;

styles/skeleton.css

@@ -18,14 +18,8 @@ body {
 nav {
 	flex-direction: row;
 	/*we have to set the height to use the height % for childs elements*/
-	height: var(--nav-height);
-	background-color: var(--color-back-base);
+	height: calc(var(--nav-height) + 1px);
 	z-index: 10;
-	border-bottom: 1px solid var(--color-lines-4);
-}
-nav iframe {
-	width: 100%;
-	height: 100%;
 }
 .container_main {
 	flex-direction: row;

styles/text.css

@@ -1,19 +1,12 @@
 
 /*---------------------------------------------*/
-/*TEXTS*/
-/*fonts*/
+/*FONTS*/
 h1, h2, h3, h4, h5, h6 {
 	font-family: var(--font-titles), var(--font-fallback), sans-serif;
 }
 a, p, li {
 	font-family: var(--font-texts), var(--font-fallback), sans-serif;
 }
-nav p {
-	font-family: var(--font-titles), var(--font-fallback), sans-serif;
-}
-.table_box p {
-	font-family: var(--font-titles), var(--font-fallback), sans-serif;
-}
 
 /*---------------------------------------------*/
 /*COLORS*/
@@ -31,7 +24,7 @@ p a:active {
 	color: var(--color-link-active);
 }
 /*color text*/
-p, span {
+h1, h2, h3, p, span {
 	color: var(--color-text);
 }