From 41d4a450c83ead98ae2fb0a4c070137d8d0b324d Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Mon, 1 Mar 2021 11:29:29 +0100
Subject: [PATCH] nav et aside left en sticky

---
 pages/litterall.html | 13 +++++----
 styles/global.css    | 67 ++++++++++++++++++++++++++++++++------------
 styles/reset.css     |  7 ++---
 3 files changed, 60 insertions(+), 27 deletions(-)
diff --git a/pages/litterall.html b/pages/litterall.html
index 3513891..3708412 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -11,14 +11,14 @@
 		<link href="./styles/litterall.css" type="text/css" rel="stylesheet">
 	</head>
 	<body>
-		<nav>
+		<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>
 		</nav>
 		<div class="container_main">
-			<aside class="page_content">
+			<aside class="page_content sticky">
 				<h2>litterall</h2>
 			</aside>
 			<!-- main
@@ -26,12 +26,12 @@
 			ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
 			-->
 			<main>
-				<div class="page.infos">
-					<p><small><a>accueil</a> > <a>litterall</a></small></p>
-					<p><small>truc</small></p>
+				<div class="page_path">
+					<p><i><small><a>accueil</a> > <a>litterall</a></small></i></p>
 				</div>
 				<div class="page_title">
 					<h1 id="anchor_litterall">LITTER<i>all</i></h1>
+					<p class="date"><i><small>edité le 01/03/2020</small></i></p>
 				</div>
 				<p class="right"><i>“Il est difficile à des étrangers comme nous de pénétrer l’ultime secret des vers d’une autre langue. Ce n’est pas à nous d’en juger, nous n’aurons pas le dernier mot.”</i><br><small>Ossip Mandelstam, Entretiens sur Dante</small><br><small>traduction Louis Martinez</small></p>
 				<br><br>
@@ -94,5 +94,8 @@
 					<h2></h2>
 				</div>
 			</aside>
+		</div>
+		<footer class="page_footer">
+		</footer>
 	</body>
 </html>
diff --git a/styles/global.css b/styles/global.css
index d330ac0..1cbf880 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -5,11 +5,17 @@
 	--max-screen: 1500px;
 	--base-font-size: 10px;
 	--nav-height: 40px;
+	--base-back-color: white;
 }
 
 
 /*DEBUG*/
 /* borders on mains elements of pages for debugging*/
+body * {
+	/*
+	border: 1px solid red;
+	*/
+}
 body > *, body > .container_main > * {
 	/*
 	border: 1px solid red;
@@ -22,10 +28,10 @@ body > *, body > .container_main > * {
 	 ---------------------    --------------------- 
 	'         NAV         '  '         NAV         '
 	'---------------------'  '---------------------'
-	' ------------------- '  ' S '    INFOS    ' A '
+	' ------------------- '  ' S '    PATHS    ' A '
 	''     CONTAINER     ''  ' U '    -----    ' S '
 	'' ---  -------  --- ''  ' M '    TITLE    ' I '
-	''' S '' INFOS '' A '''  ' M '    -----    ' D '
+	''' S '' PATHS '' A '''  ' M '    -----    ' D '
 	''' U '' ----- '' S '''  ' A '      M      ' E '
 	''' M '' TITLE '' I '''  ' R '      A      ' S '
 	''' M '' ----- '' D '''  ' Y '      I      '   '
@@ -42,7 +48,7 @@ body > *, body > .container_main > * {
 	container		->	.container_main
 		summary		->	aside.page_content
 		main		->	main
-			infos	->	.page.infos
+			paths	->	.page.path
 			title	->	.page_title
 		asides		->	aside.relative_content
 	footer			->
@@ -70,6 +76,7 @@ html {
 body {
 	max-width: var(--max-screen);
 	margin: auto;
+	background-color: var(--base-back-color);
 }
 
 /*NAVBAR*/
@@ -77,6 +84,8 @@ body nav {
 	flex-direction: row;
 	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);
@@ -95,6 +104,20 @@ body .container_main {
 	flex-direction: row;
 }
 
+/*ASIDE LEFT SUMMARY*/
+/* aside left is for page table of content */
+body aside.page_content {
+	top: calc(var(--nav-height) + var(--gap-unit) + 1px);
+	height: calc(100vh - var(--nav-height) - 2 * var(--gap-unit));
+}
+body aside.page_content > * {
+	margin: var(--gap-unit) 0px;
+}
+/* asides elements only have width if they have a child*/
+body aside.page_content *:first-child {
+	width: 150px;
+}
+
 /*MAIN*/
 body main {
 }
@@ -102,28 +125,29 @@ body main > * {
 	margin: var(--gap-unit) 0px;
 }
 
-/*INFOS*/
-body .page_path {
+/*PATH*/
+body main .page_path {
+	margin-top: 0px;
 }
 
 /*TITLE*/
-body .page_title {
-	height: 100px;
+body main .page_title {
+	position: relative;
+	height: 150px;
 	border-bottom: 1px solid lightgrey;
 }
-body .page_title * {
+body main .page_title h1 {
 	margin: auto 0px;
 }
+body main .page_title .date {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+}
 
-/*ASIDES*/
-body aside {
-}
-/* aside left is for page table of content */
-body aside.page_content {
-}
-/* asides elements only have width if they have a child*/
-body aside.page_content *:first-child {
-	width: 150px;
+/*ASIDE RIGHT RELATIVES*/
+body aside.relative_content > * {
+	margin: var(--gap-unit) 0px;
 }
 /* aside right is for links to relatives content*/
 body aside.relative_content {
@@ -134,7 +158,9 @@ body aside.relative_content *:first-child {
 }
 
 /*FOOTER*/
-body footer {
+body footer.page_footer {
+	height: 100px;
+	border-top: 1px solid lightgrey;
 }
 
 
@@ -162,4 +188,9 @@ body footer {
 	margin-left: auto;
 	text-align: center;
 }
+.sticky {
+	position: -webkit-sticky; /*safari*/
+	position: sticky;
+	top: 0;
+}
 
diff --git a/styles/reset.css b/styles/reset.css
index 48bc571..d070342 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -1,15 +1,14 @@
 
 /*/////////////////////////////////////////////*/
 /*RESET*/
+* {
+	box-sizing: content-box;
+}
 /*
 body *:not(script) {
 	display: block;
 }
 */
-body *:not(script) {
-	display: flex;
-	flex-direction: column;
-}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
