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