themes-earthen/card_override.templ
Alex Dunmow 49401f1b41 initial: theme plugin earthen
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/earthen.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:27 +08:00

47 lines
1.4 KiB
Plaintext

package main
// earthenCardComponent renders a card with soft radius and ink-edge border.
templ earthenCardComponent(data EarthenCardData) {
<article
class="earthen-card rounded-xl overflow-hidden p-6"
data-empty?={ data.Empty }
style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.4);"
>
if data.Image != "" {
<div class="earthen-card-image -mx-6 -mt-6 mb-4 overflow-hidden">
<img src={ resolveMedia(data.Image) } alt={ data.Title } class="w-full h-auto"/>
</div>
}
if data.Title != "" {
<h3
class="earthen-card-title text-2xl mb-3"
style={ "font-family: var(--font-heading, \"Fraunces\", \"Playfair Display\", Georgia, serif); color: hsl(var(--primary));" }
>
{ data.Title }
</h3>
}
if data.Body != "" {
<div
class="earthen-card-body mb-4"
style={ "font-family: var(--font-body, \"Spectral\", Georgia, serif); color: hsl(var(--foreground));" }
>
@templ.Raw(data.Body)
</div>
}
if data.Link != "" {
<a
href={ templ.SafeURL(data.Link) }
class="earthen-card-link inline-flex items-center gap-2 font-semibold"
style="color: hsl(var(--accent));"
>
if data.LinkLabel != "" {
<span>{ data.LinkLabel }</span>
} else {
<span>Read more</span>
}
<span aria-hidden="true">→</span>
</a>
}
</article>
}