aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorADRN <adrien@luxeylab.net>2024-08-30 11:24:51 +0200
committerADRN <adrien@luxeylab.net>2024-08-30 17:11:58 +0200
commit743162a4b5fee537ae6669885e2a5c72986d55f6 (patch)
tree9b10bf5cf1301bd8b9005b584afecfd251c7595a
parent3e6ae0e636a664e4c56f43a64c1f5b034f978417 (diff)
downloadsite-743162a4b5fee537ae6669885e2a5c72986d55f6.tar.gz
site-743162a4b5fee537ae6669885e2a5c72986d55f6.zip
premier essai
-rw-r--r--static/css/layout.css21
-rw-r--r--static/index.html4
2 files changed, 24 insertions, 1 deletions
diff --git a/static/css/layout.css b/static/css/layout.css
index ff73100..4be9820 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -118,6 +118,25 @@ div#container {
header {
grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12;
z-index: 1; /* Pour le mettre au dessus de l'illustration jardin et que l'on puisse sélectionner son contenu */
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+}
+
+/* -> boutons thème et pause */
+#toolbar {
+ margin-right: var(--big_margin);
+}
+#toolbar > a {
+ text-decoration: none;
+}
+
+#toolbar > a:hover, #toolbar > a:active {
+ text-decoration: underline;
+}
+
+#toolbar .hidden {
+ display: none;
}
/* PIED DE PAGE */
@@ -251,7 +270,7 @@ pre.center > a {
div#container, nav#menu, body {
background-color: var(--night-background);
}
- p, pre, ul, li, a, a:hover, h1, h2, footer {
+ p, pre, ul, li, a, a:hover, h1, h2, header, footer, nav {
color: var(--txt-night);
}
.highlight {
diff --git a/static/index.html b/static/index.html
index 178793a..8bb9899 100644
--- a/static/index.html
+++ b/static/index.html
@@ -102,6 +102,10 @@
<header>
<h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
+
+ <div id="toolbar" role="toolbar" aria-orientation="horizontal">
+ <a role="button" aria-label="Thème clair" href="#">[☀]</a><a class="hidden" role="button" aria-label="Thème sombre" href="#">[☼]</a><span role="separator"> · </span><a role="button" aria-label="Arrêter les animations" href="#">[⏸]</a><a class="hidden" aria-label="Activer les animations" href="#">[⏵]</a>
+ </div>
</header>
<main aria-label="contenu de la page web">