Refine layout and spacing for insight metadata and footer

Updates the visual hierarchy of the single insight page by tightening the metadata block (byline, date, tags) to create a more cohesive header. Adjusts vertical rhythm throughout to reduce visual clutter.

Author: nathenharvey

hugo/themes/dora-2025/assets/scss/insights.scss

@@ -4,13 +4,13 @@ h3 {
 
 h4 {
     color: #666;
-    margin-bottom: 1em;
+    margin-bottom: 0.25em;
+    font-size: 0.9em;
+    font-weight: 300;
 }
 
 .mainContent li {
     font-weight: 300;
-    font-family: "Roboto";
-    font-size: 14px;
 }
 
 p.description {
@@ -30,16 +30,42 @@ li div:not(:first-child) {
 }
 
 .posted {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.25em;
+}
+
+.tags strong,
+.insights-navigation strong {
+    font-weight: 300;
+    color: #666;
 }
 
 .tags {
     margin-bottom: 1em;
+    margin-top: 0.25em;
+    display: block;
+
+    a {
+        border: 1px solid var(--dora-primary-light);
+        padding: 2px 8px;
+        border-radius: 50vh;
+        text-decoration: none;
+        color: #666;
+        margin-left: 0.25em;
+
+        &:hover {
+            color: var(--dora-primary-dark);
+            border-color: var(--dora-primary-dark);
+        }
+    }
+}
+
+.tags.footer-tags {
+    margin-bottom: 0.5em;
 }
 
 .post-separator {
-    margin-top: 2em;
-    margin-bottom: 2em;
+    margin-top: 1em;
+    margin-bottom: 1em;
     border: 0;
     border-top: 1px solid #eee;
 }

hugo/themes/dora-2025/layouts/insights/single.html

@@ -31,10 +31,9 @@ <h2>{{ .Params.subhead }}</h2>
             {{ end }}
 
             {{ with .GetTerms "tags" }}
-            <div class="tags">
-                <strong>Posted in:</strong>
+            <div class="tags">Posted in:
                 {{ range . }}
-                <a href="{{ .RelPermalink }}">#{{ .LinkTitle }}</a>
+                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
                 {{ end }}
             </div>
             {{ end }}
@@ -54,10 +53,9 @@ <h2>{{ .Params.subhead }}</h2>
             <hr class="post-separator">
 
             {{ with .GetTerms "tags" }}
-            <div class="footer-tags">
-                <strong>Posted in:</strong>
+            <div class="tags footer-tags">Posted in:
                 {{ range . }}
-                <a href="{{ .RelPermalink }}">#{{ .LinkTitle }}</a>
+                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
                 {{ end }}
             </div>
             {{ end }}