diff options
| -rw-r--r-- | quatuor.css | 27 |
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; } |