transvase aside style dans aside css

pages/litterall.html

@@ -29,8 +29,9 @@
 				<div class="table_box"> <!-- container use to adjust padding -->
 					<h2>sommaire</h2>
 					<a href="./pages/litterall.html#anchor_litterall"><p>litterall</p></a>
-					<a href="./pages/litterall.html#anchor_last"><p>dernier numero</p></a>
+					<a href="./pages/litterall.html#anchor_27"><p>numero 27</p></a>
-					<a href="./pages/litterall.html#anchor_previous"><p>anciens numeros</p></a>
+					<a href="./pages/litterall.html#anchor_26"><p>numero 26</p></a>
+					<a href="./pages/litterall.html#anchor_archives"><p>archives</p></a>
 				</div>
 			</aside>
 
@@ -53,7 +54,7 @@
 					<img src="./docs/litterall/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
 					<p class="right"><small>credit: Jeffrey Trehudic</small></p>
 				</div>
-				<h2 id="anchor_last">revue numéro 27</h2>
+				<h2 id="anchor_27">revue numéro 27</h2>
 				<div class="image horizontal">
 					<img src="./docs/litterall/revue_27.JPG" alt="revue litterall">
 					<div class="vertical">
@@ -62,7 +63,7 @@
 						<p>sommaire ...</p>
 					</div>
 				</div>
-				<h2 id="anchor_last">revue numéro 26</h2>
+				<h2 id="anchor_26">revue numéro 26</h2>
 				<div class="image horizontal">
 					<img src="./docs/litterall/revue_26.JPG" alt="revue litterall">
 					<div class="vertical">
@@ -72,7 +73,7 @@
 					</div>
 				</div>
 	
-				<h2 id="anchor_previous">anciens numeros</h2>
+				<h2 id="anchor_archives">anciens numeros</h2>
 				<div class="gallery">
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">

styles/aside_left.css

@@ -0,0 +1,21 @@
+
+/*---------------------------------------------*/
+/*ASIDE LEFT*/
+/* aside left is for page table of content */
+body aside.page_content {
+	top: calc(var(--nav-height) + 1px);
+	height: calc(100vh - var(--nav-height));
+	padding: calc(var(--gap-unit) / 2);
+}
+/* asides elements only have width if they have a child*/
+body aside.page_content .table_box {
+	min-width: var(--aside-left-width);
+	margin: var(--aside-margin) auto var(--aside-margin) var(--aside-margin);
+	padding: var(--gap-unit);
+	/*for style*/
+	border-left: 1px solid var(--color-lines-aside-l);
+}
+/*to put space between elements*/
+body aside.page_content .table_box > * {
+	margin-bottom: var(--gap-unit);
+}

styles/global.css

@@ -13,13 +13,16 @@
 	--hue-3: 				59;
 	--hue-4: 				189;
 
-	/*doc color*/
+	/*BODY*/
-	--hue-back:				var(--hue-4);
+	/* background*/
-	--color-back-base:		hsl(var(--hue-back), 0%, 100%);
+	--color-back-base:		hsl(0,   0%, 100%);
-	--color-back-dark:		hsl(var(--hue-back), 0%, 95%);
+	--color-back-dark:		hsl(0,   0%,  95%);
-	--color-lines:			hsl(var(--hue-back), 70%, 80%);
+	/* lines*/
-
+	--color-lines-main:		hsl(var(--hue-1),  50%,  80%);
-	/* colors buttons */
+	--color-lines-aside-l:	hsl(var(--hue-2),  50%,  80%);
+	--color-lines-aside-r:	hsl(var(--hue-3),  50%,  80%);
+	--color-lines-nav:		hsl(var(--hue-4),  50%,  80%);
+	/* buttons*/
 	--hue-btn:				12;
 	--color-btn:			hsl(var(--hue-btn), 1%, 1%);
 

styles/nav.css

@@ -2,7 +2,7 @@
 /*---------------------------------------------*/
 /*NAVBAR*/
 body nav {
-	border-bottom: 1px solid var(--color-lines);
+	border-bottom: 1px solid var(--color-lines-nav);
 }
 body nav * {
 	display: flex;

styles/skeleton.css

@@ -1,71 +1,20 @@
-/*DEBUG*/
-/* borders on mains elements of pages for debugging*/
-body * {
-	/*
-	border: 1px solid red;
-	*/
-}
-body > *, body > .container_main > * {
-	/*
-	border: 1px solid red;
-	*/
-}
 
 /*---------------------------------------------*/
-/*global settings*/
+/*SKELETON*/
-/*
+/*the position, size, and orientation of all elements without style or spaces*/
-	 ---------------------    --------------------- 
-	'         NAV         '  '         NAV         '
-	'---------------------'  '---------------------'
-	' ------------------- '  ' S '    PATHS    ' A '
-	''     CONTAINER     ''  ' U '    -----    ' S '
-	'' ---  -------  --- ''  ' M '    TITLE    ' I '
-	''' S '' PATHS '' A '''  ' M '    -----    ' D '
-	''' U '' ----- '' S '''  ' A '      M      ' E '
-	''' M '' TITLE '' I '''  ' R '      A      ' S '
-	''' M '' ----- '' D '''  ' Y '      I      '   '
-	''' A ''   M   '' E '''  '   '      N      '   '
-	''' R ''   A   '' S '''  '---------------------'
-	''' Y ''   I   ''   '''  '        FOOTER       '
-	'''   ''   N   ''   '''  '---------------------'
-	'''---''-------''---'''
-	''-------------------''
-	'        FOOTER       '
-	'---------------------'
-
-	navbar			->	nav
-	container		->	.container_main
-		summary		->	aside.page_content
-		main		->	main
-			paths	->	.page.path
-		asides		->	aside.relative_content
-	footer			->
-*/
-
-/*ALL*/
-/* by default all elements are verticals*/
 body, body * {
 	display: flex;
+	/*by default all elements are verticals*/
 	flex-direction: column;
 }
-body aside, body main {
-	padding: calc(var(--gap-unit) / 2);
-}
-
-/*HTML*/
 html {
 	scroll-behavior: smooth;
 	/*default font-size for rem*/
 	font-size: var(--base-font-size);
 }
-
-/*BODY*/
-/* the page is designed for a maximum screen*/
 body {
 	background-color: var(--color-back-base);
 }
-
-/*NAVBAR*/
 body nav {
 	flex-direction: row;
 	/*we have to set the height to use the height % for childs elements*/
@@ -73,49 +22,30 @@ body nav {
 	background-color: var(--color-back-base);
 	z-index: 10;
 }
-
-/*CONTAINER*/
 body .container_main {
-	margin: auto;
 	flex-direction: row;
+	/*the page is designed for a maximum screen*/
 	max-width: var(--max-screen);
-	margin: 0px;
 }
-
-/*ASIDE LEFT SUMMARY*/
-/* aside left is for page table of content */
 body aside.page_content {
 	top: calc(var(--nav-height) + 1px);
-	height: calc(100vh - var(--nav-height));
+	height: calc(100vh - var(--nav-height) - 1px);
-}
-/* asides elements only have width if they have a child*/
-body aside.page_content .table_box {
-	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;
-	padding: var(--gap-unit);
-	/*for style*/
-	border-left: 1px solid var(--color-lines);
-}
-/*to put space between elements*/
-body aside.page_content .table_box > * {
-	margin-bottom: var(--gap-unit);
 }
 
 /*MAIN*/
 body main {
+	padding: calc(var(--gap-unit) / 2);
 }
 body main > * {
 	margin: var(--gap-unit) 0px;
 }
 body main h1 {
 	padding: 70px 0px;
-	border-bottom: 1px solid var(--color-lines);
+	border-bottom: 1px solid var(--color-lines-main);
 }
 body main h2 {
 	padding: 10px 0px;
-	border-bottom: 1px solid var(--color-lines);
+	border-bottom: 1px solid var(--color-lines-main);
 }
 
 /*TITLE*/
@@ -131,6 +61,7 @@ body main .page_title .date {
 /*ASIDE RIGHT RELATIVES*/
 /* aside right is for links to relatives content*/
 body aside.relative_content {
+	padding: calc(var(--gap-unit) / 2);
 }
 /* asides elements only have width if they have a child*/
 body aside.relative_content *:first-child {
@@ -140,10 +71,10 @@ body aside.relative_content .relative_box {
 	margin: var(--aside-margin);
 	padding: var(--gap-unit);
 	width: fit-content;
-	border: 1px solid var(--color-lines);
+	border: 1px solid var(--color-lines-aside-r);
 }
 body aside.relative_content .box_name {
-	border-bottom: 1px solid var(--color-lines);
+	border-bottom: 1px solid var(--color-lines-aside-r);
 	padding-bottom: var(--gap-unit);
 }
 body aside.relative_content .relative_box > * {
@@ -153,7 +84,7 @@ body aside.relative_content .relative_box > * {
 /*FOOTER*/
 body footer.page_footer {
 	height: 100px;
-	border-top: 1px solid var(--color-lines);
+	border-top: 1px solid var(--color-lines-nav);
 }