theme/wip
This commit is contained in:
parent
b3c85d93c1
commit
a0167fa4e5
3 changed files with 32 additions and 2 deletions
|
@ -11,6 +11,7 @@
|
|||
<!---->
|
||||
<link rel="stylesheet" href="style/reset.css">
|
||||
<link rel="stylesheet" href="style/light.css">
|
||||
<script defer src="script/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
@ -28,6 +29,7 @@
|
|||
<a href="https://www.openstreetmap.org/?query=Metropolitan%20France">France</a>
|
||||
</p>
|
||||
</div>
|
||||
<button id="theme"></button>
|
||||
</header>
|
||||
<section class="banner">
|
||||
<img class="big" src="img/vcf.svg" alt="VCF QR code.">
|
||||
|
|
13
script/main.js
Normal file
13
script/main.js
Normal 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();
|
|
@ -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-display: swap;
|
||||
font-family: "fa";
|
||||
|
@ -10,6 +23,8 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-background);
|
||||
color: var(--body-text);
|
||||
margin-block-start: 1em;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 99ch;
|
||||
|
@ -30,7 +45,7 @@ header {
|
|||
padding-inline: .5em;
|
||||
}
|
||||
header.org {
|
||||
background-color: #ccc;
|
||||
background-color: var(--header-background);
|
||||
}
|
||||
|
||||
article header {
|
||||
|
@ -58,7 +73,7 @@ h1, h2, h3 {
|
|||
border-radius: .25em;
|
||||
}
|
||||
h2 {
|
||||
background-color: #ccf;
|
||||
background-color: var(--banner-background);
|
||||
margin-block: .25em;
|
||||
padding-block: .5em;
|
||||
text-align: center;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue