diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-03 22:30:22 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-17 21:21:51 +0100 |
| commit | 9d0c584ffbd251b12e387f31d19d2c2201fbe46f (patch) | |
| tree | d9308effd92cace91a63f84dd119c9f6281609a7 | |
| parent | cdff8a8483ec50ac4277079ed31b9b653b1d96de (diff) | |
| download | quatuorbellefeuille.com-9d0c584ffbd251b12e387f31d19d2c2201fbe46f.tar.xz | |
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
| -rw-r--r-- | artistes.css | 2 | ||||
| -rw-r--r-- | artistes.html | 9 | ||||
| -rw-r--r-- | commun.css | 12 |
3 files changed, 17 insertions, 6 deletions
diff --git a/artistes.css b/artistes.css index 782ff99..043c0cb 100644 --- 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 index 91ae52a..ec1db8b 100644 --- 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> @@ -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; |