Rewrite comments style

assets/js/main.js

@@ -93,7 +93,7 @@ const loadComments = () => {
   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");
+  script.setAttribute("data-isso-css", "false");
 
   document.getElementsByTagName("head")[0].appendChild(script);
   commentsLoader.style.display = 'none';

assets/scss/partials/_comments.scss

@@ -1,115 +1,156 @@
-#site-main > #isso-thread {
+#isso-thread {
   margin-top: 3em;
-  font-size: 1rem;
+  font-size: 0.95rem;
   overflow-wrap: break-word;
 
   > h4 {
     color: var(--c-txt);
   }
+}
 
-  #isso-root {
-    display: flex;
-    flex-direction: column-reverse;
-  }
+#isso-root {
+  display: flex;
+  flex-direction: column-reverse;
+}
 
-  .isso-comment {
-    border-color: var(--c-bg-alt);
-    clear: both;
+// Comment Post Box
+//
+.isso-postbox {
+  padding: .5em;
+  background-color: var(--c-bg-alt);
+  label {
+    font-size: .9em;
   }
+}
 
-  .isso-postbox {
-    max-width: unset;
-    min-width: 100%;
-    margin-bottom: 1em;
-  }
+.isso-textarea {
+  min-height: 6em;
+  padding: .1em .3em;
+  background-color: var(--c-bg);
+}
 
-  .isso-preview {
-    color: #545250;
+.isso-preview {
+  border: 1px dashed var(--c-txt-alt);
+  padding: .1em .3em;
+  .isso-text-wrapper {
+    margin: 0;
   }
+}
 
-  .isso-textarea {
-    min-height: 5em;
-    border-radius: 0;
-    border-color: transparent;
-    color: var(--c-txt);
-    background-color: var(--c-bg-alt);
-    box-shadow: none;
-  }
+.isso-auth-section {
+  margin-top: .2rem;
+}
 
-  .isso-input-wrapper {
-    > label {
-      font-size: .85em;
-      color: var(--c-txt-alt);
-    }
-    > input {
-      width: 100%;
-      background-color: var(--c-bg-alt);
-      line-height: unset;
-      border: 1px solid var(--c-bg);
-      border-radius: 0;
-      box-shadow: none;
-    }
+.isso-input-wrapper {
+  display: inline-block;
+  position: relative;
+  max-width: 25%;
+  margin: 0;
+  > label {
+    display: inline-block;
+    font-size: .85em;
+    line-height: normal;
   }
-
-  .isso-post-action > input {
-    margin-top: .2em;
-    padding: .4em;
-    border-radius: 0;
+  > input {
+    width: 100%;
     border-color: var(--c-bg-alt);
-    color: var(--c-txt);
-    background: transparent;
-    box-shadow: none;
-    &:hover {
-      border-color: $accent;
-    }
-    &:active {
-      border-style: dashed;
-    }
+    letter-spacing: normal;
   }
+}
 
-  .isso-notification-section > label {
-    font-size: .8em;
-    color: var(--c-txt-alt);
-    vertical-align: middle;
-    &> input {
-      margin-right: .5em;
-    }
-  }
+.isso-post-action {
+  float: right;
+  margin: 1.7em 0 0 .2em;
+}
 
-  .isso-avatar {
-    margin-top: 1.3em;
-    margin-left: 0;
-    > img {
-      max-width: 2.5em;
-      height: auto;
-      border-radius: 50%;
-    }
+.isso-notification-section input[type=checkbox] {
+  margin-right: .4em;
+  vertical-align: middle;
+}
+
+.isso-preview,
+.isso-form-wrapper input[name="edit"],
+.isso-preview-mode .isso-post-action > input[name="preview"],
+.isso-preview-mode .isso-textarea {
+  display: none;
+}
+.isso-preview-mode .isso-preview {
+  display: block;
+}
+.isso-preview-mode .isso-post-action > input[name="edit"] {
+  display: inline-block;
+}
+
+// Comments list
+//
+.isso-comment {
+  border-top: 1px solid var(--c-bg-alt);
+  clear: both;
+}
+
+.isso-follow-up {
+  padding-left: calc(7% + 1em);
+}
+
+.isso-avatar {
+  float: left;
+  margin-top: 1.2em;
+  > img {
+    max-width: 2.5em;
+    height: auto;
+    border-radius: 50%;
   }
+}
 
-  .isso-text {
-    text-align: initial;
+.isso-text-wrapper {
+  margin: 1em 0 1em 3.5em;
+  display: flex;
+  flex-direction: column;
+}
+
+.isso-comment-header {
+  font-size: .9em;
+  line-height: normal;
+  .isso-spacer {
+    margin: 0 .5em;
+    color: var(--c-bg-alt);
+  }
+  .isso-permalink {
+    color: var(--c-txt-alt);
+    font-size: .9em;
+    border: none;
   }
+}
 
-  .isso-comment-footer {
-    text-align: right;
-    font-size: .85em;
+.isso-comment-footer {
+  text-align: right;
+  font-size: .95em;
+  > a {
+    border: none;
   }
+}
 
+.isso-text {
+  text-align: initial;
   a {
-    border: none;
+    border-color: var(--c-txt-alt);
     &:hover {
-      color: $accent!important;
+      border-color: $accent;
     }
   }
+  p {
+    margin: .8em 0;
+  }
+}
 
-  .isso-author {
-    color: var(--c-txt);
+
+@media screen and (max-width:650px) {
+  .isso-input-wrapper {
+      display: block;
+      max-width: 100%;
+      margin-bottom: .3em;
   }
-  a.isso-author {
-    border-bottom: 1px solid var(--c-bg-alt);
-    &:hover {
-      color: $accent!important;
-      border-bottom-color: $accent;
-    }
+  .isso-post-action {
+    margin-top: 1em;
   }
 }

assets/scss/partials/_single.scss

@@ -7,8 +7,6 @@
 #toc-btn {
   position: relative;
   top: -1em;
-  border: solid 1px;
-  background: transparent;
   color: var(--c-txt-alt);
   font-size: .8em;
   &:hover {

assets/scss/style.scss

@@ -39,7 +39,7 @@ textarea {
   line-height: 1.6em;
   font-family: $fonts;
   letter-spacing: .05rem;
-  transition: background-color .5s, color .5s;
+  transition: color .5s, background-color .5s, border-color .5s;
 }
 
 pre,
@@ -139,6 +139,20 @@ hr {
   border-style: dashed;
 }
 
+button, [type=button], [type=reset], [type=submit] {
+  border: 1px solid var(--c-txt-alt);
+  &:hover {
+    border-color: $accent;
+  }
+  &:active {
+    border-style: dashed;
+  }
+}
+
+input[type=text], input[type=email]{
+  border: 1px solid var(--c-txt-alt);
+}
+
 // Global layouts
 //
 #page {

static/css/isso.css

@@ -1,277 +0,0 @@
-#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;
-    }
-}