reorganisation globale de la strucutue du html

styles/global.css

@@ -2,69 +2,99 @@
 /*GLOBAL VARIABLE*/
 :root {
 	--gap-unit: 10px;
+	--max-screen: 1500px;
+	--base-font-size: 10px;
 }
 
 
+/*DEBUG*/
+/*borders on mains elements of pages for debugging*/
+body > *, body > .horizontal > * {
+	border: 1px solid red;
+}
+
+/*---------------------------------------------*/
+/*global settings*/
+/*
+	 ---------------------    --------------------- 
+	'         NAV         '  '         NAV         '
+	'---------------------'  '---------------------'
+	'        TITLE        '  '        TITLE        '
+	'---------------------'  '---------------------'
+	'  PATH > TO > PAGES  '  '  PATH > TO > PAGES  '
+	'---------------------'  '---------------------'
+	' ------------------- '  ' S '      C      ' A '
+	''     CONTAINER     ''  ' U '      O      ' S '
+	'' ---  -------  --- ''  ' M '      N      ' I '
+	''' S ''   C   '' A '''  ' M '      T      ' D '
+	''' U ''   O   '' S '''  ' A '      E      ' E '
+	''' M ''   N   '' I '''  ' R '      N      ' S '
+	''' M ''   T   '' D '''  ' Y '      T      '   '
+	''' A ''   E   '' E '''  '---------------------'
+	''' R ''   N   '' S '''  '        FOOTER       '
+	''' Y ''   T   ''   '''  '---------------------'
+	'''---''-------''---'''
+	''------------------'''
+	'---------------------'
+	'        FOOTER       '
+	'---------------------'
+
+	navbar			->	nav
+	title			->	.page_title
+	path to pages	->	.page_path
+	container		->	.container_main
+		summary		->	aside.page_content
+		content		->	main
+		asides		->	aside.relative_content
+	footer			->
+*/
 html {
 	scroll-behavior: smooth;
 	/*default font-size for rem*/
-	font-size: 10px;
-}
-/*borders on mains elements of pages for debugging*/
-body main, body aside, body nav {
-	/*
-	border: 1px solid red;
-	*/
+	font-size: var(--base-font-size);
 }
+/*the page is design for a maximum screen*/
 body {
-	max-width: 1500px;
+	max-width: var(--max-screen);
+}
+/*by default all elements are verticals*/
+body, body * {
+	display: flex;
+	flex-direction: column;
+}
+body > *, body aside, body main {
+	padding: 0px var(--gap-unit);
 }
 body nav {
 }
 body main {
 }
+
+/*ASIDES*/
 body aside {
 }
 /*asides elements only have width if they have a child*/
 body aside *:first-child {
 	width: 200px;
 }
-body aside > * {
-	margin: var(--gap-unit);
-}
+/*aside left is for page table of content */
 body aside.page_content {
 }
+/*aside right is for links to relatives content*/
 body aside.relative_content {
 }
 
-
-/*elements are flex, vertical, and to the left, by default*/
-body {
-	display: flex;
-	flex-direction: column;
-}
-body * {
-	display: flex;
-	flex-direction: column;
-	margin: var(--gap-unit) 0px;
-}
-
 /*---------------------------------------------*/
 /*DESIGN KEYWORDS*/
+/*contains elements oriented vertically (default) or horizontally*/
 .vertical {
-	display: flex;
 	flex-direction: column;
 }
-.vertical > * {
-	margin: var(--gap-unit) 0px;
-}
+/*horizontal is only in web version, it becomes vertical in mobile design*/
 .horizontal {
-	display: flex;
 	flex-direction: row;
 }
-.horizontal > * {
-	margin: 0px var(--gap-unit);
-}
+/*self position of elements to the left, the right, or the center of their container*/
 .right {
 	margin-right: 0px;
 	margin-left: auto;

styles/images.css

@@ -54,7 +54,7 @@
 /*----------------------------------------------------*/
 /*IMAGE single*/
 .image {
-	margin: auto;
+	margin-right: auto;
 	margin-left: 0px;
 	width: 100%;
 }

styles/text.css

@@ -79,9 +79,6 @@ b, em {
 p br, h1 br, h2 br {
 	margin: 0px;
 }
-h1 {
-	margin-bottom: 20px;
-}
 /*
 	<b> - Bold text
 	<strong> - Important text