From 5b7893e2c9bc53738002e83a03775f822b741985 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 30 Apr 2019 13:40:12 -0600
Subject: [PATCH] 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             | 26 +++++++++----------
 tildes/scss/themes/_theme_base.scss           | 12 ++++-----
 .../tildes/templates/macros/comments.jinja2   |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index 4ad0359..3b5899e 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/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;
 }
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index e1738c8..c2ea641 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/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");
   }
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index efb370c..8ff4595 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/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>