Merge branch 'bio-individuelle-instrument'

6 files changed, 66 insertions, 32 deletions

diff --git a/build-member.sh b/build-member.sh
index 3dea3fd..329be0e 100755
--- a/build-member.sh
+++ b/build-member.sh
@@ -27,14 +27,18 @@ EOF
 generate-main ()
 {
     read fullname
-    read h1
-    read dt
+    read instrument
+    read emph1
+    read emph2
     local -r name=$(firstname "${fullname}")
 
     cat <<EOF
-<main>
-  <h1 style="${h1}">${fullname}</h1>
-  <div id="bio" style="${dt}">
+<main style="--emph1-color: ${emph1}; --emph2-color: ${emph2}">
+  <div class="bio-title">
+    <h1 class="name">${fullname}</h1>
+    <h2 class="instrument">${instrument}</h2>
+  </div>
+  <div class="bio">
 EOF
 
     while read line
diff --git a/david.in b/david.in
index f7d61ef..19d6ed9 100644
--- a/david.in
+++ b/david.in
@@ -1,6 +1,7 @@
 David Forest
---member-h1: #e05a00
---member-dt: #bf9000
+violon
+#e05a00
+#bf9000
 Ta maison Poudlard ? Poufsouffle, c'est le résultat du test officiel !
 Une feuille préférée ? L'érable, de préférence avec des pancakes !
 Une période de l'histoire à revivre ? Les années 60, pour pouvoir assister aux concerts des Beatles ou de Jimi Hendrix.
diff --git a/enguerrand.in b/enguerrand.in
index 8a6641b..4b872cd 100644
--- a/enguerrand.in
+++ b/enguerrand.in
@@ -1,6 +1,7 @@
 Enguerrand Bontoux
---member-h1: #6e9928
---member-dt: #203864
+violoncelle
+#6e9928
+#203864
 Ton arbre préféré ? l'Epicéa.
 Ta maison Poudlard ? Serdaigle (seule maison vraiment respectable).
 Une œuvre bouleversante ? la 2e de Mahler, Résurrection, et son choeur final.
diff --git a/hervé.in b/hervé.in
index 2577b66..4e38861 100644
--- a/hervé.in
+++ b/hervé.in
@@ -1,6 +1,7 @@
 Hervé Blandinières
---member-h1: #4e8761
---member-dt: #1368a1
+alto
+#4e8761
+#1368a1
 Ta feuille préférée ? Celle du figuier.
 Une période de l'histoire à vivre ? Le néolithique (vaste sujet...).
 Ta maison à Poudlard ? Serdaigle, la raison l’emporte.
diff --git a/sophie.in b/sophie.in
index 94fb785..0054a3d 100644
--- a/sophie.in
+++ b/sophie.in
@@ -1,6 +1,7 @@
 Sophie Guille des Buttes
---member-h1: #f0b607
---member-dt: #203864
+violon
+#f0b607
+#203864
 Ta feuille préférée ? Celle du Ginkgo Biloba.
 Ta maison à Poudlard ? Poufsouffle ! “Si à Poufsouffle vous allez / Comme eux vous s'rez juste et loyal / Ceux de Poufsouffle aiment travailler / Et leur patience est proverbiale.”
 Un compositeur de prédilection ? Deux ! Beethoven et Ravel.
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index be585b7..d7eff56 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -4,50 +4,75 @@ main {
     grid-template-rows: auto 1fr;
 }
 
-main > h1 {
+main > .bio-title {
     grid-column: 1;
     grid-row: 1;
+}
+
+main > .bio-title > * {
+    margin: 0;
+}
+
+h1.name {
     text-transform: uppercase;
-    color: var(--member-h1);
+    color: var(--emph1-color);
 }
 
-#bio {
+h2.instrument {
+    font-weight: normal;
+    color: var(--emph2-color);
+}
+
+.bio {
     grid-column: 1;
     grid-row: 2;
-    justify-self: center;
     margin-right: 0.5em;
 }
 
-#bio dt, #bio dd {
+.bio dt, .bio dd {
     display: inline;
 }
 
-#bio dt {
+.bio dt {
     font-weight: bold;
-    color: var(--member-dt);
+    color: var(--emph2-color);
 }
 
-#bio dd {
+.bio dd {
     margin-left: 0;
 }
 
-#bio dl {
+.bio dl {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
 }
 
 main > img {
     display: block;
-    /* Align with title; h1 typically has font-size 2em and margin
-     * .67em. */
-    margin-top: 1.33em;
     grid-column: 2;
     grid-row: 1 / -1;
 
     width: 100%;
     background-size: cover;
-    position: sticky;
-    top: 2em;
+}
+
+@media (min-width: 80em)
+{
+    /* CSS 2 appendix D: the vertical margin for h1 should be .67em, with
+     * font-size 2em. */
+    main {
+        --main-top-margin: 1.33em;
+    }
+
+    main > .bio-title {
+        margin: var(--main-top-margin) 0;
+    }
+
+    main > img {
+        margin-top: var(--main-top-margin);
+        position: sticky;
+        top: 2em;
+    }
 }
 
 @media (max-width: 80em)
@@ -59,7 +84,7 @@ main > img {
         justify-items: center;
     }
 
-    main > h1 {
+    main > .bio-title {
         grid-column: 1;
         grid-row: 1;
         text-align: center;
@@ -68,11 +93,9 @@ main > img {
     main > img {
         grid-column: 2;
         grid-row: 1;
-        position: static;
-        margin-top: auto;
     }
 
-    main > #bio {
+    main > .bio {
         grid-column: 1 / -1;
         grid-row: 2;
     }
@@ -80,7 +103,10 @@ main > img {
 
 @media (max-width: 40em)
 {
-    main > h1 {
+    main > .bio-title > h1 {
         font-size: 1.2em;
     }
+    main > .bio-title > h2 {
+        font-size: 0.8em;
+    }
 }