quatuorbellefeuille.com

commit 6e8f06c468ef5c16ea45a926e92e129fc38caccd
parent f1b9abef9e9cf39c4a04d937f793b1d1177e866d
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 28 Feb 2021 00:13:39 +0100

Add (provisions for) links to photographs

Reintroduce intermediate <div class="photo">, since 𝒯𝒽ℴ𝓊 𝓈𝒽𝒶𝓁𝓉 𝓃ℴ𝓉
𝓈𝓊𝒻𝒻ℯ𝓇 𝓉𝓌ℴ <𝒶>𝓈 𝓉ℴ 𝒷ℯ 𝓃ℯ𝓈𝓉ℯ𝒹.

Diffstat:
M
galerie.html
 | 
35
+++++++++++++++++++----------------
M
stylesheets/galerie.css
 | 
11
++++++-----

2 files changed, 25 insertions(+), 21 deletions(-)
diff --git a/galerie.html b/galerie.html
@@ -1,22 +1,25 @@
 <main>
   <h1>Photos</h1>
   <div class="mosaic photos">
-    <a class="photo" href="images/photos/PierreVaillant2.jpg"
-       target="_blank">
-      <img src="images/photos/PierreVaillant2.jpg">
-      <p class="credits"><span>Pierre Vaillant</span></p>
-    </a>
-    <a class="photo" href="images/photos/PierreVaillant1.jpg"
-       target="_blank">
-      <img src="images/photos/PierreVaillant1.jpg">
-      <p class="credits"><span>Pierre Vaillant</span></p>
-    </a>
-    <a class="photo" href="images/photos/CyrilGhestem1.jpg"
-       target="_blank">
-      <img src="images/photos/CyrilGhestem1.jpg">
-      <p class="credits"><span>Cyril Ghestem</span></p>
-    </a>
-  </div>
+    <div class="photo">
+      <a href="images/photos/PierreVaillant2.jpg"
+         target="_blank">
+        <img src="images/photos/PierreVaillant2.jpg">
+      </a>
+      <p class="credits"><a href="">Pierre Vaillant</a></p>
+    </div><div class="photo">
+      <a href="images/photos/PierreVaillant1.jpg"
+         target="_blank">
+        <img src="images/photos/PierreVaillant1.jpg">
+      </a>
+      <p class="credits"><a href="">Pierre Vaillant</a></p>
+    </div><div class="photo">
+      <a href="images/photos/CyrilGhestem1.jpg"
+         target="_blank">
+        <img src="images/photos/CyrilGhestem1.jpg">
+      </a>
+      <p class="credits"><a href="">Cyril Ghestem</a></p>
+  </div>  </div>
   <h1>Vidéos</h1>
   <div class="mosaic videos">
     <div class="video">
diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css
@@ -4,7 +4,7 @@
     grid-gap: 0.8em;
 }
 
-.mosaic a.photo {
+.mosaic .photo {
     position: relative;
     width: 100%;
     height: 0;
@@ -23,24 +23,25 @@
     filter: none;
 }
 
-a.photo p.credits:before {
+.photo p.credits:before {
     content: '© ';
     font-size: small;
     color: white;
 }
-a.photo p.credits {
+.photo p.credits {
     position: absolute;
     bottom: 0;
     right: 0;
     margin: 0;
     color: white;
     background: #0008;
+    border-top-left-radius: 0.5em;
     font-size: small;
 }
-a.photo p.credits > span {
+.photo p.credits > a {
     display: none;
 }
-a.photo p.credits:hover > span {
+.photo p.credits:hover > a {
     display: initial;
 }