From 6ecf7c7dbf522f70f937deae15472563394b22b6 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Thu, 11 Feb 2021 21:53:01 +0100
Subject: Add full names and instruments to ensemble page

---
 stylesheets/quatuor.css | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'stylesheets/quatuor.css')

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) {
-- 
cgit v1.2.3