diff options
| -rw-r--r-- | stylesheets/commun.css | 161 | ||||
| -rw-r--r-- | template.html | 82 |
2 files changed, 48 insertions, 195 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 3c8439e..174ab7d 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -1,10 +1,5 @@ body { --gold: #E4B63A; - --banner-logo-height: 11rem; - --banner-name-height: 2.4rem; - --menu-top-margin: calc((var(--banner-logo-height) - - 2 * var(--banner-name-height)) - / 2); margin: 0; background-color: white; @@ -86,7 +81,7 @@ footer.social a.lang:hover { border: 0.15rem solid var(--gold); } -footer.social > .content { +footer.social { display: flex; flex-direction: column; align-items: center; @@ -101,13 +96,13 @@ footer.legal { } @media (min-width: 40em) { - .togglable > input.toggle, - .togglable > img.button, - .togglable > label { - display: none; - } - body { + --banner-logo-height: 11rem; + --banner-name-height: 2.4rem; + --menu-top-margin: calc((var(--banner-logo-height) + - 2 * var(--banner-name-height)) + / 2); + min-height: 100vh; display: grid; grid-template-columns: 2fr 1fr 4fr 1fr auto; @@ -128,8 +123,6 @@ footer.legal { header.menu { grid-column: 3 / -2; - } - header.menu > .content { display: grid; grid-template-columns: 3fr 1fr; } @@ -231,127 +224,25 @@ footer.legal { @media (max-width: 40em) { body { display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: auto auto 1fr auto; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; min-height: 100vh; } header.banner { - grid-row: 1 / 3; - grid-column: 1; - } - header.menu { grid-row: 1; - grid-column: 2; } - footer.social { - grid-row: 2; - grid-column: 2; + header.menu, footer.social { + display: none; } footer.legal { - grid-row: 4; + grid-row: 3; } main { - grid-row: 3; - grid-column: 1 / -1; + grid-row: 2; margin: 0.8em; } - header.menu { - --open-button-size: 2.4rem; - } - header.menu > label { - font-size: 1.2rem; - } - footer.social { - --open-button-size: 1.8rem; - } - footer.social > label { - font-size: 0.8rem; - } - - /* Ideally, we'd use display: grid to have labels aligned. - * Unfortunately, afaict on mobile Safari brainfarts and fails to - * move the input to its fixed top-right position when it is - * checked; instead it moves it… somewhere… - * - * Use display: flex, absolute positions, and margins instead. - */ - .togglable { - display: flex; - position: relative; - align-items: center; - --open-button-max-size: 2.4rem; - --close-button-size: 2rem; - --togglable-origin: left; - --togglable-transform: translate(-100vw); - } - .togglable > input.toggle { - position: absolute; - margin: 0; - margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); - width: var(--open-button-size); - height: var(--open-button-size); - opacity: 0; - cursor: pointer; - } - .togglable > img.button.open { - margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); - padding: calc(0.1 * var(--open-button-size)); - width: calc(0.8 * var(--open-button-size)); - height: calc(0.8 * var(--open-button-size)); - object-fit: contain; - object-position: center; - } - .togglable > img.button.close { - display: block; - position: fixed; - top: calc(var(--close-button-size) / 2); - right: calc(var(--close-button-size) / 2); - width: var(--close-button-size); - height: var(--close-button-size); - margin: 0; - transform-origin: var(--togglable-origin); - transform: var(--togglable-transform); - transition: transform 0.5s; - z-index: 4; - } - .togglable > label { - position: absolute; - left: calc(1.2 * var(--open-button-max-size)); - cursor: pointer; - } - .togglable > .content { - display: block; - position: fixed; - overflow: auto; - width: 100vw; - height: 100vh; - top: 0; - left: 0; - margin: 0; - background: #dddd; - transform-origin: var(--togglable-origin); - transform: var(--togglable-transform); - transition: transform 0.5s; - z-index: 3; - } - .togglable > input.toggle:checked { - display: block; - position: fixed; - top: calc(var(--close-button-size) / 2); - right: calc(var(--close-button-size) / 2); - width: var(--close-button-size); - height: var(--close-button-size); - z-index: 5; - } - .togglable > input.toggle:checked ~ img.button.close { - transform: none; - } - .togglable > input.toggle:checked ~ .content { - transform: none; - } - header.banner img { width: 4rem; height: 4rem; @@ -359,30 +250,4 @@ footer.legal { header.banner h1 { font-size: 1.6rem; } - - header.menu .content { - display: grid; - --cell-size: calc(var(--close-button-size) * 2); - grid-template-columns: auto var(--cell-size); - grid-template-rows: var(--cell-size) var(--cell-size) auto; - } - header.menu .content nav { - grid-row: 1 / -1; - grid-column: 1; - padding: 2rem; - } - header.menu .content .lang { - grid-row: 2; - grid-column: 2; - margin: auto; - } - - .social > .content img { - width: 3em; - margin-top: 0.5em; - margin-bottom: 0.5em; - } - .contact { - padding: 1em; - } } diff --git a/template.html b/template.html index 0e2fe48..865a1e2 100644 --- a/template.html +++ b/template.html @@ -21,57 +21,45 @@ </a> </header> - <header class="menu togglable"> - <input type="checkbox" class="toggle" id="menu"> - <img class="button open" src="images/menu.svg"> - <img class="button close" src="images/close.svg"> - <label for="menu">Menu</label> - <div class="content"> - <nav> - <ol> - <li class="dropdown"><a href="quatuor.html">le quatuor</a> - <ul> - <li><a href="sophie.html">Sophie</a></li> - <li><a href="david.html">David</a></li> - <li><a href="hervé.html">Hervé</a></li> - <li><a href="enguerrand.html">Enguerrand</a></li> - </ul> - </li> - <li><a href="actualités.html">actualités</a></li> - <li><a href="programmes.html">programmes</a></li> - <li><a href="galerie.html">galerie</a></li> - </ol> - </nav> - </div> + <header class="menu"> + <nav> + <ol> + <li class="dropdown"><a href="quatuor.html">le quatuor</a> + <ul> + <li><a href="sophie.html">Sophie</a></li> + <li><a href="david.html">David</a></li> + <li><a href="hervé.html">Hervé</a></li> + <li><a href="enguerrand.html">Enguerrand</a></li> + </ul> + </li> + <li><a href="actualités.html">actualités</a></li> + <li><a href="programmes.html">programmes</a></li> + <li><a href="galerie.html">galerie</a></li> + </ol> + </nav> </header> {MAIN} - <footer class="social togglable"> - <input type="checkbox" class="toggle" id="social"> - <img class="button open" src="images/share.svg"> - <img class="button close" src="images/close.svg"> - <label for="social">Nous contacter</label> - <div class="content"> - <a class="lang" href=""> - EN - </a> - <a href="https://www.facebook.com/quatuorbellefeuille/" - target="_blank" rel="noreferrer noopener"> - <img src="images/facebook-logo.svg"> - </a> - <a href="https://www.instagram.com/quatuor.bellefeuille/" - target="_blank" rel="noreferrer noopener"> - <img src="images/instagram-logo.svg"> - </a> - <a href="" - target="_blank" rel="noreferrer noopener"> - <img src="images/youtube-logo.svg"> - </a> - <a class="contact" href="contact.html"> - contact - </a> - </div> + <footer class="social"> + <a class="lang" href=""> + EN + </a> + <a href="https://www.facebook.com/quatuorbellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/facebook-logo.svg"> + </a> + <a href="https://www.instagram.com/quatuor.bellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/instagram-logo.svg"> + </a> + <a href="" + target="_blank" rel="noreferrer noopener"> + <img src="images/youtube-logo.svg"> + </a> + <a class="contact" href="contact.html"> + contact + </a> </footer> <footer class="legal"> |