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"> <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, I moved this outside the hero section,
@@ -55,6 +51,11 @@
--> -->
<section class="section hero" id="hero"> <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> <header>
<h1 aria-label="hugo lamy" id="name" class="title"> <h1 aria-label="hugo lamy" id="name" class="title">
<span aria-hidden="true" class="pre pre_small"> <span aria-hidden="true" class="pre pre_small">
@@ -109,6 +110,11 @@
--> -->
<section class="section" id="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> <header>
<h1 aria-label="cv" id="cv" class="title"> <h1 aria-label="cv" id="cv" class="title">
<span aria-hidden="true" class="pre"> <span aria-hidden="true" class="pre">

15
styles/elements/language.css
View File

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