added on all sections

index.html

@@ -36,10 +36,6 @@
 
 
 		<input type="checkbox" id="language">
-		<label id="language_label" for="language">
-			<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
-			<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
-		</label>
 
 		<!--
 			I moved this outside the hero section,
@@ -48,11 +44,18 @@
 		<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
 
+
+
 		<!--
 			HERO SECTION
 		-->
 		<section class="section hero" id="hero">
 
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
 			<header>
 				<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre pre_small">
@@ -94,19 +97,40 @@
 				</p>
 			</header>
 
-			<details class="cv margin_top_big">
-				<summary>
-					<h2 class="close">
-						<span class="fr">voir le CV</span>
-						<span class="en">see the CV</span>
-					</h2>
-					<h2 class="open">
-						<span class="fr">cacher le CV</span>
-						<span class="en">hide the CV</span>
-					</h2>
-				</summary>
-				<span class="fr"><a id="cv_download" class="margin_bottom_big" href="docs/hugo_lamy_cv_2024_fr.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">télécharger en pdf</a></span>
-				<span class="en"><a id="cv_download" class="margin_bottom_big" href="docs/hugo_lamy_cv_2024_en.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">download in pdf</a></span>
+			<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>
+
+
+
+
+		<!--
+			CV
+		-->
+		<section class="section" id="cv">
+
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
+			<header>
+				<h1 aria-label="cv" id="cv" class="title">
+<span aria-hidden="true" class="pre">
+     
+        
+        
+        
+      
+</span>
+					</h1>
+				</h1>
+			</header>
+
+			<article class="cv margin_top_big">
+				<span class="fr"><a class="cv_download margin_bottom_big" href="docs/hugo_lamy_cv_2024_fr.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">télécharger en pdf</a></span>
+				<span class="en"><a class="cv_download margin_bottom_big" href="docs/hugo_lamy_cv_2024_en.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">download as pdf</a></span>
 				<h2>
 					<span class="fr">COMPÉTENCES</span>
 					<span class="en">SKILLS</span>
@@ -201,7 +225,7 @@
 						<span class="en">Co-management of volunteers in a refugee camp, UTOPIA 56, Grande-Synthe, France, 2016</span>
 					</li>
 				</ul>
-			</details>
+			</article>
 
 			<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>
@@ -217,6 +241,12 @@
 			PROJECTS
 		-->
 		<section id="projects" class="section">
+
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
 			<div class="mouse"><div class="frames mouse_3 pre"></div></div>
 
 			<header>

styles/elements/cv.css

@@ -1,37 +1,15 @@
-.cv {
-	width: auto;
-	max-width: 900px;
-}
-
 .cv {
 	display: flex;
+	flex-direction: column;
+	width: auto;
+	max-width: 900px;
+	margin-bottom: 100px;
 	text-align: left;
 }
-.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;
+.cv .cv_download {
+	display: inline-block;
+	width: 100%;
+	margin-top: 30px;
+	text-align: center;
 }

styles/elements/hero.css

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

styles/elements/language.css

@@ -1,16 +1,16 @@
 input#language {
 	display: none;
 }
-label#language_label {
-	position: fixed;
+.language_label {
 	position: absolute;
+	grid-column: end;
 	top: 20px;
 	right: 20px;
 	padding: 10px;
 	cursor: pointer;
 	z-index: 1;
 }
-label#language_label .flag {
+.language_label .flag {
 	width: 20px;
 }
 
@@ -19,10 +19,10 @@ label#language_label .flag {
 /*
 * FR
 */
-input#language:not(:checked) + label #fr {
+input#language:not(:checked) ~ * .language_label #fr {
 	display: inline;
 }
-input#language:checked + label #fr {
+input#language:checked ~ * .language_label #fr {
 	display: none;
 }
 input#language:not(:checked) ~ * span.fr {
@@ -37,10 +37,10 @@ input#language:checked ~ * span.fr {
 /*
 * EN
 */
-input#language:not(:checked) + label #en {
+input#language:not(:checked) ~ * .language_label #en {
 	display: none;
 }
-input#language:checked + label #en {
+input#language:checked ~ * .language_label #en {
 	display: inline;
 }
 input#language:not(:checked) ~ * span.en {
@@ -49,4 +49,3 @@ input#language:not(:checked) ~ * span.en {
 input#language:checked ~ * span.en {
 	display: none;
 }
-

styles/sections.css

@@ -1,5 +1,6 @@
 section {
 	display: grid;
+	position: relative;
 	margin: 0px;
 	width: 100vw;
 	grid-template-columns: auto auto auto;