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>

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