d65a802afb
- Fix article header tag borders: replace broken border-current/20 (Tailwind can't apply opacity to currentColor) with per-tag border colour classes via new get_tag_border_css filter - Add calendar icon before article date in article header - Add clock icon before read time in article header and home featured - Match article card footer to wireframe (remove extra min-read span) - Add rounded-md to code block matching wireframe Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
29 lines
2.4 KiB
HTML
29 lines
2.4 KiB
HTML
{% load core_tags wagtailimages_tags %}
|
|
<article class="group flex flex-col md:flex-row gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 hover:border-brand-cyan dark:hover:border-brand-cyan transition-colors">
|
|
<a href="{{ article.url }}" class="w-full md:w-1/3 h-48 md:h-full min-h-[200px] overflow-hidden relative bg-zinc-100 dark:bg-zinc-900 shrink-0 block">
|
|
{% if article.hero_image %}
|
|
{% image article.hero_image fill-600x400 class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" %}
|
|
{% else %}
|
|
<div class="w-full h-full min-h-[200px] flex items-center justify-center bg-zinc-900">
|
|
<svg class="w-16 h-16 text-brand-cyan opacity-40 group-hover:opacity-80 transition-opacity" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 1-6.23-.693L5 14.5m14.8.8 1.402 1.402c1 1 .03 2.798-1.442 2.798H4.24c-1.47 0-2.44-1.798-1.442-2.798L4.2 15.3" /></svg>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
<div class="flex flex-col py-2 w-full">
|
|
<div class="flex gap-3 mb-4 items-center flex-wrap">
|
|
{% for tag in article.tags.all %}
|
|
<span class="text-xs font-mono font-bold px-2 py-1 {{ tag|get_tag_css }}">{{ tag.name }}</span>
|
|
{% endfor %}
|
|
<span class="text-sm font-mono text-zinc-500">{{ article.first_published_at|date:"M j, Y" }}</span>
|
|
</div>
|
|
<a href="{{ article.url }}">
|
|
<h2 class="font-display font-bold text-2xl md:text-3xl mb-3 group-hover:text-brand-cyan transition-colors">{{ article.title }}</h2>
|
|
</a>
|
|
<p class="text-zinc-600 dark:text-zinc-400 mb-6 max-w-2xl line-clamp-2">{{ article.summary }}</p>
|
|
<a href="{{ article.url }}" class="flex items-center gap-2 mt-auto text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors">
|
|
Read Article
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|