From 0e59ae6d7d795d73081435b39cc359fb4a13d3bc Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Wed, 13 Jan 2021 21:35:51 +0100 Subject: 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. --- commun.css | 47 ++++++++++++++++++++++------------------------- template.html | 17 +++++++---------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/commun.css b/commun.css index f2bbc27..f05a297 100644 --- a/commun.css +++ b/commun.css @@ -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 @@ -

- -

Quatuor Camelot

- -

- + {MAIN} -- cgit v1.2.3