diff options
| -rw-r--r-- | commun.css | 15 | ||||
| -rw-r--r-- | template.html | 8 |
2 files changed, 14 insertions, 9 deletions
@@ -37,7 +37,7 @@ header.banner:hover h1 { @media (min-width: 40em) { .togglable > input.toggle, .togglable > img.button, - .togglable > .name { + .togglable > label { display: none; } @@ -223,15 +223,17 @@ header.banner:hover h1 { } .togglable > input.toggle { z-index: 2; - grid-column: 1 / -1; + grid-column: 1; position: absolute; - width: 100%; - height: 100%; + width: 2rem; + height: 2rem; margin: 0; opacity: 0; } .togglable > img.button.open { grid-column: 1; + position: absolute; + left: 0.2rem; width: 1.6rem; height: 1.6rem; object-fit: contain; @@ -249,8 +251,11 @@ header.banner:hover h1 { transition: transform 0.5s; z-index: 4; } - .togglable > .name { + .togglable > label { grid-column: 2; + height: 100%; + display: flex; + align-items: center; } .togglable > .content { display: block; diff --git a/template.html b/template.html index a544179..59b9996 100644 --- a/template.html +++ b/template.html @@ -18,10 +18,10 @@ </header> <header class="menu togglable"> - <input type="checkbox" class="toggle"> + <input type="checkbox" class="toggle" id="menu"> <img class="button open" src="menu.svg"> <img class="button close" src="close.svg"> - <div class="name">Menu</div> + <label for="menu">Menu</label> <div class="content"> <nav> <ol> @@ -47,10 +47,10 @@ {MAIN} <footer class="social togglable"> - <input type="checkbox" class="toggle"> + <input type="checkbox" class="toggle" id="social"> <img class="button open" src="share.svg"> <img class="button close" src="close.svg"> - <div class="name">Nous contacter</div> + <label for="social">Nous contacter</label> <div class="content"> <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> |