Use a class for comment headers

Previously the styling was just based on the <header> element, but that
ends up inadvertently styling any other <header>s inside comments, which
we don't necessarily want.

tildes/scss/modules/_comment.scss

@@ -5,7 +5,16 @@
   border-left: 1px solid;
   margin-bottom: 0.4rem;
 
-  header {
+  &:target > .comment-itself {
+    border-left: 3px solid;
+  }
+}
+
+.comment[data-comment-depth="0"] {
+  border-bottom: 1px solid;
+}
+
+.comment-header {
   display: flex;
   align-items: center;
   font-size: 0.7rem;
@@ -16,15 +25,6 @@
   @media (min-width: $size-md) {
     padding: 0.2rem;
   }
-  }
-
-  &:target > .comment-itself {
-    border-left: 3px solid;
-  }
-}
-
-.comment[data-comment-depth="0"] {
-  border-bottom: 1px solid;
 }
 
 .comment-user-info {

tildes/scss/themes/_theme_base.scss

@@ -257,7 +257,7 @@
   }
 
   %collapsed-theme {
-    header {
+    .comment-header {
       background-color: map-get($theme, "background-primary");
     }
   }
@@ -275,16 +275,16 @@
   .comment {
     border-color: map-get($theme, "border");
 
-    header {
-      color: map-get($theme, "foreground-highlight");
-      background-color: map-get($theme, "background-secondary");
-    }
-
     &[data-comment-depth="0"] {
       border-color: map-get($theme, "border");
     }
   }
 
+  .comment-header {
+    color: map-get($theme, "foreground-highlight");
+    background-color: map-get($theme, "background-secondary");
+  }
+
   .comment:target > .comment-itself {
     border-left-color: map-get($theme, "stripe-target");
   }

tildes/tildes/templates/macros/comments.jinja2

@@ -40,7 +40,7 @@
 
 {% macro render_comment_contents(comment, is_individual_comment=False) %}
   <div class="comment-itself">
-    <header>
+    <header class="comment-header">
       <button class="btn btn-light btn-comment-collapse" data-js-comment-collapse-button>
         {{ "+" if comment.collapsed_state in ("full", "individual") else "−" }}
       </button>