fix: align templates with wireframe styling

- 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>

apps/blog/models.py

@@ -100,12 +100,24 @@ class TagMetadata(models.Model):
 
     @classmethod
     def get_fallback_css(cls) -> dict[str, str]:
-        return {"bg": "bg-zinc-800 dark:bg-zinc-100", "text": "text-white dark:text-black"}
+        return {
+            "bg": "bg-zinc-800 dark:bg-zinc-100",
+            "text": "text-white dark:text-black",
+            "border": "border-zinc-600/20 dark:border-zinc-400/20",
+        }
 
     def get_css_classes(self) -> dict[str, str]:
         mapping = {
-            "cyan": {"bg": "bg-brand-cyan/10", "text": "text-brand-cyan"},
-            "pink": {"bg": "bg-brand-pink/10", "text": "text-brand-pink"},
+            "cyan": {
+                "bg": "bg-brand-cyan/10",
+                "text": "text-brand-cyan",
+                "border": "border-brand-cyan/20",
+            },
+            "pink": {
+                "bg": "bg-brand-pink/10",
+                "text": "text-brand-pink",
+                "border": "border-brand-pink/20",
+            },
             "neutral": self.get_fallback_css(),
         }
         return mapping.get(self.colour, self.get_fallback_css())

apps/core/templatetags/core_tags.py

@@ -54,3 +54,12 @@ def get_tag_css(tag):
         meta = TagMetadata.objects.filter(tag=tag).first()
     classes = meta.get_css_classes() if meta else TagMetadata.get_fallback_css()
     return mark_safe(f"{classes['bg']} {classes['text']}")
+
+
+@register.filter
+def get_tag_border_css(tag):
+    meta = getattr(tag, "metadata", None)
+    if meta is None:
+        meta = TagMetadata.objects.filter(tag=tag).first()
+    classes = meta.get_css_classes() if meta else TagMetadata.get_fallback_css()
+    return mark_safe(classes.get("border", ""))

apps/core/tests/test_more.py

@@ -27,6 +27,13 @@ def test_get_tag_css_fallback():
     assert "bg-zinc" in value
 
 
+@pytest.mark.django_db
+def test_get_tag_border_css_fallback():
+    tag = Tag.objects.create(name="y", slug="y")
+    value = core_tags.get_tag_border_css(tag)
+    assert "border-zinc" in value
+
+
 @pytest.mark.django_db
 def test_get_legal_pages_tag_callable(home_page):
     legal_index = LegalIndexPage(title="Legal", slug="legal")

templates/blog/article_page.html

@@ -29,10 +29,10 @@
 <header class="mb-12 border-b border-zinc-200 dark:border-zinc-800 pb-12">
   <div class="flex gap-3 mb-6 items-center flex-wrap">
     {% for tag in page.tags.all %}
-      <span class="text-xs font-mono font-bold px-2 py-1 {{ tag|get_tag_css }} border border-current/20">{{ tag.name }}</span>
+      <span class="text-xs font-mono font-bold px-2 py-1 {{ tag|get_tag_css }} border {{ tag|get_tag_border_css }}">{{ tag.name }}</span>
     {% endfor %}
-    <span class="text-sm font-mono text-zinc-500">{{ page.first_published_at|date:"M j, Y" }}</span>
-    <span class="text-sm font-mono text-zinc-500">{{ page.read_time_mins }} min read</span>
+    <span class="text-sm font-mono text-zinc-500"><svg class="w-4 h-4 inline mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg> {{ page.first_published_at|date:"M j, Y" }}</span>
+    <span class="text-sm font-mono text-zinc-500"><svg class="w-4 h-4 inline mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg> {{ page.read_time_mins }} min read</span>
   </div>
   <h1 class="font-display font-black text-4xl md:text-6xl lg:text-7xl leading-tight mb-8">{{ page.title }}</h1>
   <div class="flex items-center gap-4">

templates/blog/blocks/code_block.html

@@ -1,5 +1,5 @@
 {% load wagtailcore_tags %}
-<div class="my-8 overflow-hidden bg-[#0d1117] border border-zinc-800 shadow-xl">
+<div class="my-8 rounded-md overflow-hidden bg-[#0d1117] border border-zinc-800 shadow-xl">
   <div class="flex items-center justify-between px-4 py-2 bg-[#161b22] border-b border-zinc-800">
     <div class="flex gap-2">
       <div class="w-3 h-3 rounded-full bg-red-500"></div>

templates/blog/home_page.html

@@ -34,7 +34,7 @@
         {% for tag in featured_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">{{ featured_article.read_time_mins }} min read</span>
+        <span class="text-sm font-mono text-zinc-500"><svg class="w-3 h-3 inline mr-1 -mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>{{ featured_article.read_time_mins }} min read</span>
       </div>
       <a href="{{ featured_article.url }}">
         <h2 class="font-display font-black text-3xl md:text-5xl mb-4 group-hover:text-brand-cyan transition-colors leading-[1.1]">{{ featured_article.title }}</h2>

templates/components/article_card.html

@@ -20,12 +20,9 @@
       <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>
-    <div class="flex items-center justify-between mt-auto">
-      <span class="text-sm font-mono text-zinc-500">{{ article.read_time_mins }} min read</span>
-      <a href="{{ article.url }}" class="flex items-center gap-2 text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors">
+    <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>
-  </div>
 </article>