From f80c7608b207311c1ba286d0d6586a493dcf631f Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Sun, 19 Nov 2023 15:54:04 +0100
Subject: [PATCH] added details

---
 index.html                 | 110 ++++++++++++++++++++++++-------------
 styles/elements/cv.css     |  31 +++++++++++
 styles/elements/mouses.css |   2 +-
 styles/elements/test.css   |  24 ++++++++
 styles/elements/title.css  |   8 ++-
 styles/reset.css           |  26 +++++++++
 styles/style.css           |   7 ++-
 styles/text.css            |  10 +++-
 temp.txt                   |  14 +++++
 9 files changed, 187 insertions(+), 45 deletions(-)
 create mode 100644 styles/elements/test.css

diff --git a/index.html b/index.html
index a3a0f85..ef2c589 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/infos.css" type="text/css" rel="stylesheet">
+		<link href="./styles/elements/test.css" type="text/css" rel="stylesheet">
 	</head>
 
 	<!--
@@ -71,13 +72,27 @@
 
 
 
-
-
-
 		<!--
 			ROLE TITLE
 		-->
-		<figure id="role_title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
+		<section id="role_title">
+			<figure id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
+<pre>
+         
+                
+           
+               
+      
+</pre>
+<pre>
+               
+              
+             
+                 
+             
+</pre>
+			</figure>
+			<figure id="title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
 <pre>
                          
                                          
@@ -92,7 +107,8 @@
                                                   
                                  
 </pre>
-		</figure>
+			</figure>
+		</section>
 		<!--
 			END ROLE TITLE
 		-->
@@ -101,38 +117,58 @@
 		<!--
 			CV INFOS
 		-->
-		<section style="display:none;" id="cv_infos" data-flex="vertical left">
-			<h1>Informatique</h1>
-			<ul>
-				<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
-				<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
-				<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
-				<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
-				<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
-			</ul>
-			<h1>Bénévolat</h1>
-			<ul>
-				<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
-				<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
-				<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
-			</ul>
-			<h1>Outils informatiques</h1>
-			<ul>
-				<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
-				<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
-				<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
-			</ul>
-			<h1>Études d’architecture</h1>
-			<ul>
-				<li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
-				<li>Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)</li>
-			</ul>
-			<h1>Centres d'intérêts</h1>
-			<ul>
-				<li>Vélo : longs voyages à vélo, construction de vélos retro-directs</li>
-				<li>Magie : cartes, pièces, scène</li>
-				<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
-			</ul>
+		<section id="cv_infos" data-flex="vertical left">
+			<details>
+				<summary>
+					<h2>Informatique</h2>
+				</summary>
+				<ul>
+					<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
+					<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
+					<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
+					<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
+					<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Bénévolat</h2>
+				</summary>
+				<ul>
+					<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
+					<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
+					<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Outils informatiques</h2>
+				</summary>
+				<ul>
+					<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
+					<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
+					<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Études d’architecture</h2>
+				</summary>
+				<ul>
+					<li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
+					<li>Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)</li>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Centres d'intérêts</h2>
+				</summary>
+				<ul>
+					<li>Vélo : longs voyages à vélo, construction de vélos retro-directs</li>
+					<li>Magie : cartes, pièces, scène</li>
+					<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
+				</ul>
+			</details>
 		</section>
 		<!--
 			END CV INFOS
diff --git a/styles/elements/cv.css b/styles/elements/cv.css
index d80daca..ce63820 100644
--- a/styles/elements/cv.css
+++ b/styles/elements/cv.css
@@ -1,2 +1,33 @@
+
 #cv_infos {
+	margin: 10px 10px 30px 10px;
+}
+#cv_infos h1,
+#cv_infos h2,
+#cv_infos h3,
+#cv_infos h4,
+#cv_infos h5,
+#cv_infos h6 {
+	/*
+	place-self: center;
+	margin-left: var(--list-padding);
+	*/
+}
+#cv_infos details {
+	margin: 10px 0px;
+}
+#cv_infos summary {
+	/*
+	*/
+	margin-left: var(--list-padding);
+}
+#cv_infos summary + * {
+	margin-top: 10px;
+}
+
+details summary {
+	/*
+	list-style-type: none;
+	*/
+	list-style-position: outside;
 }
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
index 2a3665f..7bb8a68 100644
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -1,7 +1,7 @@
 
 .mouse {
 	position: relative;
-	margin: 20px 0px 0px 0px;
+	margin: 0px;
 }
 .frames_container {
 	display: grid;
diff --git a/styles/elements/test.css b/styles/elements/test.css
new file mode 100644
index 0000000..275e2d8
--- /dev/null
+++ b/styles/elements/test.css
@@ -0,0 +1,24 @@
+
+#test::after {
+	content: "              \a                 \a                \a              \a     \a         \a          \a          \a      \a         \a         \a    \a         \a        \a   \a       ";
+	white-space: pre-wrap;
+/*
+
+              
+                
+               
+             
+    
+        
+         
+         
+     
+        
+        
+   
+        
+       
+  
+      
+*/
+}
diff --git a/styles/elements/title.css b/styles/elements/title.css
index 87d096f..c764b01 100644
--- a/styles/elements/title.css
+++ b/styles/elements/title.css
@@ -1,2 +1,8 @@
-#role_title {	
+
+#role_title #name {	
+	margin:30px 0px 40px 0px;
 }
+#role_title #title {	
+	margin:30px 0px 40px 0px;
+}
+
diff --git a/styles/reset.css b/styles/reset.css
index 309ea35..4a46aa9 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -1,3 +1,29 @@
 body * {
 	margin: 0px;
 }
+input, button, textarea, select {
+	/* Remove built-in form typography styles */
+  font: inherit;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+}
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+li, p, h1, h2, h3, h4, h5, h6 {
+	/* Avoid text overflows
+  overflow-wrap: break-word;
+	*/
+  overflow-wrap: anywhere;
+}
+
+/* style details elements */
+details summary { 
+	cursor: pointer;
+}
+details summary > * {
+	/* allow to put h1 or anything inside the summary without breaking the line */
+	display: inline;
+}
diff --git a/styles/style.css b/styles/style.css
index 2adad2d..dbaa05e 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -5,6 +5,7 @@ html {
 	--small-space: 10px;
 	--medium-space: calc(var(--small-space) * 3);
 	--big-space: calc(var(--small-space) * 10);
+	--list-padding: 40px;
 }
 body {
 	overflow-x: hidden;
@@ -44,16 +45,16 @@ body {
 	display: grid;
 	grid:
     ' title    ' auto
+    ' banner_1 ' auto
+    ' mouse_1  ' auto
     ' banner_2 ' auto
     ' cv       ' auto
-    ' mouse_1  ' auto
     ' banner_3 ' auto
-    ' mouse_2  ' auto
     ' banner_4 ' auto
+    ' mouse_2  ' auto
     ' mouse_3  ' auto
     ' banner_5 ' auto
     ' mouse_4  ' auto
-    ' banner_1 ' auto
     ' infos    ' auto
 	  / 1fr      ;
 }
diff --git a/styles/text.css b/styles/text.css
index 2562fd8..29fea6c 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -19,6 +19,7 @@ ul {
 	*/
 	display: block;
 	list-style-type: "• ";
+	padding-left: var(--list-padding);
 }
 li {
 	display: list-item;
@@ -29,9 +30,12 @@ li::marker {
 a::after {
 	content: attr(href);
 }
-h1 {
-	margin: 30px 0px;
-}
+h1 { margin: 30px 0px; font-size: 2.25rem; }
+h2 { margin: 30px 0px; font-size: 2.0rem; }
+h3 { margin: 20px 0px; font-size: 1.75rem; }
+h4 { margin: 20px 0px; font-size: 1.5rem; }
+h5 { margin: 10px 0px; font-size: 1.25rem; }
+h6 { margin: 10px 0px; font-size: 1.0rem; }
 pre {
 	line-height: 0.8;
 	font-size: min(2.2vw, 1.0rem);
diff --git a/temp.txt b/temp.txt
index e617a8b..7d67ecc 100644
--- a/temp.txt
+++ b/temp.txt
@@ -309,3 +309,17 @@
 •   • ••••• •      •• • •   • •••••   •   •••••   •    • •  •   •   •   ••••• 
 
 
+
+                              
+                                                         
+                                         
+                                                          
+                                  
+
+                                   
+                                                      
+                                                
+                                                       
+                                           
+
+