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.

1 files changed, 12 insertions, 6 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;
 }