quatuorbellefeuille.com

commit 14b5e582b2def4c4b04adef62f35903e486bda04
parent 6ac99280d7c8e59220377c7ba7d33edfd1764537
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue, 29 Dec 2020 20:22:04 +0100

Future-proof portrait styling

I'll probably put an intermediate <div> in there somewhere; no
guarantee this <a> will remain reliable.

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

2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/quatuor.css b/quatuor.css
@@ -22,7 +22,7 @@ main #photos {
     padding-bottom: 2em;
 }
 
-#photos a {
+#photos > * {
     position: relative;
     width: 6em;
     height: 100%;
@@ -34,7 +34,7 @@ main #photos {
     overflow: hidden;
 }
 
-#photos a img {
+#photos img.portrait {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -44,25 +44,25 @@ main #photos {
     transition: filter 1s, transform 1s;
 }
 
-#photos a img:hover {
+#photos img.portrait:hover {
     filter: none;
     transform: scale(1.05);
 }
 
-#photos a:nth-of-type(1) {
+#photos > *:nth-of-type(1) {
     top: -0.4em;
 }
 
-#photos a:nth-of-type(2) {
+#photos > *:nth-of-type(2) {
     left: -1.6em;
     top: 1.2em;
 }
 
-#photos a:nth-of-type(3) {
+#photos > *:nth-of-type(3) {
     left: 1.6em;
     top: -1.2em;
 }
 
-#photos a:nth-of-type(4) {
+#photos > *:nth-of-type(4) {
     top: 0.4em;
 }
diff --git a/quatuor.html b/quatuor.html
@@ -43,10 +43,10 @@
 
     <main>
       <div id="photos">
-        <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>
+        <a href="vlad.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"></a>
+        <a href="garet.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"></a>
+        <a href="ivan.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"></a>
+        <a href="sofia.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"></a>
       </div>
 
       <div id="bio">