Update comment style

assets/js/main.js

@@ -86,13 +86,14 @@ let commentsLoader = document.getElementById('comments-loader');
 const loadComments = () => {
   let script = document.createElement("script");
   script.setAttribute("type", "text/javascript");
-  script.setAttribute("src", "https://comment.ojbk.im/js/embed.min.js");
+  script.setAttribute("src", "/js/embed.min.js");
 
   // add relevant data-isso attributes here
   script.setAttribute("data-isso", "https://comment.ojbk.im");
-  script.setAttribute("data-isso-vote", "false");
-  script.setAttribute("data-isso-max-comments-top", "10");
-  script.setAttribute("data-isso-reveal-on-click", "10");
+  // script.setAttribute("data-isso-vote", "false");
+  // script.setAttribute("data-isso-max-comments-top", "10");
+  // script.setAttribute("data-isso-reveal-on-click", "10");
+  script.setAttribute("data-isso-css-url", "/css/isso.css");
 
   document.getElementsByTagName("head")[0].appendChild(script);
   commentsLoader.style.display = 'none';
@@ -100,7 +101,6 @@ const loadComments = () => {
 
 // Load comments if the window is not scrollable
 if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
-  commentsLoader.style.display = 'block';
   loadComments();
   commentsLoaded = true;
 }
@@ -108,7 +108,6 @@ if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
 window.addEventListener('scroll', throttle(() => {
   if ((comments !== null) && (commentsLoaded == false)) {
     if (window.pageYOffset + window.innerHeight > comments.offsetTop) {
-      commentsLoader.style.display = 'block';
       loadComments();
       commentsLoaded = true;
     }

assets/scss/partials/_comments.scss

@@ -5,8 +5,15 @@
   > h4 {
     color: var(--c-txt);
   }
+
+  #isso-root {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
   .isso-comment {
     border-color: var(--c-bg-alt);
+    clear: both;
   }
 
   .isso-postbox {
@@ -19,6 +26,7 @@
   }
 
   .isso-textarea {
+    min-height: 5em;
     border-radius: 0;
     border-color: transparent;
     color: var(--c-txt);
@@ -66,28 +74,41 @@
     }
   }
 
-  .isso-avatar > img {
-    max-width: 3em;
-    height: auto;
+  .isso-avatar {
+    margin-top: 1.3em;
+    margin-left: 0;
+    > img {
+      max-width: 2.5em;
+      height: auto;
+      border-radius: 50%;
+    }
   }
 
   .isso-text {
     text-align: initial;
   }
 
-  a.isso-reply,
-  a.isso-permalink {
+  .isso-comment-footer {
+    text-align: right;
+    > .isso-downvote {
+      display: none;
+    }
+  }
+
+  a {
     border: none;
     &:hover {
       color: $accent!important;
     }
   }
 
-
   .isso-author {
     color: var(--c-txt);
   }
-  a.isso-author:hover {
-    color: $accent!important;
+  a.isso-author {
+    border-bottom: 1px solid var(--c-bg-alt);
+    &:hover {
+      color: $accent!important;
+    }
   }
 }

layouts/_default/baseof.html

@@ -23,6 +23,8 @@
 	<link rel="shortcut icon" href="/favicon.ico">
 	<title>{{.Title}}</title>
 	<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
+	<link rel="dns-prefetch" href="//comment.ojbk.im">
+	<link rel="dns-prefetch" href="//gravatar.loli.net">
 	{{ range .AlternativeOutputFormats -}}
 	{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 	{{ end -}}

layouts/partials/comments.html

@@ -1,4 +1,4 @@
-		<div id="comments-loader" style="display: none;">
+		<div id="comments-loader">
 			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle animated infinite bounce"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> 评论加载中……
 		</div>
 		<div id="isso-thread"></div>

static/css/isso.css

@@ -0,0 +1,277 @@
+#isso-thread * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+#isso-thread .isso-comment-header a {
+    text-decoration: none;
+}
+
+#isso-thread {
+    padding: 0;
+    margin: 0;
+}
+#isso-thread > h4 {
+    color: #555;
+    font-weight: bold;
+}
+#isso-thread > .isso-feedlink {
+    float: right;
+    padding-left: 1em;
+}
+#isso-thread > .isso-feedlink > a {
+    font-size: 0.8em;
+    vertical-align: bottom;
+}
+#isso-thread .isso-textarea {
+    min-height: 58px;
+    outline: 0;
+}
+#isso-thread .isso-textarea.isso-placeholder {
+    color: #757575;
+}
+
+#isso-root .isso-comment {
+    max-width: 68em;
+}
+#isso-root .isso-preview .isso-comment {
+    padding-top: 0;
+    margin: 0;
+}
+#isso-root .isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 0.5em;
+}
+.isso-comment > .isso-avatar {
+    display: block;
+    float: left;
+    margin: 0.95em 0.95em 0;
+}
+.isso-comment > .isso-avatar > svg {
+    max-width: 48px;
+    max-height: 48px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-comment > .isso-text-wrapper {
+    display: block;
+    padding: 0.95em;
+}
+.isso-comment .isso-follow-up {
+    padding-left: calc(7% + 20px);
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header, .isso-comment > .isso-text-wrapper > .isso-comment-footer {
+    font-size: 0.95em;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header {
+    font-size: 0.85em;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-spacer {
+    padding: 0 6px;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-spacer,
+.isso-comment > .isso-text-wrapper > .isso-comment-header a.isso-permalink,
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-note,
+.isso-comment > .isso-text-wrapper > .isso-comment-header a.isso-parent {
+    color: gray !important;
+    font-weight: normal;
+    text-shadow: none !important;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-spacer:hover,
+.isso-comment > .isso-text-wrapper > .isso-comment-header a.isso-permalink:hover,
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-note:hover,
+.isso-comment > .isso-text-wrapper > .isso-comment-header a.isso-parent:hover {
+    color: #606060 !important;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-note {
+    float: right;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-author {
+    font-weight: bold;
+    color: #555;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-page-author-suffix {
+    font-weight: bold;
+    color: #2c2c2c;
+}
+.isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-textarea,
+.isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-preview {
+    margin-top: 0.2em;
+}
+.isso-comment > .isso-text-wrapper > .isso-text p {
+    margin-top: 0.2em;
+}
+.isso-comment > .isso-text-wrapper > .isso-text p:last-child {
+    margin-bottom: 0.2em;
+}
+.isso-comment > .isso-text-wrapper > .isso-text h1,
+.isso-comment > .isso-text-wrapper > .isso-text h2,
+.isso-comment > .isso-text-wrapper > .isso-text h3,
+.isso-comment > .isso-text-wrapper > .isso-text h4,
+.isso-comment > .isso-text-wrapper > .isso-text h5,
+.isso-comment > .isso-text-wrapper > .isso-text h6 {
+    font-size: 130%;
+    font-weight: bold;
+}
+.isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-textarea,
+.isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-preview {
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    box-shadow: 0 0 2px #888;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-footer {
+    font-size: 0.80em;
+    color: gray !important;
+    clear: left;
+}
+.isso-feedlink,
+.isso-comment > .isso-text-wrapper > .isso-comment-footer a {
+    font-weight: bold;
+    text-decoration: none;
+}
+.isso-feedlink:hover,
+.isso-comment > .isso-text-wrapper > .isso-comment-footer a:hover {
+    color: #111111 !important;
+    text-shadow: #aaaaaa 0 0 1px !important;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-footer > a {
+    position: relative;
+    top: .2em;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-footer > a + a {
+    padding-left: 1em;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-footer .isso-votes {
+    color: gray;
+}
+.isso-comment > .isso-text-wrapper > .isso-comment-footer .isso-upvote svg,
+.isso-comment > .isso-text-wrapper > .isso-comment-footer .isso-downvote svg {
+    position: relative;
+    top: .2em;
+}
+.isso-comment .isso-postbox {
+    margin-top: 0.8em;
+}
+.isso-comment.isso-no-votes > * > .isso-comment-footer span.isso-votes {
+    display: none;
+}
+
+.isso-postbox {
+    max-width: 68em;
+    margin: 0 auto 2em;
+    clear: right;
+}
+.isso-postbox > .isso-form-wrapper {
+    display: block;
+    padding: 0;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section,
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+    display: block;
+}
+.isso-postbox > .isso-form-wrapper .isso-textarea,
+.isso-postbox > .isso-form-wrapper .isso-preview {
+    margin: 0 0 .3em;
+    padding: .4em .8em;
+    border-radius: 3px;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .isso-form-wrapper input[type=checkbox] {
+    vertical-align: middle;
+    position: relative;
+    bottom: 1px;
+    margin-left: 0;
+}
+.isso-postbox > .isso-form-wrapper .isso-notification-section {
+    font-size: 0.90em;
+    padding-top: .3em;
+}
+#isso-thread .isso-textarea:focus,
+#isso-thread input:focus {
+    border-color: rgba(0, 0, 0, 0.8);
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper {
+    display: inline-block;
+    position: relative;
+    max-width: 25%;
+    margin: 0;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input {
+    padding: .3em 10px;
+    max-width: 100%;
+    border-radius: 3px;
+    background-color: #fff;
+    line-height: 1.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper label {
+    display: inline-block;
+    line-height: 1.4em;
+    height: 1.4em;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+    display: block;
+    float: right;
+    margin: 1.4em 0 0 5px;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input {
+    padding: calc(.3em - 1px);
+    border-radius: 2px;
+    border: 1px solid #CCC;
+    background-color: #DDD;
+    cursor: pointer;
+    outline: 0;
+    line-height: 1.4em;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input:hover {
+    background-color: #CCC;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input:active {
+    background-color: #BBB;
+}
+.isso-postbox > .isso-form-wrapper .isso-preview,
+.isso-postbox > .isso-form-wrapper input[name="edit"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
+    display: none;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
+    display: block;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
+    display: inline;
+}
+.isso-postbox > .isso-form-wrapper .isso-preview {
+    background-color: #f8f8f8;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f8f8f8,
+        #f8f8f8 10px,
+        #fff 10px,
+        #fff 20px
+    );
+}
+.isso-postbox > .isso-form-wrapper > .isso-notification-section {
+    display: none;
+    padding-bottom: 10px;
+}
+@media screen and (max-width:600px) {
+    .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper {
+        display: block;
+        max-width: 100%;
+        margin: 0 0 .3em;
+    }
+    .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input {
+        width: 100%;
+    }
+    .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+        margin-top: 0;
+    }
+}