Vigilio Desto
f7b587f3fa
Ported the octopus-library pkg-card pattern into reusable Hugo components: - layouts/partials/pkg-card.html — renders data-card="pkg" with category - layouts/shortcodes/pkg-card.html — markdown-usable shortcode - garden.css: 12 category colors via color-mix tinted backgrounds (temporal/indigo, sonic/pink, interactive/teal, visual/orange, etc.) Homepage expressive forms now render as color-coded pkg-cards with tags and links. Each category gets a left border accent + tinted pill. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
15 lines
558 B
HTML
15 lines
558 B
HTML
<article data-card="pkg" data-category="{{ .category }}">
|
|
<header>
|
|
<span data-card-name>{{ .name }}</span>
|
|
{{ with .version }}<span data-badge>{{ . }}</span>{{ end }}
|
|
<span data-card-cat>{{ .category }}</span>
|
|
</header>
|
|
<p data-card-desc>{{ .description }}</p>
|
|
{{ with .tags }}
|
|
<footer data-card-tags>
|
|
{{ range . }}<span data-tag>{{ . }}</span>{{ end }}
|
|
</footer>
|
|
{{ end }}
|
|
{{ with .reaches }}<small data-card-reaches>{{ . }}</small>{{ end }}
|
|
{{ with .link }}<a data-card-link href="{{ . }}">{{ . }}</a>{{ end }}
|
|
</article>
|