From 714ed29f0de172bf95e85918074d8c57cc0d0337 Mon Sep 17 00:00:00 2001
From: Matt McKay <mmcky@users.noreply.github.com>
Date: Tue, 16 Jun 2026 16:31:43 +1000
Subject: [PATCH] feat: add news tag pills for website/software and place pills
 inline

Adds `.qe-badge--website` (teal) and `.qe-badge--software` (purple) so all
four news-track tags (lectures, books, website, software) render as styled
pills with distinct colours, matching the existing lectures/books pills.
Previously `website`/`software` tags fell through to the unstyled base
`.qe-badge`, rendering as plain text. Closes #218.

Also moves the tag pill inline next to the post title (and beside the date
in the archive list) instead of dropping it onto its own line: the base
`.qe-badge` is `display: block`, so the news-card and news-archive overrides
now set `display: inline-block` to keep each entry compact. Closes #219.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/main.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/assets/main.scss b/assets/main.scss
index fe5f0f6..cfa2410 100755
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -644,6 +644,14 @@ img {
     background: $qe-red;
     color: #fff;
   }
+  &--website {
+    background: #2a9d8f;
+    color: #fff;
+  }
+  &--software {
+    background: #9558b2;
+    color: #fff;
+  }
   &--tools {
     background: $qe-yellow;
     color: #333;
@@ -1358,7 +1366,8 @@ section {
   color: $color-dark;
   margin: 0 0 0.3rem 0;
   .qe-badge {
-    margin-left: 0.5rem;
+    display: inline-block;
+    margin: 0 0 0 0.5rem;
     vertical-align: middle;
   }
 }
@@ -1451,6 +1460,11 @@ section {
     font-weight: normal;
     color: #999;
   }
+  .qe-badge {
+    display: inline-block;
+    margin: 0 0 0 0.5rem;
+    vertical-align: middle;
+  }
 }
 
 /* Individual post article */