quatuorbellefeuille.com

commit 7e713c4bc99922c1ec0b7b55218a32f8c176b497
parent 5aea9a6bd4869441d09cc01c4c3e5a81e5ba5b32
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Mon, 28 Dec 2020 19:18:27 +0100

Use em's for quatuor photo sizes & positions

No idea why I thought viewport units were better.

Diffstat:
M
quatuor.css
 | 
27
++++++++++++++++-----------

1 file changed, 16 insertions(+), 11 deletions(-)
diff --git 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;
 }