Crack open vertical alignment of flex items… again

"align-" ⇒ "along the cross-axis"

can get rid of that superstitious "margin: auto" now.

- add quatuor name
- allow nav items to wrap
- make background color less garish

1 files changed, 9 insertions, 3 deletions

diff --git a/commun.css b/commun.css
index ac84289..6f83f21 100644
--- a/commun.css
+++ b/commun.css
@@ -1,11 +1,16 @@
 header {
     display: flex;
-    width: 100%;
+    align-items: center;
 }
 
-header img {
+header .brand {
+    display: flex;
+    align-items: center;
+    max-width: 40%;
+}
+
+.brand img {
     height: 3em;
-    margin: auto;
 }
 
 nav {
@@ -14,6 +19,7 @@ nav {
 
 nav ol {
     display: flex;
+    flex-wrap: wrap;
     padding-left: 0;
     text-align: center;
     list-style-type: none;