New comment area & opt out of font awesome

3 files changed, 50 insertions, 46 deletions

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 {