40 lines
1.7 KiB
HTML
40 lines
1.7 KiB
HTML
<a class="card-link-outer" href="{{ .RelPermalink }}">
|
|
<div class="card" data-category="{{ .Params.category }}">
|
|
{{ 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>
|
|
{{ end }}
|
|
<div class="card-title">{{ .Title }}</div>
|
|
{{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
|
|
{{ with .Params.likes }}<div class="card-likes">👍 {{ . }}</div>{{ end }}
|
|
<div class="card-desc">{{ .Params.description }}</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>
|