changed svg files to work with older browsers for the pre white-space, using old xml:space instead

docs/banners/banner_0.svg

@@ -16,14 +16,16 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_00.svg

@@ -16,15 +16,17 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_1.svg

@@ -16,16 +16,18 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_2.svg

@@ -16,19 +16,21 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
-  
-   
-   
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_3.svg

@@ -16,22 +16,24 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
-  
-   
-   
-  
-   
-   
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_4.svg

@@ -16,25 +16,27 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
-  
-   
-   
-  
-   
-   
-  
-   
-   
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

docs/banners/banner_5.svg

@@ -16,28 +16,30 @@
 				font-size: 1.5rem;
 				font-weight: normal;
 				font-style: normal;
-				white-space: pre;
+				/*
+				* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
+				* 
 				line-height: 0.8;
+				white-space: pre;
+				*/
 			}
 		</style>
 	</defs>
   <text x="0" y="0">
-   
-  
-   
-   
-  
-   
-   
-  
-   
-   
-  
-   
-   
-  
-   
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
+		<tspan x="0" dy="0.8em" xml:space="preserve">   </tspan>
 	</text>
-
-  <!-- Other SVG elements and attributes -->
 </svg>

index.html

@@ -115,7 +115,7 @@
 				</ul>
 			</details>
 
-			<div class="mouse"><div class="mouse_1 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_1 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -129,7 +129,7 @@
 			PROJECTS
 		-->
 		<section id="projects" class="section">
-			<div class="mouse"><div class="mouse_3 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_3 pre"></div></div>
 
 			<header>
 				<h1 aria-label="projets">
@@ -153,7 +153,7 @@
 			<div class="projects_grid">
 				<figure class="project">
 					<a href="https://bitbucket.org/hugogogo/int_04_fdf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
-						<img src="./docs/projects_square/fdf_pyramide_loop_square_2_light.gif"/>
+						<img src="./docs/projects/fdf_pyramide_loop_square_2_light.gif"/>
 					</a>
 					<figcaption>
 						<p>programme qui creer une representation 3D filaire d'une carte avec des points a differentes altitudes</p>
@@ -163,7 +163,7 @@
 
 				<figure class="project">
 					<a href="https://bitbucket.org/hugogogo/int_10_cube3d" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
-						<img src="./docs/projects_square/cube3d_tour_with_map_square.gif"/>
+						<img src="./docs/projects/cube3d_tour_with_map_square.gif"/>
 					</a>
 					<figcaption>
 						<p>mini jeu video utilisant le raycasting pour creer une impression de deplacement dans un environnement 3D</p>
@@ -173,7 +173,7 @@
 
 				<figure class="project">
 					<a href="https://bitbucket.org/hugogogo/2023_website_jipf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
-						<img src="./docs/projects_square/ljdp_map_clusters_square_light.gif"/>
+						<img src="./docs/projects/ljdp_map_clusters_square_light.gif"/>
 					</a>
 					<figcaption>
 						<p>plugin wordpress representant des evenements sur une carte avec des marqueurs et des filtres de tris</p>
@@ -183,7 +183,7 @@
 
 				<figure class="project">
 					<a href="https://bitbucket.org/hugogogo/2022_website_kosmopolit" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
-						<img src="./docs/projects_square/kosmopolit_square.gif"/>
+						<img src="./docs/projects/kosmopolit_square.gif"/>
 					</a>
 					<figcaption>
 						<p>site internet statique utilisant une structure uniquement en html et css</p>
@@ -212,7 +212,7 @@
 			</article>
 -->
 
-			<div class="mouse"><div class="mouse_2 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_2 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -233,7 +233,7 @@
 				<p>hugogogo@protonmail.com</p>
 			</article>
 
-			<div class="mouse"><div class="mouse_4 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_4 pre"></div></div>
 
 		</section>
 

styles/elements/cv.css

@@ -6,30 +6,32 @@
 .cv {
 	display: flex;
 	text-align: left;
-	summary {
+}
+.cv summary {
 	position: relative;
 	list-style-position: outside;
 	list-style-type: "▸ ";
 	font-size: 1.8rem;
 	margin: auto;
 	width: fit-content;
-		.open {
-			display: none;
-		}
-		.close {
-			display: inline;
-		}
-	}
-	&[open] summary {
-		list-style-type: "▾ ";
-		.open {
-			display: inline;
-		}
-		.close {
-			display: none;
-		}
-	}
-	> *:last-child {
-		margin-bottom: 100px;
-	}
+}
+.cv summary .open {
+	display: none;
+}
+.cv summary .close {
+	display: inline;
+}
+
+.cv[open] summary {
+	list-style-type: "▾ ";
+}
+.cv[open] summary .open {
+	display: inline;
+}
+.cv[open] summary .close {
+	display: none;
+}
+
+.cv > *:last-child {
+	margin-bottom: 100px;
 }

styles/elements/hero.css

@@ -9,13 +9,13 @@
 	grid-template-rows: 1fr auto 1fr;
 	*/
 	grid-template-rows: auto auto 1fr;
-	.subtitle {
+}
+#hero .subtitle {
 	text-align: center;
-	}
-	.cv {
-		#cv_download {
+}
+#hero .cv {
+}
+#hero .cv #cv_download {
 	margin-top: 20px;
 	text-align: center;
-		}
-	}
 }

styles/elements/infos.css

@@ -1,4 +1,3 @@
-
 #infos article {
 	display: flex;
 	flex-direction: column;

styles/elements/mouses.css

@@ -7,43 +7,30 @@
 	margin: auto;
 	width: fit-content;
 	overflow: hidden;
-
-	> div {
+}
+.mouse .frames {
 	position: relative;
-		top: 0%;
-
-		/*
-		* for pseudo elements ::before and ::after
-		* for some reason it does not work when applied to them directly
-		* if they are not position absolute
-		white-space: pre;
-		line-height: 0.8;
-		font-size: 1.0rem;
-		font-size: min(2.1vw, 1.0rem);
-		*/
-
-		--tframes: 2s;
-		animation-name: mouse_move;
-		animation-iteration-count: infinite;
-		animation-duration: var(--tframes);
-		animation-direction: normal;
-		animation-timing-function: steps(1);
-	}
-	> div::before {
+	animation: mouse_move infinite 2s normal steps(4);
+}
+.mouse .frames::before {
 	position: relative;
 	top: 0px;
 	left: 0px;
-	}
-
-	> div::after {
+}
+.mouse .frames::after {
 	position: absolute;
 	top: 100%;
 	left: 0px;
-	}
 }
+
+/*
+* using 'transform' instead of 'top', because 'top' needs
+* the parent to have an explicit height
+* but in this case its height is according to the children
+*
+*/
 @keyframes mouse_move {
-	0%    {top: 0%;}
-	25%   {top: -100%;}
-	50%   {top: -200%;}
-	75%   {top: -300%;}
+	0%     {transform: translateY(0%);}
+	100%   {transform: translateY(-400%);}
 }
+

styles/elements/projects.css

@@ -2,20 +2,21 @@
 	header {
 		height: 300px;
 	}
-	.projects_grid {
+}
+#projects .projects_grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, auto));
 	grid-template-columns: repeat(2, minmax(100px, auto));
 	grid-template-columns: repeat(2, minmax(100px, 500px));
 	grid-gap: 20px;
-		figure {
-			figcaption {
+}
+#projects .projects_grid figure {
+}
+#projects .projects_grid figure figcaption {
 	text-align: left;
 	margin-bottom: 100px;
-			}
-		}
-	}
-	.mouse {
-		margin-top: 100px;
-	}
+}
+
+#projects .mouse {
+	margin-top: 100px;
 }

styles/sections.css

@@ -9,31 +9,30 @@ section {
 	min-height: 100vh;
 	justify-items: center;
 	text-align: center;
-
-	header {
+}
+section header {
 	display: flex;
 	flex-direction: column;
 	place-content: center;
-
-		h1 {
+}
+section header h1 {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
-		}
-	}
-	article {
-		text-align: left;
-	}
-
-	> * {
-		grid-column: 2 / span 1;
-	}
-	> .grid_full_width {
-		grid-column: 1 / span 3;
-	}
-
-	.banner {
-		overflow-x: hidden;
-	}
+}
+
+section article {
+	text-align: left;
+}
+
+section > * {
+	grid-column: 2 / span 1;
+}
+section > .grid_full_width {
+	grid-column: 1 / span 3;
+}
+
+section .banner {
+	overflow-x: hidden;
 }

styles/text.css

@@ -55,3 +55,6 @@ h6 { margin: 10px 0px; font-size: 1.0rem; }
 	font-size: min(1.5vw, 0.7rem);
 }
 
+a {
+	word-break: break-all;
+}