some modification to global css, but it's not good anymore

index.html

@@ -22,23 +22,6 @@
 
 		ids :
 
-		<section id="infos">
-		<section id="cv">
-		<figure  id="name">
-		<figure  id="title">
-		<figure  id="mouse_1">
-		<figure  id="mouse_2">
-		<figure  id="mouse_3">
-		<figure  id="mouse_4">
-		<figure  id="banner_1">
-		<figure  id="banner_2">
-		<figure  id="banner_3">
-		<figure  id="banner_4">
-		<figure  id="banner_5">
-		<figure  id="banner_6">
-		<figure  id="banner_7">
-		<figure  id="banner_8">
-
 		original : • 8226  U+2022
 		         :  57442 U+E062
 		         :  57443 U+E063
@@ -47,26 +30,7 @@
 		actual   :  57446 U+E066
 		         :  57447 U+E067
 
-		<section style="height: 200px;" class="left child-left-dense horizontal">
+		accessibility ascii : https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible
-
-		accessibility pre : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre#specifications
-
-			<figure>
-				<pre role="img" aria-label="ASCII COW">
-						___________________________
-				&lt; I'm an expert in my field. &gt;
-						---------------------------
-								\   ^__^
-								 \  (oo)\_______
-										(__)\       )\/\
-												||----w |
-												||     ||
-				</pre>
-				<figcaption id="cow-caption">
-					A cow saying, "I'm an expert in my field." The cow is illustrated using
-					preformatted text characters.
-				</figcaption>
-			</figure>
 
 	-->
 
@@ -75,7 +39,31 @@
 		<!--
 			CV
 		-->
-		<section id="cv" data-flex="vertical left">
+		<section id="works" data-flex="vertical stretch">
+			<figure id="works_ascii" data-flex="horizontal parent center wrap">
+<pre>
+     
+        
+        
+        
+      
+</pre>
+			</figure>
+			<h2 id="cv_download" data-flex="center"><a href="downloads/hugo_lamy_2023_cv.pdf" download>here are some works I have done</a></h2>
+		</section>
+		<!--
+			END CV
+		-->
+
+
+
+
+
+
+		<!--
+			CV
+		-->
+		<section id="cv" data-flex="vertical parent stretch">
 			<figure id="cv_ascii" data-flex="horizontal center wrap">
 <pre>
      
@@ -85,7 +73,7 @@
       
 </pre>
 			</figure>
-			<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" download>version pdf</a></h2>
+			<h2 id="cv_download" data-flex="center"><a href="downloads/hugo_lamy_2023_cv.pdf" download>version pdf</a></h2>
 			<details>
 				<summary>
 					<h2>Informatique</h2>

styles/elements/cv.css

@@ -2,19 +2,27 @@
 #cv {
 	/*
 	place-items: center;
-	*/
 	place-self: stretch;
+	*/
 }
 #cv #cv_ascii {
+	/*
 	place-self: center;
+	*/
 }
 #cv #cv_download {
+	/*
 	place-self: center;
+	*/
 }
 
 #cv details {
+	/*
+	*/
 	margin: 10px 0px 10px 20px;
 }
 #cv summary + * {
+	/*
+	*/
 	margin-top: 10px;
 }

styles/global.css

@@ -2,7 +2,8 @@
 /*
  DATA-FLEX
 
- direction       width        position    main axis   cross axis
+ direction       width        childrens   childrens   childrens
+                              position    main axis   cross axis
 
  [/]-horizontal  [/]-parent   [/]-center  [/]-pack    [/]-fit
  [/] vertical    [/] content  [/] left    [/]-wrap    [/] stretch
@@ -31,32 +32,32 @@
 /*
  width :		-parent- content
 */
-[data-flex~="parent"]  { width: auto; }
+[data-flex~="parent"]  { width: 100%; }
 [data-flex~="content"] { width: fit-content; }
 /*
  position :		-center- left right top bottom
 */
+[data-flex~="left"]   ,[data-flex~="vertical"][data-flex~="left"]   { align-items: flex-start; text-align: left; }
+[data-flex~="right"]  ,[data-flex~="vertical"][data-flex~="right"]  { align-items: flex-end; text-align: right; }
+[data-flex~="top"]    ,[data-flex~="vertical"][data-flex~="top"]    { justify-content: flex-start; }
+[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
+[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
 [data-flex~="horizontal"][data-flex~="left"]   { justify-content: flex-start; }
 [data-flex~="horizontal"][data-flex~="right"]  { justify-content: flex-end; }
 [data-flex~="horizontal"][data-flex~="top"]    { align-items: flex-start; }
 [data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
 [data-flex~="horizontal"][data-flex~="center"] { }
-[data-flex~="vertical"][data-flex~="left"]   { align-items: flex-start; }
-[data-flex~="vertical"][data-flex~="right"]  { align-items: flex-end; }
-[data-flex~="vertical"][data-flex~="top"]    { justify-content: flex-start; }
-[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
-[data-flex~="vertical"][data-flex~="center"] { align-items: center; }
 /*
  main axis :		-pack- space spread grow wrap gap
 */
+[data-flex~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
+[data-flex~="space"]    ,[data-flex~="vertical"][data-flex~="space"]    { justify-content: space-around; }
+[data-flex~="spread"]   ,[data-flex~="vertical"][data-flex~="spread"]   { justify-content: space-between; }
+[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
 [data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
 [data-flex~="horizontal"][data-flex~="space"]    { justify-content: space-around; }
 [data-flex~="horizontal"][data-flex~="spread"]   { justify-content: space-between; }
 [data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
-[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
-[data-flex~="vertical"][data-flex~="space"]    { justify-content: space-around; }
-[data-flex~="vertical"][data-flex~="spread"]   { justify-content: space-between; }
-[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
 [data-flex~="wrap"] { flex-wrap: wrap; }
 /*
  cross axis :		-fit- stretch

styles/style.css

@@ -31,6 +31,7 @@ section {
 #infos           { grid-area: infos;   }
 #title_area      { grid-area: title;   }
 #cv              { grid-area: cv;      }
+#works           { grid-area: works;   }
 #mouse_2         { grid-area: mouse_2; }
 #mouse_3         { grid-area: mouse_3; }
 #mouse_4         { grid-area: mouse_4; }
@@ -51,10 +52,11 @@ section {
     ' banner_1  banner_1  banner_1 ' auto
     ' .         title     .        ' auto
     ' banner_2  banner_2  banner_2 ' auto
-    ' .         cv        .        ' auto
+    ' .         works     .        ' auto
     ' banner_3  banner_3  banner_3 ' auto
     ' .         mouse_2   .        ' auto
     ' banner_4  banner_4  banner_4 ' auto
+    ' .         cv        .        ' auto
     ' banner_5  banner_5  banner_5 ' auto
     ' .         mouse_3   .        ' auto
     ' banner_6  banner_6  banner_6 ' auto

styles/text.css

@@ -25,7 +25,10 @@ ul {
 	display: block;
 	list-style-type: "•  ";
 	padding-left: 0px;
+	/*
 	list-style-position: outside;
+	*/
+	list-style-position: inside;
 }
 li {
 	display: list-item;
@@ -34,7 +37,10 @@ li::marker {
 	font-size: 1.2rem;
 }
 details summary {
+	/*
 	list-style-position: outside;
+	*/
+	list-style-position: inside;
 }
 details summary {
 	font-size: 1.8rem;

temp.txt

@@ -295,7 +295,6 @@
 
 
 
-
  •••  ••••  ••••• ••••  ••••• ••••• ••••• •   • ••••• ••••• •   • •     •   • 
 •   • •   • •     •   • •     •     •     •   •   •     •   •  •  •     •• •• 
 ••••• ••••  •     •   • ••••  ••••  •  •• •••••   •     •   •••   •     • • •