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

feat: create reusable card component with hover effects and responsive layout

Browse Source
This commit is contained in:
Greg 2025-05-26 21:28:57 +02:00
parent 2383967e15
commit 557c84fddd
1 changed files with 1 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
layouts/partials/card.html
View File

@ -3,18 +3,7 @@
{{ with .Params.image }}
<img src="{{ . }}" alt="{{ $.Title }} cover">
{{ else }}
{{ $bgColor := "#546e7a" }}
{{ if eq .Params.category "Books" }}{{ $bgColor = "#004d40" }}{{ end }}
{{ if eq .Params.category "Movies" }}{{ $bgColor = "#01579b" }}{{ end }}
{{ if eq .Params.category "TV Series" }}{{ $bgColor = "#4a148c" }}{{ end }}
{{ if eq .Params.category "Recipes" }}{{ $bgColor = "#b71c1c" }}{{ end }}
{{ if eq .Params.category "YouTube" }}{{ $bgColor = "#f44336" }}{{ end }}
<div class="card-placeholder" style="height:180px;border-radius:16px 16px 0 0;background-color:{{ $bgColor }};display:flex;align-items:center;justify-content:center;color:white;font-weight:500;">
<div style="text-align:center;padding:20px;">
<div style="font-size:2rem;margin-bottom:10px;">{{ substr .Title 0 1 }}</div>
<div>{{ .Title }}</div>
</div>
</div>
<img src="/images/no-cover-available-yet.png" alt="{{ $.Title }} - No cover available">
{{ end }}
<div class="card-title">{{ .Title }}</div>
{{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}