quatuorbellefeuille.com

commit e53fdada2ea99d2a125a37ad1c70b54decdda648
parent fea659a9729a453951776eb9214c36e1bf0890dc
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue, 24 Nov 2020 23:31:56 +0100

Tweak header

- Space things a bit.
- Add borders.
- Make sure borders stay "grid-like" when zooming, e.g. a 2-line
  cell's box should have the same height as a 1-line cell's box.

Diffstat:
M
commun.css
 | 
13
+++++++++----

1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/commun.css b/commun.css
@@ -18,7 +18,8 @@ header.banner .brand {
     grid-column: 1;
     display: flex;
     align-items: center;
-    justify-self: center;
+    padding-left: 2vw;
+    padding-right: 2vw;
 }
 
 header.banner .brand img {
@@ -26,7 +27,6 @@ header.banner .brand img {
 }
 header.banner .brand h1 {
     transition: color 1s;
-    text-align: center;
 }
 header.banner .brand:hover img {
     filter: brightness(100%) sepia(100%);
@@ -46,11 +46,12 @@ header.banner .brand:hover h1 {
 
 nav {
     grid-column: 2;
+    padding-right: 2vw;
 }
 
 nav ol {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     flex-wrap: wrap;
     padding-left: 0;
     text-align: center;
@@ -59,7 +60,11 @@ nav ol {
 
 nav ol li {
     flex: 1;
-    padding: 0.1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5em 0.1em;
+    border: solid black 0.1em;
 }
 
 .lang {