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,19 +5,6 @@
   border-left: 1px solid;
   margin-bottom: 0.4rem;
 
-  header {
-    display: flex;
-    align-items: center;
-    font-size: 0.7rem;
-    line-height: 0.7rem;
-
-    // no padding on mobile - the collapse button will do the job
-    padding: 0 0.2rem 0 0;
-    @media (min-width: $size-md) {
-      padding: 0.2rem;
-    }
-  }
-
   &:target > .comment-itself {
     border-left: 3px solid;
   }
@@ -27,6 +14,19 @@
   border-bottom: 1px solid;
 }
 
+.comment-header {
+  display: flex;
+  align-items: center;
+  font-size: 0.7rem;
+  line-height: 0.7rem;
+
+  // no padding on mobile - the collapse button will do the job
+  padding: 0 0.2rem 0 0;
+  @media (min-width: $size-md) {
+    padding: 0.2rem;
+  }
+}
+
 .comment-user-info {
   margin-left: 0.2rem;
 }

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>