better handling for clickable cards in portfolio
All checks were successful
ci/woodpecker/push/publish Pipeline was successful

This commit is contained in:
Mylloon 2023-10-16 12:08:26 +02:00
parent 14695aa2f9
commit 6be7f18ca0
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
3 changed files with 23 additions and 14 deletions

View file

@ -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%);
}
}

View file

@ -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}}

View file

@ -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}}