beninca.link/cv.marc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme/wip

Browse source
This commit is contained in:
Marc Beninca 2025-02-16 20:03:30 +01:00
parent b3c85d93c1
commit a0167fa4e5
Signed by: marc.beninca
GPG key ID: 9C7613450C80C24F
3 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -11,6 +11,7 @@
<!----> <!---->
<link rel="stylesheet" href="style/reset.css"> <link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/light.css"> <link rel="stylesheet" href="style/light.css">
<script defer src="script/main.js"></script>
</head> </head>
<body> <body>
@ -28,6 +29,7 @@
<a href="https://www.openstreetmap.org/?query=Metropolitan%20France">France</a> <a href="https://www.openstreetmap.org/?query=Metropolitan%20France">France</a>
</p> </p>
</div> </div>
<button id="theme"></button>
</header> </header>
<section class="banner"> <section class="banner">
<img class="big" src="img/vcf.svg" alt="VCF QR code."> <img class="big" src="img/vcf.svg" alt="VCF QR code.">

13
script/main.js Normal file
View file

@ -0,0 +1,13 @@
const button = document.getElementById("theme");
const classes = document.documentElement.classList;
function refresh() {
button.innerHTML = classes.contains("dark")?"dark":"light";
}
button.addEventListener("click", () => {
classes.toggle("dark");
refresh();
});
refresh();

19
style/light.css
View file

@ -1,3 +1,16 @@
:root {
--banner-background: #ccf;
--body-background: #fff;
--body-text: #000;
--header-background: #ccc;
}
.dark {
--banner-background: #669;
--body-background: #000;
--body-text: #aaa;
--header-background: #444;
}
@font-face { @font-face {
font-display: swap; font-display: swap;
font-family: "fa"; font-family: "fa";
@ -10,6 +23,8 @@ html {
} }
body { body {
background-color: var(--body-background);
color: var(--body-text);
margin-block-start: 1em; margin-block-start: 1em;
margin-inline: auto; margin-inline: auto;
max-inline-size: 99ch; max-inline-size: 99ch;
@ -30,7 +45,7 @@ header {
padding-inline: .5em; padding-inline: .5em;
} }
header.org { header.org {
background-color: #ccc; background-color: var(--header-background);
} }
article header { article header {
@ -58,7 +73,7 @@ h1, h2, h3 {
border-radius: .25em; border-radius: .25em;
} }
h2 { h2 {
background-color: #ccf; background-color: var(--banner-background);
margin-block: .25em; margin-block: .25em;
padding-block: .5em; padding-block: .5em;
text-align: center; text-align: center;