"Nail" portraits to the page

- Fixup #photos height: no sense using viewport units when the header
  and the footer can grow big enough to overlap on this absolute
  length.

- Fixup #photos img height: with the above fix to #photos, 100% of a
  grid element now takes roughly half the div, modulo padding.

- Displace portraits symmetrically around the grid's center; this
  helps maintain the fourth portrait high enough that it does not go
  below the div.

Otherwise, when the portrait *does* get below the div, Firefox
glitches: it shows a scrollbar, presumably to allow me to see the rest
of the portrait, except that for some reason (#photos's sticky
position? 🤷), scrolling never happens, and I can scroll infinitely
downward.

1 files changed, 11 insertions, 8 deletions

diff --git a/quatuor.css b/quatuor.css
index 77ffd94..9bca892 100644
--- a/quatuor.css
+++ b/quatuor.css
@@ -15,8 +15,6 @@ main #photos {
     position: sticky;
     top: 0;
 
-    height: 80vh;
-
     background-color: #dbb;
 }
 
@@ -29,13 +27,14 @@ main #bio {
     width: 8em;
     min-width: 7vw;
     max-width: 12vw;
-    height: 38vh;
+    height: 100%;
     object-fit: cover;
     object-position: center;
     border-color: #ddd;
     border-width: 1vh;
     border-style: solid;
     border-radius: 2vw;
+    box-sizing: border-box;
     filter: grayscale(1);
     transition: filter 1s;
 }
@@ -44,16 +43,20 @@ main #bio {
     filter: none;
 }
 
+#photos img:nth-of-type(1) {
+    top: -0.4vw;
+}
+
 #photos img:nth-of-type(2) {
-    top: 2.8vw;
-    left: -2.8vw;
+    left: -1.6vw;
+    top: 1.2vw;
 }
 
 #photos img:nth-of-type(3) {
-    top: -1.8vw;
-    left: 2.8vw;
+    left: 1.6vw;
+    top: -1.2vw;
 }
 
 #photos img:nth-of-type(4) {
-    top: 1.0vw;
+    top: 0.4vw;
 }