55 lines
2.1 KiB
HTML
55 lines
2.1 KiB
HTML
|
{{- define "main" -}}
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
|
||
|
|
<span class="badge badge-frost text-void mb-5 inline-block">Contributors</span>
|
||
|
|
<h1 class="font-display text-5xl md:text-7xl text-paper leading-none">Authors</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="gradient-line"></div>
|
||
|
|
|
||
|
|
<!-- Authors grid -->
|
||
|
|
<section class="gutter-x py-16 md:py-24">
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{{- range .Pages -}}
|
||
|
|
<a href="{{ .RelPermalink }}" class="group card-comic flex flex-col items-start gap-5 p-6 bg-concrete">
|
||
|
|
|
||
|
|
<!-- Avatar — bundle avatar.* first, fall back to .Params.avatar -->
|
||
|
|
{{- $avatarRes := .Resources.GetMatch "avatar.*" -}}
|
||
|
|
{{- $avatarSrc := "" -}}
|
||
|
|
{{- with $avatarRes }}{{ $avatarSrc = .RelPermalink }}{{ else }}{{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}{{ end -}}
|
||
|
|
{{- if $avatarSrc -}}
|
||
|
|
<div class="w-20 h-20 overflow-hidden border border-zinc group-hover:border-heat transition-colors">
|
||
|
|
<img
|
||
|
|
src="{{ $avatarSrc }}"
|
||
|
|
alt="{{ .Params.name | default .Title }}"
|
||
|
|
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||
|
|
loading="lazy"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
{{- else -}}
|
||
|
|
<div class="w-20 h-20 bg-zinc border border-zinc flex items-center justify-center">
|
||
|
|
<span class="font-display text-2xl text-fog">{{ substr (.Params.name | default .Title) 0 1 }}</span>
|
||
|
|
</div>
|
||
|
|
{{- end -}}
|
||
|
|
|
||
|
|
<!-- Info -->
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="font-display text-xl text-paper group-hover:text-heat transition-colors mb-2 leading-none">
|
||
|
|
{{ .Params.name | default .Title }}
|
||
|
|
</h2>
|
||
|
|
{{- with .Params.bio -}}
|
||
|
|
<p class="text-fog text-sm leading-relaxed line-clamp-3 mt-2 font-body">{{ . }}</p>
|
||
|
|
{{- end -}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="badge badge-outline group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all mt-auto">
|
||
|
|
View works {{ partial "icon.html" "arrow-right" }}
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
{{- end -}}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{{- end -}}
|