From 2bec7435d4c0c6c3ed10b1c19324004a8852e27d Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 2 Sep 2017 04:02:31 +0800
Subject: [PATCH] Fix comment count

---
 _includes/2017/comments-area.html           |  6 ++++--
 _sass/2017/components/comments-area.scss    |  1 -
 _sass/2017/components/comments-details.scss | 20 +++++++++++++-------
 _sass/2017/variables.scss                   |  2 ++
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/_includes/2017/comments-area.html b/_includes/2017/comments-area.html
index 67678e7a8..3261952c8 100644
--- a/_includes/2017/comments-area.html
+++ b/_includes/2017/comments-area.html
@@ -1,15 +1,17 @@
+{% assign identifier = include.page.url | remove: '.html' | remove_first: '/' %}
 <section class='comments-area' id='comments'>
   <div class='container'>
     <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'>Comments</span>
+          <span class='disqus-comment-count' data-disqus-identifier="{{ identifier }}" data-disqus-url='{{ site.url }}/{{ identifier }}#disqus_thread'>Comments</span>
         </strong>
+        <span class='suffix'>for this cheatsheet</span>
       </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 }}/{{ identifier }}","identifier":"{{ identifier }}"}'></noscript>
         </div>
       </div>
     </details>
diff --git a/_sass/2017/components/comments-area.scss b/_sass/2017/components/comments-area.scss
index 9dadc9201..14ad7acdd 100644
--- a/_sass/2017/components/comments-area.scss
+++ b/_sass/2017/components/comments-area.scss
@@ -20,7 +20,6 @@
     content: '';
     display: block;
     background: linear-gradient(to right, $dark-line-color 50%, transparent);
-    margin-bottom: 16px;
     height: 1px;
   }
 }
diff --git a/_sass/2017/components/comments-details.scss b/_sass/2017/components/comments-details.scss
index 17e6f1943..71118edea 100644
--- a/_sass/2017/components/comments-details.scss
+++ b/_sass/2017/components/comments-details.scss
@@ -4,26 +4,32 @@
 
 .comments-details {
   & > summary {
-    margin-bottom: 16px;
+    @include font-size(1);
+    color: $base-a;
+    margin: 16px 0;
     white-space: nowrap;
     cursor: pointer;
-    color: $base-head;
   }
 
   & > summary:hover,
   & > summary:focus {
-    color: $base-a;
+    &, & > .suffix {
+      color: $base-a7;
+    }
   }
 
-  & > summary > strong {
-    @include font-size(1);
+  & > summary > .count {
     font-weight: bold;
   }
 
-  & > summary > strong::before {
+  & > summary > .count::before {
     @include ion-icon('md-chatboxes');
     color: $base-a;
     font-size: 24px;
-    margin: 0 16px 0 8px;
+    margin: 0 8px;
+  }
+
+  & > summary > .suffix {
+    color: $base-mute;
   }
 }
diff --git a/_sass/2017/variables.scss b/_sass/2017/variables.scss
index 983bcb0a3..4f7ba7213 100644
--- a/_sass/2017/variables.scss
+++ b/_sass/2017/variables.scss
@@ -32,6 +32,8 @@ $base-a: adjust-color(#8370bd, $lightness: -5%); // indigo
 $base-b: adjust-color(#2b72a2, $lightness: -5%); // blue
 $base-c: adjust-color(#17c694, $lightness: -5%); // teal
 
+$base-a3: adjust-color($base-a, $lightness: 16%, $hue: -20deg);
+$base-a7: adjust-color($base-a, $lightness: -16%, $hue: 20deg);
 $base-b3: adjust-color($base-b, $lightness: 16%, $hue: -20deg);
 $base-b7: adjust-color($base-b, $lightness: -16%, $hue: 20deg);
 $base-mute7: adjust-color($base-mute, $lightness: -16%);