Anri/mylloon.fr
1
0
Fork 0
Code Issues 21 Pull requests 2 Releases Packages 1 Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/css/portfolio.css
View file

@ -52,10 +52,13 @@ main li {
main li:hover { main li:hover {
background: color-mix(in srgb, var(--background) 40%, var(--extreme)); background: color-mix(in srgb, var(--background) 40%, var(--extreme));
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
} }
main li[role="button"]:hover {
cursor: pointer;
}
/* Element */ /* Element */
div { div {
display: flex; display: flex;
@ -68,13 +71,14 @@ div h3 {
margin-block: 0; 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"); 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; float: right;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
div h3::after { li[role="button"] div h3::after {
filter: invert(80%); filter: invert(80%);
} }
} }

16
templates/portfolio/card.html
View file

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

11
templates/portfolio/index.html
View file

@ -23,7 +23,16 @@
<h2>Projets</h2> <h2>Projets</h2>
<ul> <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> </ul>
{{#archived_apps_exists}} {{#archived_apps_exists}}