New comment area & opt out of font awesome

4 files changed, 64 insertions, 78 deletions

diff --git a/assets/js/fuji.js b/assets/js/fuji.js
index eda8723..4fbd651 100644
--- a/assets/js/fuji.js
+++ b/assets/js/fuji.js
@@ -51,6 +51,9 @@ function updateUtterancesTheme(utterancesFrame) {
     }
 }
 
+// load comment
+document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment);
+
 // remove empty ul in toc if article only have ## and ###
 if (document.querySelectorAll('.sidebar-toc ul ul').length > 0) {
     document.querySelectorAll('.sidebar-toc ul ul').forEach((value, key, parent) => {
@@ -75,31 +78,6 @@ if (getNowTheme() === 'dark') {
     });
 }
 
-// if in post page and using utterances
-// add utterances comment loading indicator
-if (document.querySelector('.post-loading')) {
-    var commentStatus; // utterence status
-    var commentLoadingTime = 0; // loading time passed
-    var commentCheckInterval = self.setInterval(checkUtterances, 500);
-
-    function checkUtterances() {
-        if (document.querySelector('.post-comment .utterances')) {
-            commentStatus = document.querySelector('.post-comment .utterances').getAttribute('style');
-        }
-        if (commentStatus) {
-            clearInterval(commentCheckInterval);
-            updateUtterancesTheme(document.querySelector('.post-comment iframe'));
-            document.querySelector('.post-loading').setAttribute('style', 'display: none;');
-        } else {
-            if (++commentLoadingTime > 20) {
-                clearInterval(commentCheckInterval);
-                document.querySelector('.post-comment').setAttribute('style', 'display: none;');
-                document.querySelector('.post-loading i').className = 'far fa-times-circle';
-            }
-        }
-    }
-}
-
 // theme switch button
 document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => {
     let nowTheme = getNowTheme();
@@ -126,12 +104,16 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () =>
     updateMeidumTheme(mediumInst);
     // switch comment area theme
     // only works after comment area are initialized
-    if (document.querySelector('.post-loading') && commentStatus) {
-        updateUtterancesTheme(document.querySelector('.post-comment iframe'));
-    }
-    if (document.querySelector('#disqus_thread') && typeof DISQUS !== 'undefined') {
-        DISQUS.reset({
-            reload: true,
-        });
+    let commentArea = document.querySelector('.post-comment');
+    let commentStatus = document.querySelector('span.post-comment-notloaded').getAttribute('style');
+    if (commentStatus) {
+        if (commentArea.getAttribute('data-comment') === 'utterances') {
+            updateUtterancesTheme(document.querySelector('.post-comment iframe'));
+        }
+        if (commentArea.getAttribute('data-comment') === 'disqus') {
+            DISQUS.reset({
+                reload: true,
+            });
+        }
     }
 });
diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss
index 429d869..88af65a 100644
--- a/assets/scss/_fuji-style/_components.scss
+++ b/assets/scss/_fuji-style/_components.scss
@@ -24,7 +24,7 @@
 
         &:last-child {
             border-radius: 0 0 0.25rem 0.25rem;
-            font-size: 1.3rem;
+            font-size: 1.5rem;
         }
     }
 }
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index e45658b..92190a6 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -18,24 +18,18 @@
 }
 
 .post-meta {
-    margin: 0.5rem 0.25rem 1rem 0.25rem; // little space
-    white-space: nowrap;
-    overflow-x: scroll;
+    display: flex;
+    align-items: center;
+    margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+    flex-wrap: wrap;
 
-    time,
-    span:not(:last-child) {
-        padding-right: 1.5rem;
+    span {
+        display: flex;
+        align-items: center;
     }
 
-    &::-webkit-scrollbar {
-        display: none; // WebKit
-    }
-
-    scrollbar-width: none; // Firefox
-    -ms-overflow-style: none; // Microsoft
-
-    i {
-        font-size: 0.875rem;
+    span:not(:last-child) {
+        padding-right: 1.5rem;
     }
 }
 
@@ -57,46 +51,36 @@
 }
 
 .post-meta-archive {
-    margin: 0.5rem 0.25rem 0 0.25rem; // little space
-    white-space: nowrap;
-    overflow-x: scroll;
+    display: flex;
+    align-items: center;
+    margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+    flex-wrap: wrap;
 
-    time,
     span:not(:last-child) {
         padding-right: 1.5rem;
     }
-
-    &::-webkit-scrollbar {
-        display: none; // WebKit
-    }
-
-    scrollbar-width: none; // Firefox
-    -ms-overflow-style: none; // Microsoft
 }
 
 .pagination {
-    text-align: center;
-    padding: 1rem 0;
-    font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+    padding: 1.25rem 0;
 
-    & > div {
-        display: inline-block;
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 2rem;
         height: 2rem;
 
-        &.pag-item {
-            padding: 0 0.25rem;
-
-            a {
-                vertical-align: middle;
-            }
+        a {
+            display: flex;
+            align-items: center;
         }
     }
-
-    i {
-        padding: 0 0.25rem;
-        vertical-align: middle;
-    }
 }
 
 .page-info {
@@ -160,6 +144,14 @@ article {
     }
 }
 
+.post-comment {
+    span.post-comment-notloaded {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
 #disqus_thread {
     padding: 1.25rem 0;
 }
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
index 56a61e7..c70f169 100644
--- a/assets/scss/_fuji-theme/_style.scss
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -88,12 +88,24 @@ footer {
     }
 }
 
-.post-loading,
-.post-comment .utterances-frame,
-.post-comment #disqus_thread {
+.post-loading {
     border-top: $divider;
 }
 
+.post-comment {
+    border-top: $divider;
+
+    span.post-comment-notloaded {
+        padding: 1.5rem 0;
+        color: var(--color-secondary);
+        cursor: pointer;
+
+        &:hover {
+            color: var(--color-focus);
+        }
+    }
+}
+
 // components
 .btn {
     div {