css reorganisees par sections

pages/litterall.html

@@ -28,9 +28,9 @@
 			<aside class="page_content sticky">
 				<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_litterall"><p>LITTE<i>rall</i></p></a>
-					<a href="./pages/litterall.html#anchor_27"><p>numero 27</p></a>
+					<a href="./pages/litterall.html#anchor_27"><p>revue numero 27</p></a>
-					<a href="./pages/litterall.html#anchor_26"><p>numero 26</p></a>
+					<a href="./pages/litterall.html#anchor_26"><p>revue numero 26</p></a>
 					<a href="./pages/litterall.html#anchor_archives"><p>archives</p></a>
 				</div>
 			</aside>

styles/aside_left.css

@@ -13,9 +13,13 @@ body aside.page_content .table_box {
 	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);
+	border-left: 1px solid var(--color-lines-3);
 }
 /*to put space between elements*/
 body aside.page_content .table_box > * {
 	margin-bottom: var(--gap-unit);
 }
+body aside.page_content .table_box h2 {
+	color: var(--color-text-1);
+}
+

styles/aside_right.css

@@ -0,0 +1,24 @@
+
+/*---------------------------------------------*/
+/*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 {
+	width: var(--aside-right-width);
+}
+body aside.relative_content .relative_box {
+	margin: var(--aside-margin);
+	padding: var(--gap-unit);
+	width: fit-content;
+	border: 1px solid var(--color-lines-2);
+}
+body aside.relative_content .box_name {
+	border-bottom: 1px solid var(--color-lines-2);
+	padding-bottom: var(--gap-unit);
+}
+body aside.relative_content .relative_box > * {
+	margin-bottom: var(--gap-unit);
+}

styles/footer.css

@@ -0,0 +1,6 @@
+
+/*---------------------------------------------*/
+/*FOOTER*/
+body footer.page_footer {
+	height: 100px;
+}

styles/global.css

@@ -1,6 +1,10 @@
 /*----------------------------------------------*/
 /*GLOBAL VARIABLE*/
 :root {
+	/*COLOR*/
+	/* background*/
+	--color-back-base:		hsl(0,   0%, 100%);
+	--color-back-dark:		hsl(0,   0%,  95%);
 	/* color range */
 	--color-purple:			hsl(324, 86%,  52%); /* #ee1998 - rgb(238, 25,  152) */
 	--color-pink:			hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
@@ -12,16 +16,25 @@
 	--hue-2: 				86;
 	--hue-3: 				59;
 	--hue-4: 				189;
-
+	/*text*/
-	/*BODY*/
+	--color-text:			hsl(0, 0%, 10%);
-	/* background*/
+	--color-text-light:		hsl(0, 0%, 25%);
-	--color-back-base:		hsl(0,   0%, 100%);
+	--color-text-strong:	hsl(0, 0%,  5%);
-	--color-back-dark:		hsl(0,   0%,  95%);
+	--color-text-1:		hsl(var(--hue-1), 80%, 50%);
+	--color-text-2:		hsl(var(--hue-2), 90%, 30%);
+	--color-text-3:		hsl(var(--hue-3), 90%, 30%);
+	--color-text-4:		hsl(var(--hue-4), 70%, 40%);
+	/*links*/
+	--hue-link: 			var(--hue-3);
+	--color-link:			hsl(var(--hue-link), 70%, 40%);
+	--color-link-hover:		hsl(var(--hue-link), 70%, 50%);
+	--color-link-active:	hsl(var(--hue-link), 70%, 50%);
+	--color-link-visited:	hsl(var(--hue-link), 60%, 30%);
 	/* lines*/
-	--color-lines-main:		hsl(var(--hue-1),  50%,  80%);
+	--color-lines-1:		hsl(var(--hue-1),  50%,  80%);
-	--color-lines-aside-l:	hsl(var(--hue-2),  50%,  80%);
+	--color-lines-2:		hsl(var(--hue-2),  50%,  80%);
-	--color-lines-aside-r:	hsl(var(--hue-3),  50%,  80%);
+	--color-lines-3:		hsl(var(--hue-3),  50%,  80%);
-	--color-lines-nav:		hsl(var(--hue-4),  50%,  80%);
+	--color-lines-4:		hsl(var(--hue-4),  50%,  80%);
 	/* buttons*/
 	--hue-btn:				12;
 	--color-btn:			hsl(var(--hue-btn), 1%, 1%);
@@ -33,19 +46,6 @@
 	--font-fallback:		'cabrion';
 
 	/* colors texts */
-	/*text*/
-	--color-text:			hsl(0, 0%, 10%);
-	--color-text-light:		hsl(0, 0%, 25%);
-	--color-text-strong:	hsl(0, 0%,  5%);
-	/*texts links*/
-	--hue-link: 			var(--hue-3);
-	--color-link:			hsl(var(--hue-link), 70%, 40%);
-	--color-link-hover:		hsl(var(--hue-link), 70%, 50%);
-	--color-link-active:	hsl(var(--hue-link), 70%, 50%);
-	--color-link-visited:	hsl(var(--hue-link), 60%, 30%);
-	/*titles*/
-	--color-title-1:		hsl(0, 0%, 10%);
-	--color-title-2:		hsl(0, 0%, 10%);
 
 	/*skeleton*/
 	--gap-unit:				10px;

styles/main.css

@@ -0,0 +1,18 @@
+
+/*---------------------------------------------*/
+/*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-1);
+}
+body main h2 {
+	padding: 10px 0px;
+	border-bottom: 1px solid var(--color-lines-1);
+}
+

styles/nav.css

@@ -2,7 +2,7 @@
 /*---------------------------------------------*/
 /*NAVBAR*/
 body nav {
-	border-bottom: 1px solid var(--color-lines-nav);
+	border-bottom: 1px solid var(--color-lines-4);
 }
 body nav * {
 	display: flex;
@@ -22,6 +22,7 @@ body nav .nav_left #nav_logo {
 	padding-right: 40px;
 }
 body nav .nav_left a p {
+	/*to center vertically the text*/
 	height: auto;
 }
 body nav .nav_left img {

styles/skeleton.css

@@ -30,61 +30,16 @@ body .container_main {
 body aside.page_content {
 	top: calc(var(--nav-height) + 1px);
 	height: calc(100vh - var(--nav-height) - 1px);
+	background-color: var(--color-back-base);
 }
-
-/*MAIN*/
 body main {
-	padding: calc(var(--gap-unit) / 2);
+	background-color: var(--color-back-base);
 }
-body main > * {
-	margin: var(--gap-unit) 0px;
-}
-body main h1 {
-	padding: 70px 0px;
-	border-bottom: 1px solid var(--color-lines-main);
-}
-body main h2 {
-	padding: 10px 0px;
-	border-bottom: 1px solid var(--color-lines-main);
-}
-
-/*TITLE*/
-body main .page_title {
-	position: relative;
-}
-body main .page_title .date {
-	position: absolute;
-	bottom: 0px;
-	left: 0px;
-}
-
-/*ASIDE RIGHT RELATIVES*/
-/* aside right is for links to relatives content*/
 body aside.relative_content {
-	padding: calc(var(--gap-unit) / 2);
+	background-color: var(--color-back-base);
 }
-/* asides elements only have width if they have a child*/
-body aside.relative_content *:first-child {
-	width: var(--aside-right-width);
-}
-body aside.relative_content .relative_box {
-	margin: var(--aside-margin);
-	padding: var(--gap-unit);
-	width: fit-content;
-	border: 1px solid var(--color-lines-aside-r);
-}
-body aside.relative_content .box_name {
-	border-bottom: 1px solid var(--color-lines-aside-r);
-	padding-bottom: var(--gap-unit);
-}
-body aside.relative_content .relative_box > * {
-	margin-bottom: var(--gap-unit);
-}
-
-/*FOOTER*/
 body footer.page_footer {
-	height: 100px;
+	background-color: var(--color-back-dark);
-	border-top: 1px solid var(--color-lines-nav);
 }