Add full names and instruments to ensemble page

4 files changed, 45 insertions, 12 deletions

diff --git a/quatuor.html b/quatuor.html
index 3ec5095..423236f 100644
--- a/quatuor.html
+++ b/quatuor.html
@@ -1,9 +1,25 @@
 <main>
   <div id="photos">
-    <a href="sophie.html"><img class="portrait" src="images/sophie/full.png"></a>
-    <a href="david.html"><img class="portrait" src="images/david/full.png"></a>
-    <a href="hervé.html"><img class="portrait" src="images/hervé/full.png"></a>
-    <a href="enguerrand.html"><img class="portrait" src="images/enguerrand/full.png"></a>
+    <a class="member" href="sophie.html">
+      <img class="portrait" src="images/sophie/full.png">
+      <p class="name">Sophie Guille des Buttes</p>
+      <p class="instrument">violon</p>
+    </a>
+    <a class="member" href="david.html">
+      <img class="portrait" src="images/david/full.png">
+      <p class="name">David Forest</p>
+      <p class="instrument">violon</p>
+    </a>
+    <a class="member" href="hervé.html">
+      <img class="portrait" src="images/hervé/full.png">
+      <p class="name">Hervé Blandinières</p>
+      <p class="instrument">alto</p>
+    </a>
+    <a class="member" href="enguerrand.html">
+      <img class="portrait" src="images/enguerrand/full.png">
+      <p class="name">Enguerrand Bontoux</p>
+      <p class="instrument">violoncelle</p>
+    </a>
   </div>
   <div id="bio">
 {BIO}
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 524b3a8..c0cbd63 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -20,7 +20,6 @@ a.current {
 
 header a {
     text-decoration: none;
-    font-weight: bold;
 }
 nav a:hover {
     color: var(--gold);
@@ -51,6 +50,7 @@ header.banner:hover {
 
 nav a {
     font-size: 1.2rem;
+    font-weight: 600;
 }
 
 nav > ol, nav li.dropdown > ul {
@@ -65,7 +65,7 @@ nav > ol > li > a {
 footer.social a {
     text-decoration: none;
     font-size: 1.2rem;
-    font-weight: bold;
+    font-weight: 600;
 }
 footer.social a.contact:hover {
     color: var(--gold);
@@ -187,7 +187,7 @@ footer.legal {
     main {
         grid-row: 2;
         grid-column: 1 / -2;
-        padding-left: 4%;
+        padding-left: 4%;       /* TODO: remove? */
     }
 
     footer.social {
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index 05fbf4c..fb60598 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -1,22 +1,30 @@
 @media (min-width: 40em) {
     main {
-        width: 80%;
+        font-size: 1.2rem;
+        max-width: 55em;
         justify-self: center;
     }
 
     main #photos {
         display: grid;
         grid-template-columns: repeat(4, auto);
-        justify-content: space-around;
+        justify-content: space-between;
         width: 100%;
     }
 
-    #photos > * {
+    #photos > a.member {
+        display: block;
         height: 100%;
+        text-decoration: none;
     }
 
     #photos img.portrait {
-        height: 60vh;
+        /* Center portraits horizontally within a.member.  Alternative: set
+         * a.member to display: flex, flex-direction: column. */
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-height: 60vh;
         filter: grayscale(0.5);
         transition: filter 1s, transform 1s;
     }
@@ -25,6 +33,15 @@
         filter: none;
         transform: scale(1.05);
     }
+
+    #photos p {
+        margin: 0;
+        font-weight: bold;
+    }
+
+    #photos p.instrument {
+        color: #B4860A;         /* Darkened --gold. */
+    }
 }
 
 @media (max-width: 40em) {
diff --git a/template.html b/template.html
index d6e0406..638aa39 100644
--- a/template.html
+++ b/template.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="stylesheets/commun.css">
 {STYLESHEETS}
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,500&display=swap" rel="stylesheet">
     <link rel="alternate" type="application/rss+xml" href="feed.xml">
   </head>