quatuorbellefeuille.com

commit 74a28fd0f2ccab43a51430dd29093053f9e366ea
parent 14b5e582b2def4c4b04adef62f35903e486bda04
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Wed, 30 Dec 2020 18:01:32 +0100

Make photos square in gallery

height: 0; padding-bottom: 100%; name a more iconic duo.

Diffstat:
M
gallerie.css
 | 
23
++++++++++++++++++-----
M
gallerie.html
 | 
10
++++++++++

2 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/gallerie.css b/gallerie.css
@@ -7,14 +7,26 @@ main {
 
 .mosaic {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr));
     grid-gap: 0.8em;
 }
 
 .mosaic.photos {
-    grid-auto-rows: 14em;
+    --mosaic-side: 14em;
+}
+.mosaic .photo {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+}
+.mosaic .photo > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
-
 .mosaic img {
     object-position: center;
     object-fit: cover;
@@ -23,18 +35,19 @@ main {
     transition: filter 0.5s;
     filter: grayscale(0.8) brightness(0.4);
 }
-
 .mosaic img:hover {
     filter: none;
 }
 
+.mosaic.videos {
+    --mosaic-side: 25em;
+}
 .mosaic .video {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;           /* 9/16 */
 }
-
 .mosaic .video .yt {
     position: absolute;
     top: 0;
diff --git a/gallerie.html b/gallerie.html
@@ -64,6 +64,16 @@
               <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg">
             </a>
           </div>
+          <div class="photo">
+            <a href="https://v3.goldensun-world.com/img/wallpapers/wallpaper1.jpg">
+              <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg">
+            </a>
+          </div>
+          <div class="photo">
+            <a href="https://i.redd.it/snvwn43xm9951.png">
+              <img src="https://preview.redd.it/snvwn43xm9951.png?width=517&auto=webp&s=ffe4c47873bb42e8a62bf678d076ebc7f2bdc880">
+            </a>
+          </div>
         </div>
         <h1>Vidéos</h1>
         <div class="mosaic videos">