quatuorbellefeuille.com

commit 9fb0bb0d17df91e939b2198f4ea2fa5948e4a272
parent d46b50a2087921100138901bb29a0afcc9b8741d
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sat, 27 Feb 2021 23:47:13 +0100

Simplify gallery structure

Diffstat:
M
galerie.html
 | 
30
++++++++++++------------------
M
stylesheets/galerie.css
 | 
10
++--------

2 files changed, 14 insertions(+), 26 deletions(-)
diff --git a/galerie.html b/galerie.html
@@ -1,24 +1,18 @@
 <main>
   <h1>Photos</h1>
   <div class="mosaic photos">
-    <div class="photo">
-      <a href="images/photos/PierreVaillant2.jpg"
-         target="_blank">
-        <img src="images/photos/PierreVaillant2.jpg">
-      </a>
-    </div>
-    <div class="photo">
-      <a href="images/photos/PierreVaillant1.jpg"
-         target="_blank">
-        <img src="images/photos/PierreVaillant1.jpg">
-      </a>
-    </div>
-    <div class="photo">
-      <a href="images/photos/CyrilGhestem1.jpg"
-         target="_blank">
-        <img src="images/photos/CyrilGhestem1.jpg">
-      </a>
-    </div>
+    <a class="photo" href="images/photos/PierreVaillant2.jpg"
+       target="_blank">
+      <img src="images/photos/PierreVaillant2.jpg">
+    </a>
+    <a class="photo" href="images/photos/PierreVaillant1.jpg"
+       target="_blank">
+      <img src="images/photos/PierreVaillant1.jpg">
+    </a>
+    <a class="photo" href="images/photos/CyrilGhestem1.jpg"
+       target="_blank">
+      <img src="images/photos/CyrilGhestem1.jpg">
+    </a>
   </div>
   <h1>Vidéos</h1>
   <div class="mosaic videos">
diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css
@@ -4,20 +4,14 @@
     grid-gap: 0.8em;
 }
 
-.mosaic .photo {
+.mosaic a.photo {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 100%;
 }
-.mosaic .photo > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
 .mosaic img {
+    position: absolute;
     object-position: center;
     object-fit: cover;
     height: 100%;