better handling for clickable cards in portfolio
All checks were successful
ci/woodpecker/push/publish Pipeline was successful
All checks were successful
ci/woodpecker/push/publish Pipeline was successful
This commit is contained in:
parent
14695aa2f9
commit
6be7f18ca0
3 changed files with 23 additions and 14 deletions
|
@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}}
|
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
Loading…
Reference in a new issue