add header for comment sections of webmentions

1 files changed, 21 insertions, 0 deletions

diff --git a/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html b/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
index 86b2f51..2b9ba7d 100644
--- a/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
+++ b/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
@@ -86,6 +86,17 @@
   opacity: 1;
 }
 
+/* Comments section header */
+.wm-comments-header {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--titlecolor);
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
 /* Regular webmentions (replies, mentions) */
 .wm-regular {
   display: flex;
@@ -159,6 +170,10 @@
   .wm-reaction-title {
     font-size: 1rem;
   }
+
+  .wm-comments-header {
+    font-size: 1rem;
+  }
 }
 </style>
 
@@ -282,6 +297,12 @@ async function loadMentions() {
   const regularMentionsToShow = [...replies, ...regularMentions];
 
   if (regularMentionsToShow.length > 0) {
+    // Add comments header
+    const commentsHeader = document.createElement("div");
+    commentsHeader.className = "wm-comments-header";
+    commentsHeader.textContent = "Comments";
+    container.appendChild(commentsHeader);
+
     const regularDiv = document.createElement("div");
     regularDiv.className = "wm-regular";