Add Comments section header to distinguish from main content

remarkbox/static/css/common.css

@@ -411,8 +411,22 @@ form.node-action {
   opacity: 0.8 !important;
 }
 
-.remark-box-div-main {
+.comments-section {
   margin-top: 3rem;
+}
+
+.comments-divider {
+  margin-bottom: 1rem;
+}
+
+.comments-header {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.remark-box-div-main {
   margin-bottom: 35px;
 }
 

remarkbox/templates/show-node.j2

@@ -79,6 +79,10 @@
    {{ forms.edit(request.node) }}
 </div>
 
+<section class="comments-section">
+<hr class="comments-divider">
+<h3 class="comments-header">Comments</h3>
+
 <div id="remark-box-{{ request.node.id }}" class="remark-box-div-main not-hidden-remark-box-div">
    {{ forms.reply(request.node, request.root_node) }}
 </div>
@@ -187,5 +191,6 @@
 </center>
 </div>
 {% endif %}
+</section>
 
 {% endblock %}