Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add card component with hover effects and category-based styling

Browse Source
This commit is contained in:
Greg 2025-05-25 20:26:14 +02:00
parent cf0b1d6cab
commit 7d492d332c
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layouts/partials/card.html
View File

@ -1,4 +1,5 @@
<div class="card" data-category="{{ .Params.category }}">
<a class="card-link-outer" href="{{ .RelPermalink }}">
<div class="card" data-category="{{ .Params.category }}">
{{ with .Params.image }}
<img src="{{ . }}" alt="{{ $.Title }} cover">
{{ else }}
@ -19,5 +20,20 @@
{{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
{{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}
<div class="card-desc">{{ .Params.description }}</div>
<a class="card-link" href="{{ .RelPermalink }}">View details &#8594;</a>
</div>
</div>
</a>
<style>
.card-link-outer {
display: block;
text-decoration: none;
color: inherit;
}
.card-link-outer .card {
transition: box-shadow 0.2s, transform 0.2s;
}
.card-link-outer:hover .card {
box-shadow: 0 6px 24px rgba(33,150,243,0.18), 0 1.5px 6px rgba(33,150,243,0.10);
transform: translateY(-2px) scale(1.02);
cursor: pointer;
}
</style>