From fb85192fd4b39ea227e48da9fbdd7975929fcfcc Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 29 Nov 2020 23:59:34 +0100
Subject: Add links to quatuor members

I'm flinging random CSS attributes at this beast about as gracefully
as Aloy trying to pin down a Thunderjaw.

Someone needs to make a GIF of firing a ropecaster with "position:
absolute", "self-align: center", "justify-content: center", "height:
100%", "display: grid" etc. zooming past with each bolt; it ends with
the giant roaring robot dinosaur breaking free, of course.
---
 quatuor.css  | 18 ++++++++++++------
 quatuor.html |  8 ++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/quatuor.css b/quatuor.css
index 129f712..249540f 100644
--- a/quatuor.css
+++ b/quatuor.css
@@ -21,12 +21,18 @@ main #bio {
     background-color: #dbb;
 }
 
-#photos img {
+#photos a {
     position: relative;
     width: 8em;
     min-width: 7vw;
     max-width: 12vw;
     height: 100%;
+}
+
+#photos a img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
     object-position: center;
     border-color: #ddd;
@@ -38,24 +44,24 @@ main #bio {
     transition: filter 1s;
 }
 
-#photos img:hover {
+#photos a img:hover {
     filter: none;
 }
 
-#photos img:nth-of-type(1) {
+#photos a:nth-of-type(1) {
     top: -0.4vw;
 }
 
-#photos img:nth-of-type(2) {
+#photos a:nth-of-type(2) {
     left: -1.6vw;
     top: 1.2vw;
 }
 
-#photos img:nth-of-type(3) {
+#photos a:nth-of-type(3) {
     left: 1.6vw;
     top: -1.2vw;
 }
 
-#photos img:nth-of-type(4) {
+#photos a:nth-of-type(4) {
     top: 0.4vw;
 }
diff --git a/quatuor.html b/quatuor.html
index 7b3e1b3..486e387 100644
--- a/quatuor.html
+++ b/quatuor.html
@@ -34,10 +34,10 @@
 
     <main>
       <div id="photos">
-        <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
+        <a href="vlad.html"><img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"></a>
+        <a href="garet.html"><img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"></a>
+        <a href="ivan.html"><img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"></a>
+        <a href="sofia.html"><img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"></a>
       </div>
 
       <div id="bio">
-- 
cgit v1.2.3