nav et aside left en sticky

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;
+}
 

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,