Use em's for quatuor photo sizes & positions

No idea why I thought viewport units were better.

1 files changed, 16 insertions, 11 deletions

diff --git a/quatuor.css b/quatuor.css
index c5b8ab1..45487c2 100644
--- a/quatuor.css
+++ b/quatuor.css
@@ -13,13 +13,18 @@ main #photos {
 
     position: sticky;
     top: 0;
+
+    /* ⚠ Keep this bigger than vertical displacement of lowest photo,
+       otherwise Firefox glitches: it shows a scrollbar for <main>,
+       yet refuses to scroll #photos; #bio scrolls into infinite
+       emptiness… */
+    padding-top: 2em;
+    padding-bottom: 2em;
 }
 
 #photos a {
     position: relative;
-    width: 8em;
-    min-width: 7vw;
-    max-width: 12vw;
+    width: 6em;
     height: 100%;
 }
 
@@ -30,9 +35,9 @@ main #photos {
     object-fit: cover;
     object-position: center;
     border-color: #ddd;
-    border-width: 1vh;
+    border-width: 0.3em;
     border-style: solid;
-    border-radius: 1vw;
+    border-radius: 0.3em;
     box-sizing: border-box;
     filter: grayscale(1);
     transition: filter 1s;
@@ -43,19 +48,19 @@ main #photos {
 }
 
 #photos a:nth-of-type(1) {
-    top: -0.4vw;
+    top: -0.4em;
 }
 
 #photos a:nth-of-type(2) {
-    left: -1.6vw;
-    top: 1.2vw;
+    left: -1.6em;
+    top: 1.2em;
 }
 
 #photos a:nth-of-type(3) {
-    left: 1.6vw;
-    top: -1.2vw;
+    left: 1.6em;
+    top: -1.2em;
 }
 
 #photos a:nth-of-type(4) {
-    top: 0.4vw;
+    top: 0.4em;
 }