Comments: improve appearance

_includes/2017/comments-area.html

@@ -3,13 +3,13 @@
     <details class='comments-details'>
       <summary>
         <strong class='count'>
-          <span class='disqus-comment-count' data-disqus-url='{{ site.url }}{{ include.page.url | remove: '.html' }}#disqus_thread'></span>
+          <span class='disqus-comment-count' data-disqus-url='{{ site.url }}{{ include.page.url | remove: '.html' }}#disqus_thread'>Comments</span>
         </strong>
       </summary>
       <div class='comments-section'>
         <div class='comments'>
           <div id='disqus_thread'></div>
-          <noscript data-js-disqus='{"host":"{{ site.disqus_host }}","url":"{{ site.url }}{{ include.page.url | remove: '.html' }}","identifier": "{{ include.page.url | remove: '.html' | remove_first: '/' }}"}'></noscript>
+          <noscript data-js-disqus='{"host":"{{ site.disqus_host }}","url":"{{ site.url }}{{ include.page.url | remove: '.html' }}","identifier":"{{ include.page.url | remove: '.html' | remove_first: '/' }}"}'></noscript>
         </div>
       </div>
     </details>
@@ -17,4 +17,3 @@
 </section>
 
 <script id='dsq-count-scr' src='//{{ site.disqus_host }}/count.js' async></script>
-

_layouts/2017/sheet.html

@@ -26,12 +26,12 @@ type: article
   </main>
 </div>
 
+<div class='pre-footer'><i class='icon'></i></div>
+
 {% if site.disqus_host %}
 {% include 2017/comments-area.html page=page %}
 {% endif %}
 
-<div class='pre-footer'><i class='icon'></i></div>
-
 {% include 2017/search-footer.html %}
 {% include 2017/related-posts.html page=page %}
 {% include 2017/foot.html %}

_sass/2017/components/comments-area.scss

@@ -4,13 +4,23 @@
 
 .comments-area {
   & {
-    margin: 32px 0;
+    margin: 32px 0 16px 0;
   }
 
+  // Container
   & > .container {
     @include gutter(padding-left);
     @include gutter(padding-right);
     max-width: $area-width;
     margin: 0 auto;
   }
+
+  // Horizontal line
+  & > .container::before {
+    content: '';
+    display: block;
+    background: linear-gradient(to right, $dark-line-color 50%, transparent);
+    margin-bottom: 16px;
+    height: 1px;
+  }
 }

_sass/2017/components/comments-details.scss

@@ -7,15 +7,7 @@
     margin-bottom: 16px;
     white-space: nowrap;
     cursor: pointer;
-    color: $base-text;
-  }
-
-  & > summary::after {
-    content: '';
-    display: block;
-    background: linear-gradient(to right, $dark-line-color 50%, transparent);
-    margin-top: 16px;
-    height: 1px;
+    color: $base-head;
   }
 
   & > summary:hover,
@@ -25,7 +17,7 @@
 
   & > summary > strong {
     @include font-size(1);
-    font-weight: normal;
+    font-weight: bold;
   }
 
   & > summary > strong::before {