Add instruments to individual bios

6 files changed, 45 insertions, 18 deletions

diff --git a/build-member.sh b/build-member.sh
index 3dea3fd..d4b04e7 100755
--- a/build-member.sh
+++ b/build-member.sh
@@ -27,14 +27,18 @@ EOF
 generate-main ()
 {
     read fullname
+    read instrument
     read h1
     read dt
     local -r name=$(firstname "${fullname}")
 
     cat <<EOF
 <main>
-  <h1 style="${h1}">${fullname}</h1>
-  <div id="bio" style="${dt}">
+  <div class="bio-title" style="${h1}">
+    <h1>${fullname}</h1>
+    <h2>${instrument}</h2>
+  </div>
+  <div class="bio" style="${dt}">
 EOF
 
     while read line
diff --git a/david.in b/david.in
index f7d61ef..0f31d12 100644
--- a/david.in
+++ b/david.in
@@ -1,4 +1,5 @@
 David Forest
+violon
 --member-h1: #e05a00
 --member-dt: #bf9000
 Ta maison Poudlard ? Poufsouffle, c'est le résultat du test officiel !
diff --git a/enguerrand.in b/enguerrand.in
index 8a6641b..1628994 100644
--- a/enguerrand.in
+++ b/enguerrand.in
@@ -1,4 +1,5 @@
 Enguerrand Bontoux
+violoncelle
 --member-h1: #6e9928
 --member-dt: #203864
 Ton arbre préféré ? l'Epicéa.
diff --git a/hervé.in b/hervé.in
index 2577b66..191cc4c 100644
--- a/hervé.in
+++ b/hervé.in
@@ -1,4 +1,5 @@
 Hervé Blandinières
+alto
 --member-h1: #4e8761
 --member-dt: #1368a1
 Ta feuille préférée ? Celle du figuier.
diff --git a/sophie.in b/sophie.in
index 94fb785..13534d5 100644
--- a/sophie.in
+++ b/sophie.in
@@ -1,4 +1,5 @@
 Sophie Guille des Buttes
+violon
 --member-h1: #f0b607
 --member-dt: #203864
 Ta feuille préférée ? Celle du Ginkgo Biloba.
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index 845605c..a498fd7 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -4,49 +4,67 @@ main {
     grid-template-rows: auto 1fr;
 }
 
-main > h1 {
+main > .bio-title {
     grid-column: 1;
     grid-row: 1;
     text-transform: uppercase;
     color: var(--member-h1);
 }
 
-#bio {
+main > .bio-title > * {
+    margin: 0;
+}
+
+.bio {
     grid-column: 1;
     grid-row: 2;
     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);
 }
 
-#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)
@@ -58,7 +76,7 @@ main > img {
         justify-items: center;
     }
 
-    main > h1 {
+    main > .bio-title {
         grid-column: 1;
         grid-row: 1;
         text-align: center;
@@ -67,11 +85,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;
     }
@@ -79,7 +95,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;
+    }
 }