diff options
| -rw-r--r-- | static/css/layout.css | 21 | ||||
| -rw-r--r-- | static/index.html | 4 |
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"> |