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.

1 files changed, 22 insertions, 25 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;