diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-01-13 21:35:51 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-01-17 22:16:28 +0100 |
| commit | 0e59ae6d7d795d73081435b39cc359fb4a13d3bc (patch) | |
| tree | 665295e7c0b9d1057c02d8bd44bce8e6440e86f3 | |
| parent | fd12ca3baa0cf7c419f41f216bdb0f015bcc9212 (diff) | |
| download | quatuorbellefeuille.com-0e59ae6d7d795d73081435b39cc359fb4a13d3bc.tar.xz | |
Rearrange header blocks
This will make it easier to move grid blocks around for the mobile
version.
Inpired from the old/mobile branch, which has diverged too much to
salvage.
| -rw-r--r-- | commun.css | 47 | ||||
| -rw-r--r-- | template.html | 17 |
2 files changed, 29 insertions, 35 deletions
@@ -1,55 +1,52 @@ body { min-height: 100vh; display: grid; - grid-template-columns: 7fr 1fr; + grid-template-columns: 2fr 1fr 3fr 1fr 1fr; grid-template-rows: auto 1fr auto; margin: 0; background-color: #acf; } header.banner { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 2fr 1fr 3fr 1fr 1fr; -} - -header.banner .brand { grid-column: 1; } -header.banner .brand a { +header.banner a { display: flex; align-items: center; text-decoration: none; } -header.banner .brand img { +header.banner img { + width: 10rem; + filter: brightness(0%); transition: filter 1s; } -header.banner .brand h1 { - transition: color 1s; -} -header.banner .brand:hover img { +header.banner:hover img { filter: brightness(100%) sepia(100%); } -header.banner .brand:hover h1 { - color: #d82; -} - -.brand h1 { +header.banner h1 { margin: 0; font-size: 1.5rem; + transition: color 1s; +} +header.banner:hover h1 { + color: #d82; } -.brand img { - width: 10rem; - filter: brightness(0%); +header.menu { + display: grid; + grid-column: 3 / -1; + grid-template-columns: 3fr 1fr 1fr; } -nav { - grid-column: 3; +header.menu nav { + grid-column: 1; margin-top: 2rem; } +header.menu .lang { + grid-column: 3; +} nav > ol { display: flex; @@ -125,13 +122,13 @@ nav li a { main { grid-row: 2; - grid-column: 1; + grid-column: 1 / -2; padding-left: 4%; } footer.social { grid-row: 2; - grid-column: 2; + grid-column: 5; display: flex; flex-direction: column; diff --git a/template.html b/template.html index 523aef2..b3e712c 100644 --- a/template.html +++ b/template.html @@ -9,15 +9,14 @@ </head> <body> <header class="banner"> + <a href="index.html"> + <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" + alt="logo"> + <h1>Quatuor Camelot</h1> + </a> + </header> - <div class="brand"> - <a href="index.html"> - <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" - alt="logo"> - <h1 class="qname">Quatuor Camelot</h1> - </a> - </div> - + <header class="menu"> <nav> <ol> <li class="dropdown"><a href="quatuor.html">Le quatuor</a> @@ -33,11 +32,9 @@ <li><a href="gallerie.html">Gallerie</a></li> </ol> </nav> - <div class="lang"> EN </div> - </header> {MAIN} |