quatuorbellefeuille.com

commit edce726ba24a41a0f6d825446864b781187ceef4
parent a2d75c2b59f192e7c78dae64d7a87338bc6a3107
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue, 17 Nov 2020 23:53:37 +0100

Implement portraits as grid elements with relative offsets

Diffstat:
M
artistes.css
 | 
33
++++++++++++++++++++++++++++-----

1 file changed, 28 insertions(+), 5 deletions(-)
diff --git a/artistes.css b/artistes.css
@@ -14,10 +14,15 @@
 }
 
 .main #photos {
-    flex: 1;
-    align-self: flex-start;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
     position: sticky;
     top: 0;
+
+    height: 80vh;
+
     background: #eee;
 }
 
@@ -27,11 +32,15 @@
 }
 
 #photos img {
-    width: 25%;
+    position: relative;
+    width: 14vw;
+    height: 40vh;
+    object-fit: cover;
+    object-position: center;
     border-color: #ddd;
-    border-width: 1vw;
+    border-width: 1vh;
     border-style: solid;
-    border-radius: 10%;
+    border-radius: 2vw;
     filter: grayscale(1);
     transition: filter 1s;
 }
@@ -39,3 +48,17 @@
 #photos img:hover {
     filter: none;
 }
+
+#photos img:nth-of-type(2) {
+    top: 2.8vw;
+    left: -2.8vw;
+}
+
+#photos img:nth-of-type(3) {
+    top: -1.8vw;
+    left: 2.8vw;
+}
+
+#photos img:nth-of-type(4) {
+    top: 1.0vw;
+}