reglages navbar

pages/litterall.html

@@ -15,8 +15,9 @@
 			<div class="nav_left">
 				<a class="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
 				<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
-				<a href="./pages/litterall.html"><p>litterall</p></a>
+				<a href="./pages/litterall.html"><p>LITTER<i>all</i></p></a>
 				<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
+				<a href="./pages/evenements.html"><p>evenements</p></a>
 			</div>
 			<div class="nav_right">
 			</div>

styles/nav.css

@@ -0,0 +1,37 @@
+
+/*---------------------------------------------*/
+/*NAVBAR*/
+body nav {
+	border-bottom: 1px solid lightgrey;
+}
+body nav * {
+	display: flex;
+	flex-direction: row;
+	margin: auto;
+}
+body nav .nav_left, body nav .nav_right {
+	margin: 2px auto;
+}
+/* nav_left is used for links to pages*/
+body nav .nav_left {
+	margin-left: 2px;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+body nav .nav_left a {
+	height: 100%;
+	margin: auto 20px;
+}
+body nav .nav_left img {
+	height: 100%;
+}
+/* nav_right is used for actions such as connection, search or language*/
+body nav .nav_right {
+	margin-right: 2px;
+}
+/* links looks on hover or click*/
+body nav a:hover, body nav a:focus {
+	background-color: lightgrey;
+}
+
+

styles/skeleton.css

@@ -70,47 +70,9 @@ body nav {
 	flex-direction: row;
 	/*we have to set the height to use the height % for childs elements*/
 	height: var(--nav-height);
-	width: 100%;
-	border-bottom: 1px solid lightgrey;
 	background-color: var(--base-back-color);
 	z-index: 10;
 }
-body nav * {
-	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;
-}
-/* special settings for the logo*/
-body nav a.nav_logo {
-	padding: 0px;
-	width: var(--aside-left-width);
-}
-body nav a.nav_logo img {
-	height: calc(var(--nav-height) - 5px);
-}
-/* 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 {
-	/*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
-	padding: 0px calc(var(--gap-unit) * 1.5);
-	height: 100%;
-}
-body nav a:hover, body nav a:focus {
-	background-color: lightgrey;
-}
 
 /*CONTAINER*/
 body .container_main {
@@ -125,11 +87,10 @@ body .container_main {
 body aside.page_content {
 	top: calc(var(--nav-height) + 1px);
 	height: calc(100vh - var(--nav-height));
-	margin-right: var(--aside-margin);
 }
 /* asides elements only have width if they have a child*/
 body aside.page_content .table_box {
-	width: calc(var(--aside-left-width) - 2 * var(--aside-margin));
+	width: var(--aside-left-width);
 	margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
 	/*border-box so changing padding has no effect on total width*/
 	box-sizing: border-box;

styles/style.css

@@ -4,10 +4,15 @@
 @import url(./reset.css);
 @import url(./global.css);
 @import url(./skeleton.css);
+
+@import url(./nav.css);
+@import url(./aside_left.css);
+@import url(./main.css);
+@import url(./aside_right.css);
+@import url(./footer.css);
+
 @import url(./fonts.css);
 @import url(./text.css);
-@import url(./header.css);
-@import url(./footer.css);
 @import url(./images.css);
 
 

styles/text.css

@@ -8,6 +8,12 @@ h1, h2, h3, h4, h5, h6 {
 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*/
 /*links when they are part of a text*/
 p a, p a:link {