commit 9d0c584ffbd251b12e387f31d19d2c2201fbe46f
parent cdff8a8483ec50ac4277079ed31b9b653b1d96de
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Tue, 3 Nov 2020 22:30:22 +0100
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
Diffstat:
3 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/artistes.css b/artistes.css
@@ -17,7 +17,7 @@ body {
#photos {
width: 30%;
flex-shrink: 0;
- background: #fd4;
+ background: #eee;
}
#bio {
diff --git a/artistes.html b/artistes.html
@@ -4,8 +4,13 @@
</head>
<body>
<header>
- <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
- alt="logo">
+
+ <div class="brand">
+ <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
+ alt="logo">
+ <h1 class="qname">Quatuor Camelot</h1>
+ </div>
+
<nav>
<ol>
<li>accueil</li>
diff --git 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;
