71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
|
{{/* Track Card Component */}}
|
||
|
|
<article class="track-card rounded-lg overflow-hidden group grayscale hover:grayscale-0">
|
||
|
|
{{/* Cover Image/Video */}}
|
||
|
|
<a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
|
||
|
|
{{- with .Resources.GetMatch "cover.*" }}
|
||
|
|
{{- $img := .Resize "600x webp q85" }}
|
||
|
|
<img
|
||
|
|
src="{{ $img.RelPermalink }}"
|
||
|
|
alt="{{ $.Title }}"
|
||
|
|
class="track-card__cover w-full h-full"
|
||
|
|
loading="lazy"
|
||
|
|
decoding="async"
|
||
|
|
>
|
||
|
|
{{- else }}
|
||
|
|
<div class="w-full h-full bg-surface-2 flex items-center justify-center">
|
||
|
|
<svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
{{- end }}
|
||
|
|
|
||
|
|
{{/* Video preview on hover */}}
|
||
|
|
{{- with .Resources.GetMatch "preview.*" }}
|
||
|
|
<video
|
||
|
|
src="{{ .RelPermalink }}"
|
||
|
|
class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||
|
|
muted
|
||
|
|
loop
|
||
|
|
playsinline
|
||
|
|
onmouseenter="this.play()"
|
||
|
|
onmouseleave="this.pause(); this.currentTime=0;"
|
||
|
|
></video>
|
||
|
|
{{- end }}
|
||
|
|
|
||
|
|
{{/* Play overlay - hide if video exists */}}
|
||
|
|
{{- if not (.Resources.GetMatch "preview.*") }}
|
||
|
|
<div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
|
|
<div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
|
||
|
|
<svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M8 5v14l11-7z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{- end }}
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{{/* Info */}}
|
||
|
|
<div class="p-4">
|
||
|
|
<a href="{{ .Permalink }}" class="block">
|
||
|
|
<h3 class="font-medium truncate group-hover:text-accent transition-colors">
|
||
|
|
{{ .Title }}
|
||
|
|
</h3>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between mt-2 text-sm text-text-muted">
|
||
|
|
<time datetime="{{ .Date.Format "2006-01-02" }}">
|
||
|
|
{{ .Date.Format "2006.01.02" }}
|
||
|
|
</time>
|
||
|
|
{{- with .Params.duration }}
|
||
|
|
<span class="tabular-nums">{{ . }}</span>
|
||
|
|
{{- end }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{- with .Params.genre }}
|
||
|
|
<span class="inline-block mt-3 px-2 py-1 text-xs bg-surface-2 text-text-secondary rounded">
|
||
|
|
{{ . }}
|
||
|
|
</span>
|
||
|
|
{{- end }}
|
||
|
|
</div>
|
||
|
|
</article>
|