From c20d3867f8de4cb0989556ab0ee7148e1886dd95 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Mon, 1 Mar 2021 21:09:31 +0100
Subject: [PATCH] navbar mise en page

---
 index.html           | 20 ++----------
 pages/litterall.html | 12 ++++---
 styles/global.css    | 48 +++++++++++++++++++++-------
 styles/index.css     | 76 ++++++--------------------------------------
 4 files changed, 56 insertions(+), 100 deletions(-)
diff --git a/index.html b/index.html
index e212bfa..fc7760d 100644
--- a/index.html
+++ b/index.html
@@ -12,22 +12,8 @@
 		</style>
 	</head>
 	<body>
-		<div id="main">
-			<img class="contain" src="./docs/kosmopolit_fond.png">
-			<div class="container-link">
-				<a class="link-index container-link-asso" href="./pages/asso.html">
-					<div class="dot-link dot-link-asso"></div>
-					<h1 class="menu-link link-asso">KOSMOPOLIT l'association</h1>
-				</a>
-				<a class="link-index container-link-litterall" href="./pages/litterall.html">
-					<div class="dot-link dot-link-litterall"></div>
-					<h1 class="menu-link link-litterall">LITTERall</h1>
-				</a>
-				<a class="link-index container-link-lettredeeda" href="./pages/lettredeeda.html">
-					<div class="dot-link dot-link-lettredeeda"></div>
-					<h1 class="menu-link link-lettredeeda">lettres d'europe et d'ailleurs</h1>
-				</a>
-			</div>
-		</div>
+		<main class="index">
+			<img src="./docs/kosmopolit_logo.png">
+		</main>
 	</body>
 </html>
diff --git a/pages/litterall.html b/pages/litterall.html
index 3708412..a209629 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -12,10 +12,14 @@
 	</head>
 	<body>
 		<nav class="sticky">
-			<p><a href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a></p>
-			<p><a href="">kosmopolit</a></p>
-			<p><a href="">litterall</a></p>
-			<p><a href="">l.e.a</a></p>
+			<div class="nav_left">
+				<a class="nav_logo" href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
+				<a href=""><p>kosmopolit</p></a>
+				<a href=""><p>litterall</p></a>
+				<a href=""><p>l.e.a</p></a>
+			</div>
+			<div class="nav_right">
+			</div>
 		</nav>
 		<div class="container_main">
 			<aside class="page_content sticky">
diff --git a/styles/global.css b/styles/global.css
index 1cbf880..c5f08bc 100644
--- a/styles/global.css
+++ b/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*/
diff --git a/styles/index.css b/styles/index.css
index a45ddc1..fcea651 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,76 +1,18 @@
 
-/*//////////////////////*/
+/*------------------------------------------*/
 /*IMAGE*/
-#main {
+body main.index {
 	position: relative;
 	height: 100vh;
 	width: 100vw;
+	padding: 0px;
+	margin: 0px;
 }
-img {
-	width: 100%;
-	height: 100%;
-}
-.contain {
+body main.index img {
+	margin: 0px;
+	padding: 0px;
+	max-width: 100vw;
+	max-height: 100vh;
 	object-fit: contain;
 }
-.cover {
-	object-fit: cover;
-}
-
-
-/*//////////////////////////*/
-/*MENU*/
-/*wrapper rectangle qui imite la taille de l'image*/
-.container-link {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 880px;
-	max-width: 100vw;
-	height: 600px;
-	/* border: 1px solid red; */
-}
-/*contain le text et le point (general)*/
-.link-index {
-	position: absolute;
-	display: flex;
-}
-.dot-link {
-	width: 30px;
-	min-width: 30px;
-	height: 30px;
-	margin: auto 10px;
-	border-radius: 50%;
-}
-.menu-link {
-	margin: auto;
-}
-/*contain le text et le point (specifique)*/
-.container-link-asso {
-	top: 1%;
-	left: 1%;
-}
-.dot-link-asso {
-	background-color: var(--color-purple);
-}
-/*contain le text et le point (specifique)*/
-.container-link-litterall {
-	bottom: 1%;
-	left: 70%;
-}
-.dot-link-litterall {
-	background-color: var(--color-green);
-}
-/*contain le text et le point (specifique)*/
-.container-link-lettredeeda {
-	top: 53%;
-	right: 6%;
-}
-.dot-link-lettredeeda {
-	background-color: var(--color-water);
-}
-.link-lettredeeda {
-	width: 50px;
-}
 
