diff options
| -rw-r--r-- | stylesheets/commun.css | 93 | ||||
| -rw-r--r-- | template.html | 45 |
2 files changed, 117 insertions, 21 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 76a1db7..01f6911 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -26,10 +26,14 @@ header.banner a { align-items: center; } header.banner img { + height: var(--banner-logo-height); margin: 0.6rem; } header.banner h1 { margin: 0; + max-width: 6em; /* Force linebreak. */ + font-size: var(--banner-name-height); + font-weight: normal; font-family: 'Cormorant', serif; } @@ -109,17 +113,13 @@ footer.legal { grid-template-rows: auto 1fr auto; } + header.slidingmenu { + display: none; + } + header.banner { grid-column: 1; } - header.banner img { - height: var(--banner-logo-height); - } - header.banner h1 { - font-size: var(--banner-name-height); - font-weight: normal; - max-width: 6em; /* Force linebreak. */ - } header.menu { grid-column: 3 / -2; @@ -223,31 +223,82 @@ footer.legal { @media (max-width: 40em) { body { + --banner-logo-height: 6rem; + --banner-name-height: 1.8rem; + display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr auto; + grid-template-columns: 3rem 1fr; + grid-template-rows: 3rem auto 1fr auto; min-height: 100vh; } - header.banner { - grid-row: 1; - } header.menu, footer.social { display: none; } - footer.legal { - grid-row: 3; + + header.slidingmenu { + grid-column: 1; + grid-row: 1; + } + header.banner { + grid-column: 2; + grid-row: 1 / 3; + justify-self: start; } main { - grid-row: 2; + grid-row: 3; + grid-column: 1 / -1; margin: 0.8em; } + footer.legal { + grid-column: 1 / -1; + grid-row: -1; + } - header.banner img { - width: 4rem; - height: 4rem; + header.slidingmenu { + position: relative; + } + header.slidingmenu > input { + position: relative; + width: 100%; + height: 100%; + margin: 0; + z-index: 3; + opacity: 0; + } + header.slidingmenu > img.button { + position: absolute; + top: 0; + left: 0; + padding: 0.3rem; + width: 2.4rem; + height: 2.4rem; + } + header.slidingmenu > img.button.close { + transform-origin: left; + transform: translate(-100vw); + transition: transform 0.5s; + z-index: 2; + } + header.slidingmenu > .content { + position: fixed; + overflow: auto; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + margin: 0; + background: #dddd; + transform-origin: left; + transform: translate(-100vw); + transition: transform 0.5s; + z-index: 1; + } + header.slidingmenu > input:checked ~ .content, + header.slidingmenu > input:checked ~ img.button.close { + transform: none; } - header.banner h1 { - font-size: 1.6rem; + header.slidingmenu > input:checked ~ img.button.open { + opacity: 0; } } diff --git a/template.html b/template.html index 865a1e2..10dd002 100644 --- a/template.html +++ b/template.html @@ -13,6 +13,51 @@ <link rel="alternate" type="application/rss+xml" href="feed.xml"> </head> <body> + <header class="slidingmenu"> + <input type="checkbox"> + <img class="button open" src="images/menu.svg"> + <img class="button close" src="images/close.svg"> + <div class="content"> + <a class="lang" href=""> + EN + </a> + <nav class="menu"> + <ol> + <li><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> + <nav class="social"> + <ul> + <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> + </ul> + </nav> + <a class="contact" href="contact.html"> + contact + </a> + </div> + </header> + <header class="banner"> <a href="index.html"> <img src="images/logo.svg" |