better handling for clickable cards in portfolio

static/css/portfolio.css

@@ -52,10 +52,13 @@ main li {
 
 main li:hover {
   background: color-mix(in srgb, var(--background) 40%, var(--extreme));
-  cursor: pointer;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
 }
 
+main li[role="button"]:hover {
+  cursor: pointer;
+}
+
 /* Element */
 div {
   display: flex;
@@ -68,13 +71,14 @@ div h3 {
   margin-block: 0;
 }
 
-div h3::after {
+/* Redirection arrow on clickable element */
+li[role="button"] div h3::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' %3E%3Cpath d='M21 3h-6m6 0l-9 9m9-9v6' %3E%3C/path%3E%3Cpath d='M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6' %3E%3C/path%3E%3C/svg%3E");
   float: right;
 }
 
 @media (prefers-color-scheme: dark) {
-  div h3::after {
+  li[role="button"] div h3::after {
     filter: invert(80%);
   }
 }

templates/portfolio/card.html

@@ -1,10 +1,6 @@
-{{#metadata}} {{#info}}
-<li role="button" onclick="window.open('{{link}}', '_blank', 'noreferrer');">
 <div>
   <h3>{{title}}</h3>
   <span>{{&content}}</span> {{#language}}
   <p data-lang="{{language}}"></p>
   {{/language}}
 </div>
-</li>
-{{/info}} {{/metadata}}

templates/portfolio/index.html

@@ -23,7 +23,16 @@
 
       <h2>Projets</h2>
       <ul>
-        {{#apps}} {{>portfolio/card.html}} {{/apps}}
+        {{#apps}} {{#metadata}} {{#info}} {{#link}}
+        <li
+          role="button"
+          onclick="window.open('{{link}}', '_blank', 'noreferrer');"
+        >
+          {{>portfolio/card.html}}
+        </li>
+        {{/link}} {{^link}}
+        <li>{{>portfolio/card.html}}</li>
+        {{/link}} {{/info}} {{/metadata}} {{/apps}}
       </ul>
 
       {{#archived_apps_exists}}