style: fix 'disqus' button style

xianmin · Nov 15, 2024 · b966d7f · b966d7f
1 parent 535a636
commit b966d7f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 37 deletions.
diff --git a/assets/sass/_partial/_post.scss b/assets/sass/_partial/_post.scss
@@ -2,11 +2,11 @@
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-columns: 10.5rem minmax(0, 1fr) 10.5rem;
-  grid-template-areas: "toc content sidebar";
+  grid-template-areas: 'toc content sidebar';
 
   @include style-to-mobile() {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "content" "toc" "sidebar";
+    grid-template-areas: 'content' 'toc' 'sidebar';
   }
 
   .sidebar {
@@ -28,17 +28,16 @@
   @include style-to-mobile() {
     margin-top: 1rem;
   }
-
 }
 
 .post {
   max-width: $article-max-width;
   margin: 0 auto;
-  @import "_post/header";
-  @import "_post/content";
-  @import "_post/copyright";
-  @import "_post/reward";
-  @import "_post/footer";
+  @import '_post/header';
+  @import '_post/content';
+  @import '_post/copyright';
+  @import '_post/reward';
+  @import '_post/footer';
 }
 
 .comment {
@@ -47,9 +46,9 @@
   max-width: $article-max-width;
 }
 
-.disqus-comment {
-  margin: 0 5em 3em;
-  @import "_post/disqus";
+#load_disqus_container {
+  display: flex;
+  justify-content: center;
 }
 
-@import "_toc";
+@import '_toc';
diff --git a/assets/sass/_partial/_post/_disqus.scss b/assets/sass/_partial/_post/_disqus.scss
diff --git a/layouts/partials/comments/disqus.html b/layouts/partials/comments/disqus.html
@@ -1,6 +1,8 @@
-<div class="disqus-comment comment">
-  <div class="disqus-button" id="load_disqus" onclick="load_disqus()">
-    {{ i18n "loadDisqus" }}
+<div class="comment">
+  <div id="load_disqus_container">
+    <button class="disqus-button" onclick="load_disqus()">
+      {{ i18n "loadDisqus" }}
+    </button>
   </div>
   <div id="disqus_thread"></div>
   <script type="text/javascript">
@@ -17,11 +19,10 @@
       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
 
-      $('#load_disqus').remove();
+      document.getElementById('load_disqus_container').style.display = 'none';
     };
   </script>
-  <noscript
-    >Please enable JavaScript to view the
+  <noscript>Please enable JavaScript to view the
     <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
   </noscript>
   <!-- <a href="http://disqus.com/" class="dsq-brlink" target="_blank">comments powered by <span class="logo-disqus">Disqus</span></a> -->