From 27f38a10b886e6906077fe82e04304fd09542299 Mon Sep 17 00:00:00 2001
From: Simon van Lierde <simonvanlierde@gmail.com>
Date: Thu, 29 Oct 2026 14:34:46 +0100
Subject: [PATCH] fix: plain register header, eyebrow colour from CSS, no
 orphan tag dots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the "№" register header with "No.", which renders in every font.
- Colour the detail page eyebrow from a data-department attribute and
  an attribute selector, instead of an inline style.
- Put the tag separator dot in the column gap and clip it, so a wrapped
  tag line no longer starts with "·" on narrow screens. Long tags wrap
  rather than being clipped.
---
 src/pages/index.astro           |  2 +-
 src/pages/projects/[slug].astro |  4 ++--
 src/styles/global.css           | 27 +++++++++++++++++++++------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9418970..6d7f7b7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,7 +48,7 @@ const CONTRIBUTE =
 
   <div class="wrap">
     <div class="register-head" aria-hidden="true">
-      <span class="col-no">№</span>
+      <span class="col-no">No.</span>
       <span class="col-name">
         Project: <span class="result-line" id="result-line"
           >{projects.length} shown</span
diff --git a/src/pages/projects/[slug].astro b/src/pages/projects/[slug].astro
index 8d459b3..40800c1 100644
--- a/src/pages/projects/[slug].astro
+++ b/src/pages/projects/[slug].astro
@@ -4,7 +4,7 @@ import Base from '../../layouts/Base.astro';
 import Tag from '../../components/Tag.astro';
 import Embed from '../../components/Embed.astro';
 import Figure from '../../components/Figure.astro';
-import { asset, deptColor, href } from '../../lib/format';
+import { asset, href } from '../../lib/format';
 import { publishedProjects } from '../../lib/projects';
 
 export async function getStaticPaths() {
@@ -28,7 +28,7 @@ const links = [
 <Base title={`${data.name} · CML Project Gallery`} description={data.summary}>
   <article class="detail wrap">
     <a class="back" href={href('/')}>&larr; All projects</a>
-    <p class="eyebrow" style={`color:${deptColor(data.department)}`}>
+    <p class="eyebrow" data-department={data.department}>
       {data.department} · {data.type}
     </p>
     <h1>{data.name}</h1>
diff --git a/src/styles/global.css b/src/styles/global.css
index ce717ef..eda531b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -164,6 +164,16 @@ a:hover {
   text-transform: uppercase;
   color: var(--green);
 }
+.eyebrow[data-department] {
+  color: var(--dept, var(--ink-soft));
+}
+/* keep in step with DEPT_COLOR in src/lib/format.ts */
+[data-department='Industrial Ecology'] {
+  --dept: var(--dept-ie);
+}
+[data-department='Environmental Biology'] {
+  --dept: var(--dept-eb);
+}
 
 /* ── header ────────────────────────────────────────────────── */
 .site-header {
@@ -490,20 +500,25 @@ a:hover {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.55rem;
+  gap: 0.35rem 1.1rem;
+  overflow: hidden;
   font-family: var(--font-mono);
   font-size: 0.72rem;
   color: var(--ink-soft);
 }
+.row-tags li {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* the dot sits in the gap before each tag; the list clips it when a tag starts a line */
 .row-tags li::before {
   content: '·';
-  margin-right: 0.55rem;
+  display: inline-block;
+  width: 1.1rem;
+  margin-left: -1.1rem;
+  text-align: center;
   color: var(--green);
 }
-.row-tags li:first-child::before {
-  content: '';
-  margin: 0;
-}
 
 @media (max-width: 560px) {
   .register-head,