diff options
| -rw-r--r-- | quatuor.html | 24 | ||||
| -rw-r--r-- | stylesheets/commun.css | 6 | ||||
| -rw-r--r-- | stylesheets/quatuor.css | 25 | ||||
| -rw-r--r-- | template.html | 2 |
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> |