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

added break word on all letters for links
css is now in old form
2024-05-27 15:42:56 +02:00 · 2024-05-27 14:23:09 +02:00 · 2024-05-27 14:18:48 +02:00 · 2024-05-27 14:10:19 +02:00 · 2024-05-27 14:08:29 +02:00 · 2024-05-27 14:04:20 +02:00
26 changed files with 198 additions and 237 deletions
--- a/docs/banners/banner_0.svg
+++ b/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>
--- a/docs/banners/banner_00.svg
+++ b/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>
--- a/docs/banners/banner_1.svg
+++ b/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>
--- a/docs/banners/banner_2.svg
+++ b/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>
--- a/docs/banners/banner_3.svg
+++ b/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>
--- a/docs/banners/banner_4.svg
+++ b/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>
--- a/docs/banners/banner_5.svg
+++ b/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>
--- a/docs/mouses/mouse_1/mouse_1_1.svg
+++ b/docs/mouses/mouse_1/mouse_1_1.svg
--- a/docs/projects/cube3d_image.gif
+++ b/docs/projects/cube3d_image.gif
--- a/docs/projects/cube3d_raycasting.gif
+++ b/docs/projects/cube3d_raycasting.gif
--- a/docs/projects_square/cube3d_tour_with_map_square.gif
+++ b/docs/projects_square/cube3d_tour_with_map_square.gif
--- a/docs/projects/fdf_demo.gif
+++ b/docs/projects/fdf_demo.gif
--- a/docs/projects/fdf_pyramide_2.gif
+++ b/docs/projects/fdf_pyramide_2.gif
--- a/docs/projects_square/fdf_pyramide_loop_square_2_light.gif
+++ b/docs/projects_square/fdf_pyramide_loop_square_2_light.gif
--- a/docs/projects_square/kosmopolit_square.gif
+++ b/docs/projects_square/kosmopolit_square.gif
--- a/docs/projects/ljdp_map_clusters.gif
+++ b/docs/projects/ljdp_map_clusters.gif
--- a/docs/projects_square/ljdp_map_clusters_square_light.gif
+++ b/docs/projects_square/ljdp_map_clusters_square_light.gif
--- a/docs/projects/ljdp_map_filters.gif
+++ b/docs/projects/ljdp_map_filters.gif
--- a/index.html
+++ b/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>

--- a/styles/elements/cv.css
+++ b/styles/elements/cv.css
@@ -6,30 +6,32 @@
 .cv {
 	display: flex;
 	text-align: left;
-	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 {
+	position: relative;
+	list-style-position: outside;
+	list-style-type: "▸ ";
+	font-size: 1.8rem;
+	margin: auto;
+	width: fit-content;
+}
+.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;
 }
--- a/styles/elements/hero.css
+++ b/styles/elements/hero.css
@@ -9,13 +9,13 @@
 	grid-template-rows: 1fr auto 1fr;
 	*/
 	grid-template-rows: auto auto 1fr;
-	.subtitle {
-		text-align: center;
-	}
-	.cv {
-		#cv_download {
-			margin-top: 20px;
-			text-align: center;
-		}
-	}
+}
+#hero .subtitle {
+	text-align: center;
+}
+#hero .cv {
+}
+#hero .cv #cv_download {
+	margin-top: 20px;
+	text-align: center;
 }
--- a/styles/elements/infos.css
+++ b/styles/elements/infos.css
@@ -1,4 +1,3 @@
-
 #infos article {
 	display: flex;
 	flex-direction: column;
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -7,43 +7,30 @@
 	margin: auto;
 	width: fit-content;
 	overflow: hidden;
-
-	> div {
-		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 {
-		position: relative;
-		top: 0px;
-		left: 0px;
-	}
-
-	> div::after {
-		position: absolute;
-		top: 100%;
-		left: 0px;
-	}
 }
+.mouse .frames {
+	position: relative;
+	animation: mouse_move infinite 2s normal steps(4);
+}
+.mouse .frames::before {
+	position: relative;
+	top: 0px;
+	left: 0px;
+}
+.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%);}
 }
+
--- a/styles/elements/projects.css
+++ b/styles/elements/projects.css
@@ -2,20 +2,21 @@
 	header {
 		height: 300px;
 	}
-	.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 {
-				text-align: left;
-				margin-bottom: 100px;
-			}
-		}
-	}
-	.mouse {
-		margin-top: 100px;
-	}
+}
+#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;
+}
+#projects .projects_grid figure {
+}
+#projects .projects_grid figure figcaption {
+	text-align: left;
+	margin-bottom: 100px;
+}
+
+#projects .mouse {
+	margin-top: 100px;
 }
--- a/styles/sections.css
+++ b/styles/sections.css
@@ -9,31 +9,30 @@ section {
 	min-height: 100vh;
 	justify-items: center;
 	text-align: center;
-
-	header {
-		display: flex;
-		flex-direction: column;
-		place-content: center;
-
-		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 header {
+	display: flex;
+	flex-direction: column;
+	place-content: center;
+}
+section header h1 {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+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;
 }
--- a/styles/text.css
+++ b/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;
+}
Author	SHA1	Message	Date
asus	e21e5b8938	changed svg files to work with older browsers for the pre white-space, using old xml:space instead	2024-05-27 15:42:56 +02:00
asus	680c5808a3	added break word on all letters for links	2024-05-27 14:23:09 +02:00
asus	8ac471331f	css is now in old form	2024-05-27 14:18:48 +02:00
asus	04883ef891	renamed projects_square into projects	2024-05-27 14:10:19 +02:00
asus	8a69f25113	deleted old projects folder	2024-05-27 14:08:29 +02:00
asus	d60b3580c0	deleted unused svg mouse	2024-05-27 14:04:20 +02:00
asus	744c2aedcb	mouses are now using transform instead of top to work on chrome	2024-05-27 14:00:55 +02:00