navbar mise en page

styles/global.css

@@ -6,6 +6,8 @@
 	--base-font-size: 10px;
 	--nav-height: 40px;
 	--base-back-color: white;
+	--aside-left-width: 200px;
+	--aside-right-width: 350px;
 }
 
 
@@ -60,7 +62,7 @@ body, body * {
 	display: flex;
 	flex-direction: column;
 }
-body > *:not(.container_main), aside, main {
+body aside, body main {
 	padding: calc(var(--gap-unit) / 2);
 }
 
@@ -82,21 +84,43 @@ body {
 /*NAVBAR*/
 body nav {
 	flex-direction: row;
+	/*we have to set the height to use the height % for childs elements*/
 	height: var(--nav-height);
 	border-bottom: 1px solid lightgrey;
 	background-color: var(--base-back-color);
 	z-index: 10;
 }
-body nav *:first-child {
-	margin-left: var(--gap-unit);
-	padding-left: 0px;
-}
-body nav > * {
-	margin: auto 20px;
-	padding: 0px 10px;
-}
 body nav * {
-	max-height: var(--nav-height);
+	display: flex;
+	flex-direction: row;
+	margin: auto;
+	max-height: 100%;
+}
+/*nav_left is used for links to pages*/
+body nav .nav_left  {
+	/*we have to set the height to use the height % for childs elements*/
+	height: 100%;
+	margin-left: 0px;
+	margin-right: auto;
+}
+/*nav_right is used for actions such as connection, search or language*/
+body nav .nav_right {
+	height: 100%;
+	margin-left: auto;
+	margin-right: 0px;
+}
+/*appearence on hover and click*/
+body nav a {
+	padding: 0px 20px;
+	height: 100%;
+}
+body nav a:hover, body nav a:focus {
+	background-color: lightgrey;
+}
+/*special settings for the logo*/
+body nav a.nav_logo {
+	padding: 0px;
+	width: var(--aside-left-width);
 }
 
 /*CONTAINER*/
@@ -115,7 +139,7 @@ body aside.page_content > * {
 }
 /* asides elements only have width if they have a child*/
 body aside.page_content *:first-child {
-	width: 150px;
+	width: 200px;
 }
 
 /*MAIN*/
@@ -154,7 +178,7 @@ body aside.relative_content {
 }
 /* asides elements only have width if they have a child*/
 body aside.relative_content *:first-child {
-	width: 200px;
+	width: 350px;
 }
 
 /*FOOTER*/