diff options
| -rw-r--r-- | commun.css | 289 | ||||
| -rw-r--r-- | template.html | 64 |
2 files changed, 185 insertions, 168 deletions
@@ -1,22 +1,24 @@ body { - min-height: 100vh; - display: grid; - grid-template-columns: 2fr 1fr 3fr 1fr 1fr; - grid-template-rows: auto 1fr auto; margin: 0; background-color: #acf; } -header.banner { - grid-column: 1; +.current { + background-color: white; +} + +header a, .contact a { + text-decoration: none; +} + +header a, footer a { + color: inherit; } header.banner a { display: flex; align-items: center; - text-decoration: none; } - header.banner img { width: 10rem; filter: brightness(0%); @@ -34,138 +36,143 @@ header.banner:hover h1 { color: #d82; } -header.menu { - display: grid; - grid-column: 3 / -1; - grid-template-columns: 3fr 1fr 1fr; -} - -header.menu nav { - grid-column: 1; - margin-top: 2rem; -} -header.menu .lang { - grid-column: 3; -} - -nav > ol { - display: flex; - align-items: center; - align-content: stretch; - flex-wrap: wrap; - padding-left: 0; - text-align: center; - list-style-type: none; -} - -nav > ol > li { - flex: 1; -} - -nav > ol > li > a { - display: block; - padding: 0.5em 0.1em; -} - -nav li.dropdown { - position: relative; -} -nav li.dropdown ul { - position: absolute; - padding-left: 0; - width: 100%; - text-align: left; - background: lightgrey; - z-index: 1; - - overflow: hidden; - max-height: 0; - transition: max-height 0.5s; -} -nav li.dropdown:hover ul { - /* ⚠ Magic constant: must be big enough to show the whole dropdown, +@media (min-width: 40em) { + .togglable > input.toggle, .togglable > img.button { + display: none; + } + + body { + min-height: 100vh; + display: grid; + grid-template-columns: 2fr 1fr 3fr 1fr 1fr; + grid-template-rows: auto 1fr auto; + } + + header.banner { + grid-column: 1; + } + + header.menu { + grid-column: 3 / -1; + } + header.menu > div { + display: grid; + grid-template-columns: 3fr 1fr 1fr; + } + + header.menu nav { + grid-column: 1; + margin-top: 2rem; + } + header.menu .lang { + grid-column: 3; + } + + nav > ol { + display: flex; + align-items: center; + align-content: stretch; + flex-wrap: wrap; + padding-left: 0; + text-align: center; + list-style-type: none; + } + + nav > ol > li { + flex: 1; + } + + nav > ol > li > a { + display: block; + padding: 0.5em 0.1em; + } + + nav li.dropdown { + position: relative; + } + nav li.dropdown ul { + position: absolute; + padding-left: 0; + width: 100%; + text-align: left; + background: lightgrey; + z-index: 1; + + overflow: hidden; + max-height: 0; + transition: max-height 0.5s; + } + nav li.dropdown:hover ul { + /* ⚠ Magic constant: must be big enough to show the whole dropdown, but not too big otherwise the transition will be "delayed". */ - max-height: 5em; -} -nav li.dropdown > ul > li { - list-style-type: none; -} -nav li.dropdown > ul > li:hover { - background: white; -} -nav li.dropdown > ul > li a { - display: block; /* Make link span whole containing block. */ - padding-inline-start: 10%; -} -nav li.dropdown > ul > li a img { - width: 1em; - height: 1em; -} - -.current { - background-color: white; -} - -nav li a { - text-decoration: none; -} - -.lang { - grid-column: 5; - background-color: black; - border-radius: 50% 50% 50% 0; - color: white; - padding: 0.5em; - margin: auto; - margin-top: 3rem; -} - -main { - grid-row: 2; - grid-column: 1 / -2; - padding-left: 4%; -} - -footer.social { - grid-row: 2; - grid-column: 5; - - display: flex; - flex-direction: column; - align-items: center; - position: sticky; - top: 0; -} - -.social img { - width: 2em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.contact { - /* Ideally should be just: */ - /* writing-mode: sideways-lr; */ - /* but of course We Can't Have Nice Things. */ - writing-mode: vertical-rl; - transform: rotate(180deg); - - margin: 0; - padding: 1em 0.5em; -} - -.contact a { - text-decoration: none; -} - -footer.legal { - grid-column: 1 / -1; - width: 100%; - text-align: center; - margin: auto; - font-size: 75%; -} - -header a, footer a { - color: inherit; + max-height: 5em; + } + nav li.dropdown > ul > li { + list-style-type: none; + } + nav li.dropdown > ul > li:hover { + background: white; + } + nav li.dropdown > ul > li a { + display: block; /* Make link span whole containing block. */ + padding-inline-start: 10%; + } + nav li.dropdown > ul > li a img { + width: 1em; + height: 1em; + } + + .lang { + grid-column: 5; + background-color: black; + border-radius: 50% 50% 50% 0; + color: white; + padding: 0.5em; + margin: auto; + margin-top: 3rem; + } + + main { + grid-row: 2; + grid-column: 1 / -2; + padding-left: 4%; + } + + footer.social { + grid-row: 2; + grid-column: 5; + position: sticky; + top: 0; + } + + footer.social > div { + display: flex; + flex-direction: column; + align-items: center; + } + + .social img { + width: 2em; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .contact { + /* Ideally should be just: */ + /* writing-mode: sideways-lr; */ + /* but of course We Can't Have Nice Things. */ + writing-mode: vertical-rl; + transform: rotate(180deg); + + margin: 0; + padding: 1em 0.5em; + } + + footer.legal { + grid-column: 1 / -1; + width: 100%; + text-align: center; + margin: auto; + font-size: 75%; + } } diff --git a/template.html b/template.html index b3e712c..18dffff 100644 --- a/template.html +++ b/template.html @@ -16,38 +16,48 @@ </a> </header> - <header class="menu"> - <nav> - <ol> - <li class="dropdown"><a href="quatuor.html">Le quatuor</a> - <ul> - <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li> - <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li> - <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li> - <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</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="gallerie.html">Gallerie</a></li> - </ol> - </nav> - <div class="lang"> - EN + <header class="menu togglable"> + <input type="checkbox" class="toggle"> + <img class="button open" src="menu.svg"> + <img class="button close" src="close.svg"> + <div> + <nav> + <ol> + <li class="dropdown"><a href="quatuor.html">Le quatuor</a> + <ul> + <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li> + <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li> + <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li> + <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</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="gallerie.html">Gallerie</a></li> + </ol> + </nav> + <div class="lang"> + EN + </div> </div> </header> {MAIN} - <footer class="social"> - <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"> - <a href="feed.xml"> - <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg"> - </a> - <p class="contact"> - <a href="contact.html">Contact</a> - </p> + <footer class="social togglable"> + <input type="checkbox" class="toggle"> + <img class="button open" src="share.svg"> + <img class="button close" src="close.svg"> + <div> + <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"> + <a href="feed.xml"> + <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg"> + </a> + <p class="contact"> + <a href="contact.html">Contact</a> + </p> + </div> </footer> <footer class="legal"> |