add header for comment sections of webmentions

3 files changed, 63 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";
 
diff --git a/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html b/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
index 4a957c0..9481550 100644
--- a/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
+++ b/micro.pinapelz.moe/posts/2025-12-01-hello-world/index.html
@@ -212,6 +212,17 @@ AtProto allows you to host a <code>PDS (Personal Data Server)</code> which store
 }
 
  
+.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;
+}
+
+ 
 .wm-regular {
   display: flex;
   flex-direction: column;
@@ -284,6 +295,10 @@ AtProto allows you to host a <code>PDS (Personal Data Server)</code> which store
   .wm-reaction-title {
     font-size: 1rem;
   }
+
+  .wm-comments-header {
+    font-size: 1rem;
+  }
 }
 </style>
 
@@ -407,6 +422,12 @@ async function loadMentions() {
   const regularMentionsToShow = [...replies, ...regularMentions];
 
   if (regularMentionsToShow.length > 0) {
+    
+    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";
 
diff --git a/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html b/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
index 88ce868..691974c 100644
--- a/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
+++ b/micro.pinapelz.moe/posts/2025-12-02-china-town-fair/index.html
@@ -217,6 +217,17 @@
 }
 
  
+.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;
+}
+
+ 
 .wm-regular {
   display: flex;
   flex-direction: column;
@@ -289,6 +300,10 @@
   .wm-reaction-title {
     font-size: 1rem;
   }
+
+  .wm-comments-header {
+    font-size: 1rem;
+  }
 }
 </style>
 
@@ -412,6 +427,12 @@ async function loadMentions() {
   const regularMentionsToShow = [...replies, ...regularMentions];
 
   if (regularMentionsToShow.length > 0) {
+    
+    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";