Make comments less obnoxious

_includes/2017/comments-area.html

@@ -1,10 +1,20 @@
-<section class='comments-area'>
+<section class='comments-area' id='comments'>
   <div class='container'>
-    <div class='comments-section'>
+    <details class='comments-details'>
-      <div class='comments'>
+      <summary>
-        <div id='disqus_thread'></div>
+        <strong class='count'>
-        <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>
+          <span class='disqus-comment-count' data-disqus-url='{{ site.url }}{{ include.page.url | remove: '.html' }}#disqus_thread'></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>
+        </div>
       </div>
-    </div>
+    </details>
   </div>
 </section>
+
+<script id='dsq-count-scr' src='//{{ site.disqus_host }}/count.js' async></script>
+

_sass/2017/components/comments-details.scss

@@ -0,0 +1,37 @@
+/*
+ * Comments disclosure triangle
+ */
+
+.comments-details {
+  & > summary {
+    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;
+  }
+
+  & > summary:hover,
+  & > summary:focus {
+    color: $base-a;
+  }
+
+  & > summary > strong {
+    @include font-size(1);
+    font-weight: normal;
+  }
+
+  & > summary > strong::before {
+    @include ion-icon('md-chatboxes');
+    color: $base-a;
+    font-size: 24px;
+    margin: 0 16px 0 8px;
+  }
+}

_sass/2017/components/comments-section.scss

@@ -16,7 +16,7 @@
   }
 
   // Desktop: partial width
-  @media (min-width: 481px) {
+  @media (min-width: 769px) {
     & > .comments {
       flex: 0 1 66%;
       min-width: 300px;

_sass/2017/style.scss

@@ -18,6 +18,7 @@
 @import './components/back-button';
 @import './components/body-area';
 @import './components/comments-area';
+@import './components/comments-details';
 @import './components/comments-section';
 @import './components/h2-section';
 @import './components/h3-section';