Future-proof portrait styling

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

2 files changed, 11 insertions, 11 deletions

diff --git a/quatuor.css b/quatuor.css
index ca5b8c4..168caf5 100644
--- 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
index bff9736..b53907f 100644
--- 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">