Tweak styling of interest tags on web and in epubs

src/epub/templates/chapter.xhtml

@@ -11,7 +11,7 @@
         <p class="rubric">{% if let Some(kicker) = understanding.kicker %}<span class="kicker">{{ kicker }}</span>{% if let Some(topics) = understanding.topics %} &#160; {{ topics }}{% endif %}{% else %}{% if let Some(topics) = understanding.topics %}{{ topics }}{% endif %}{% endif %}</p>
 {% endif %}
 {% if !understanding.interests.is_empty() %}
-        <p class="matches"><span class="kicker">Matches</span>{% for interest in understanding.interests %} <span class="interest">{{ interest.name }}</span>{% endfor %}</p>
+        <p class="matches">{% for interest in understanding.interests %}{% if !loop.first %}<span class="sep">|</span>{% endif %}<span class="interest">{{ interest.name }}</span>{% endfor %}</p>
 {% endif %}
 {% if let Some(text) = summary %}
         <p class="summary">{{ text }}</p>

src/epub/templates/in_this_issue.xhtml

@@ -14,7 +14,7 @@
           <p class="rubric">{% if let Some(kicker) = entry.understanding.kicker %}<span class="kicker">{{ kicker }}</span>{% if let Some(topics) = entry.understanding.topics %} &#160; {{ topics }}{% endif %}{% else %}{% if let Some(topics) = entry.understanding.topics %}{{ topics }}{% endif %}{% endif %}</p>
 {% endif %}
 {% if !entry.understanding.interests.is_empty() %}
-          <p class="matches"><span class="kicker">Matches</span>{% for interest in entry.understanding.interests %} <span class="interest">{{ interest.name }}</span>{% endfor %}</p>
+          <p class="matches">{% for interest in entry.understanding.interests %}{% if !loop.first %}<span class="sep">|</span>{% endif %}<span class="interest">{{ interest.name }}</span>{% endfor %}</p>
 {% endif %}
 {% if !entry.summary.is_empty() %}
           <p class="index-summary">{{ entry.summary }}</p>

src/epub/templates/style-x4.css

@@ -96,18 +96,14 @@ img {
 }
 
 .matches {
-  margin: 0.35em 0 0 0;
+  margin: 0.2em 0 0 0;
-  font-size: 0.8em;
+  font-size: 0.85em;
   color: #444444;
 }
 
-.interest {
+.sep {
-  display: inline-block;
+  color: #888888;
-  margin: 0 0.15em 0.15em 0;
+  padding: 0 0.4em;
-  padding: 0 0.5em;
-  border: 1px solid #888888;
-  border-radius: 0.8em;
-  white-space: nowrap;
 }
 
 .dateline,

src/epub/templates/style.css

@@ -160,19 +160,17 @@ hr.rule {
   color: #444444;
 }
 
+/* Matched interests read like the rubric's topics, with a muted vertical
+   bar between them instead of the topics' dot. */
 .matches {
-  margin: 0.35em 0 0 0;
+  margin: 0.2em 0 0 0;
   font-size: 0.8em;
   color: #444444;
 }
 
-.interest {
+.sep {
-  display: inline-block;
+  color: #aaaaaa;
-  margin: 0 0.15em 0.15em 0;
+  padding: 0 0.4em;
-  padding: 0 0.5em;
-  border: 1px solid #888888;
-  border-radius: 0.8em;
-  white-space: nowrap;
 }
 
 .summary {

src/web/issue.rs

@@ -1997,7 +1997,7 @@ mod tests {
         assert!(issue.contains("<span class=\"interest-chip\">Filesystems</span>"));
         assert!(issue.contains("<span class=\"interest-chip\">Rust</span>"));
         let issue_rubric_position = issue.find("Software engineering · Analysis").unwrap();
-        let issue_matches_position = issue.find(">Matches</span>").unwrap();
+        let issue_matches_position = issue.find("Matched interests: </span>").unwrap();
         let issue_summary_position = issue.find("What it argues").unwrap();
         assert!(issue_rubric_position < issue_matches_position);
         assert!(issue_matches_position < issue_summary_position);
@@ -2033,7 +2033,7 @@ mod tests {
         assert!(article.contains("loading=\"lazy\""));
         assert!(article.contains("referrerpolicy=\"no-referrer\""));
         let rubric_position = article.find("Software engineering · Analysis").unwrap();
-        let matches_position = article.find(">Matches</span>").unwrap();
+        let matches_position = article.find("Matched interests: </span>").unwrap();
         assert!(article.contains("<span class=\"interest-chip\">Filesystems</span>"));
         assert!(article.contains("<span class=\"interest-chip\">Rust</span>"));
         let summary_position = article

src/web/public.rs

@@ -447,7 +447,7 @@ mod tests {
         assert!(html.contains("<span class=\"interest-chip\">Filesystems</span>"));
         assert!(html.contains("<span class=\"interest-chip\">Rust</span>"));
         let rubric_position = html.find("Software engineering · Analysis").unwrap();
-        let matches_position = html.find(">Matches</span>").unwrap();
+        let matches_position = html.find("Matched interests: </span>").unwrap();
         let summary_position = html
             .find("What it argues, and why it is worth the time.")
             .unwrap();

src/web/tailwind.css

@@ -186,7 +186,11 @@
 
   .reader-page :where(h1, h2, h3, h4), .reader-section-heading { text-wrap:balance; }
   .reader-section-heading { @apply border-t-[3px] border-double border-rule-strong pt-3 font-serif text-[1.05rem] font-semibold uppercase leading-[1.2] tracking-[0.15em] text-ink; }
-  .interest-chip { @apply inline-block rounded-full border border-rule-strong px-2.5 py-0.5 text-xs leading-5 text-ink-2 no-underline; }
+  /* Matched-interest tags: a hairline in the divider colour with squared
+     corners, so the row reads as small print, not as buttons. */
+  .interest-chip { @apply inline-block rounded-xs border border-rule px-2 py-px text-xs leading-5 text-ink-2 no-underline; }
+  a.interest-chip { @apply relative; }
+  a.interest-chip::after { content:""; @apply absolute -inset-y-1.5 inset-x-0; }
   a.interest-chip:hover { @apply border-accent text-accent; }
 
   .rating { @apply my-5 flex flex-wrap items-center gap-x-3 font-sans text-xs; }

src/web/templates/_understanding.html

@@ -1 +1 @@
-{% if understanding.kicker.is_some() || understanding.topics.is_some() %}<p class="mt-3 font-sans text-sm text-muted">{% if let Some(kicker) = understanding.kicker %}<span class="text-[0.72rem] uppercase tracking-[0.12em]">{{ kicker }}</span>{% if let Some(topics) = understanding.topics %}<span class="ml-3">{{ topics }}</span>{% endif %}{% else %}{% if let Some(topics) = understanding.topics %}<span>{{ topics }}</span>{% endif %}{% endif %}</p>{% endif %}{% if !understanding.interests.is_empty() %}<p class="mt-2.5 flex flex-wrap items-center gap-1.5 font-sans"><span class="mr-1 text-[0.72rem] uppercase tracking-[0.12em] text-muted">Matches</span>{% for interest in understanding.interests %}{% if page.is_admin() %}<a class="interest-chip" href="{{ interest.href }}">{{ interest.name }}</a>{% else %}<span class="interest-chip">{{ interest.name }}</span>{% endif %}{% endfor %}</p>{% endif %}
+{% if understanding.kicker.is_some() || understanding.topics.is_some() %}<p class="mt-3 font-sans text-sm text-muted">{% if let Some(kicker) = understanding.kicker %}<span class="text-[0.72rem] uppercase tracking-[0.12em]">{{ kicker }}</span>{% if let Some(topics) = understanding.topics %}<span class="ml-3">{{ topics }}</span>{% endif %}{% else %}{% if let Some(topics) = understanding.topics %}<span>{{ topics }}</span>{% endif %}{% endif %}</p>{% endif %}{% if !understanding.interests.is_empty() %}<p class="mt-2.5 flex flex-wrap items-center gap-1.5 font-sans"><span class="sr-only">Matched interests: </span>{% for interest in understanding.interests %}{% if page.is_admin() %}<a class="interest-chip" href="{{ interest.href }}">{{ interest.name }}</a>{% else %}<span class="interest-chip">{{ interest.name }}</span>{% endif %}{% endfor %}</p>{% endif %}