diff options
| author | ADRN <adrien@luxeylab.net> | 2024-08-30 11:24:51 +0200 |
|---|---|---|
| committer | ADRN <adrien@luxeylab.net> | 2024-08-30 17:14:39 +0200 |
| commit | 4ce9fe785cf7e1e6d82a0cc28747493b2ef228ca (patch) | |
| tree | 5eaaf840c1fedffe4de9554a34f77a25de6264ac | |
| parent | 52bebd6c75b05d6cbd17868fb64897a2905d3cf2 (diff) | |
| download | site-4ce9fe785cf7e1e6d82a0cc28747493b2ef228ca.tar.gz site-4ce9fe785cf7e1e6d82a0cc28747493b2ef228ca.zip | |
premier essai
| -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 9a4d6a5..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, nav { + 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 965476a..e45957e 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"> |