premier essai

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, nav {
+  p, pre, ul, li, a, a:hover, h1, h2, header, footer, nav {
     color: var(--txt-night);
   }
   .highlight {

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