quatuorbellefeuille.com

commit fb85192fd4b39ea227e48da9fbdd7975929fcfcc
parent 6494bedb34c452c11eb1730e54e240c9d71a2e52
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 29 Nov 2020 23:59:34 +0100

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.

Diffstat:
M
quatuor.css
 | 
18
++++++++++++------
M
quatuor.html
 | 
8
++++----

2 files changed, 16 insertions(+), 10 deletions(-)
diff --git 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
@@ -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">