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.

1 files changed, 9 insertions, 4 deletions

diff --git a/commun.css b/commun.css
index 0344191..51df249 100644
--- 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 {