perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

language is in each section

Browse Source
This commit is contained in:
asus
2024-06-02 12:27:43 +02:00
parent 32ea6d6cf4
commit 30f5a4681e
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -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">

15
styles/elements/language.css
View File

@@ -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;
}