src/_data/djangokam.json

@@ -11,18 +11,21 @@
   "duo": {
     "image": "/assets/images/djangokam-she-told-me.webp",
     "alt": "Pochette du single « She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA",
-    "legende": "« She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA"
+    "legende": "« She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA",
+    "url": "https://pawol.nu/paroles/djangokam-nyyoka-she-told-me-fanm-la-di-mwen"
   },
   "clips": [
     {
       "titre": "I Want You Girl",
-      "image": "/assets/images/djangokam-i-want-you-girl.png",
+      "image": "/assets/images/djangokam-i-want-you-girl.webp",
-      "alt": "Pochette du clip « I Want You Girl »"
+      "alt": "Pochette du clip « I Want You Girl »",
+      "url": "https://pawol.nu/paroles/djangokam-i-want-you-girl"
     },
     {
       "titre": "Ish Mwen KUTE",
       "image": "/assets/images/djangokam-ish-mwen-kute.jpg",
-      "alt": "Pochette du clip « Ish Mwen KUTE »"
+      "alt": "Pochette du clip « Ish Mwen KUTE »",
+      "url": "https://pawol.nu/paroles/djangokam-ish-mwen-kute"
     }
   ],
   "faits": [

src/_includes/partials/djangokam.njk

@@ -18,8 +18,10 @@
             </div>
 
             <figure class="djangokam-duo">
-                <img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
+                <a href="{{ djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
-                <figcaption>{{ djangokam.duo.legende }}</figcaption>
+                    <img src="{{ djangokam.duo.image }}" alt="{{ djangokam.duo.alt }}" loading="lazy">
+                    <figcaption>{{ djangokam.duo.legende }}</figcaption>
+                </a>
             </figure>
         </div>
 
@@ -36,8 +38,10 @@
         <div class="djangokam-clips">
             {% for clip in djangokam.clips %}
             <figure class="djangokam-clip">
-                <img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
+                <a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
-                <figcaption>{{ clip.titre }}</figcaption>
+                    <img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
+                    <figcaption>{{ clip.titre }}</figcaption>
+                </a>
             </figure>
             {% endfor %}
         </div>

src/assets/css/styles.css

@@ -1449,6 +1449,19 @@ input[type="number"]:focus {
     text-align: center;
 }
 
+.djangokam-duo a,
+.djangokam-clip a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.djangokam-duo a:hover,
+.djangokam-clip a:hover {
+    transform: translateY(-5px);
+}
+
 .djangokam-duo img,
 .djangokam-clip img {
     width: 100%;
@@ -1466,6 +1479,12 @@ input[type="number"]:focus {
     font-style: italic;
 }
 
+.djangokam-duo a:hover figcaption,
+.djangokam-clip a:hover figcaption {
+    opacity: 1;
+    color: var(--or-oki);
+}
+
 .djangokam-clips {
     display: flex;
     justify-content: center;