quatuorbellefeuille.com

commit 95248ae627453483f183762ccbdd87724095794e
parent 8ef2a6dd22b3c694f1a96778ec72c0962e83b967
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue,  9 Feb 2021 00:38:50 +0100

Try new layout for quatuor bio

Diffstat:
M
stylesheets/commun.css
 | 
2
+-
M
stylesheets/quatuor.css
 | 
54
+++++++-----------------------------------------------

2 files changed, 8 insertions(+), 48 deletions(-)
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
@@ -2,7 +2,7 @@ body {
     --gold: #E4B63A;
 
     margin: 0;
-    background-color: #deffe3;
+    background-color: white;
     font-family: 'Open Sans', sans-serif;
 }
 
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
@@ -1,41 +1,23 @@
 @media (min-width: 40em) {
     main {
-        display: flex;
-    }
-
-    main div {
-        padding: 2%;
+        width: 80%;
+        justify-self: center;
     }
 
     main #photos {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-
-        position: sticky;
-        top: 0;
-        max-height: 80vh;
+        grid-template-columns: repeat(4, auto);
+        justify-content: space-around;
+        width: 100%;
     }
 
     #photos > * {
-        position: relative;
-        width: 6em;
         height: 100%;
-        background-color: #ddd;  /* Workaround for chromium bug#377847. */
-        border-color: #ddd;
-        border-width: 0.3em;
-        border-style: solid;
-        border-radius: 0.3em;
-        overflow: hidden;
     }
 
     #photos img.portrait {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        filter: grayscale(1);
+        height: 60vh;
+        filter: grayscale(0.5);
         transition: filter 1s, transform 1s;
     }
 
@@ -43,28 +25,6 @@
         filter: none;
         transform: scale(1.05);
     }
-
-    #photos > *:nth-of-type(1) {
-        top: -0.4em;
-    }
-
-    #photos > *:nth-of-type(2) {
-        left: -1.6em;
-        top: 1.2em;
-    }
-
-    #photos > *:nth-of-type(3) {
-        left: 1.6em;
-        top: -1.2em;
-    }
-
-    #photos > *:nth-of-type(4) {
-        top: 0.4em;
-    }
-
-    #bio > *:first-child {
-        margin-top: 0;
-    }
 }
 
 @media (max-width: 40em) {