Add full names and instruments to ensemble page

1 files changed, 21 insertions, 4 deletions

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) {