From 30f5a4681ead6eba5fdb5918bfc9b72a4673ec9d Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Sun, 2 Jun 2024 12:27:43 +0200
Subject: [PATCH] language is in each section

---
 index.html                   | 14 ++++++++++----
 styles/elements/language.css | 15 +++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 0fce4c5..f28f4c7 100644
--- a/index.html
+++ b/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,
@@ -55,6 +51,11 @@
 		-->
 		<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">
@@ -109,6 +110,11 @@
 		-->
 		<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">
diff --git a/styles/elements/language.css b/styles/elements/language.css
index b6d3c41..fe18680 100644
--- a/styles/elements/language.css
+++ b/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;
 }
-