From 225d8b752ad65a0a86f6aa16fa512513ca009c06 Mon Sep 17 00:00:00 2001
From: nochill <ansianggoro@gmail.com>
Date: Sat, 18 Feb 2023 13:14:27 +0700
Subject: [PATCH] style isso script

---
 gatsby-build.sh            |   1 +
 src/pages/Layout/index.tsx |   4 +-
 src/pages/Layout/isso.css  | 340 +++++++++++++++++++++++++++++++++++++
 3 files changed, 343 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Layout/isso.css

diff --git a/gatsby-build.sh b/gatsby-build.sh
index 1ea68de..bd60cf7 100755
--- a/gatsby-build.sh
+++ b/gatsby-build.sh
@@ -1 +1,2 @@
 ./node_modules/gatsby-cli/cli.js build
+pm2 restart gatsby_blog
diff --git a/src/pages/Layout/index.tsx b/src/pages/Layout/index.tsx
index 6adcc22..49c77ec 100644
--- a/src/pages/Layout/index.tsx
+++ b/src/pages/Layout/index.tsx
@@ -5,13 +5,13 @@ import Base from "../../components/Base";
 import SEO from "../../components/seo";
 import { MDXProvider } from '@mdx-js/react';
 import './styles.scss';
+import './isso.css';
 
 const Comment = ({post_id}) => {
   return (
     <>
       <Script data-isso="//comments.nochill.in/"
         src="//comments.nochill.in/js/embed.min.js" 
-        data-isso-css-url="http://158.140.167.180/files/isso.css"
         data-isso-css="false"
         id={post_id}
         />
@@ -63,4 +63,4 @@ query($id: String) {
 }
 `;
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/pages/Layout/isso.css b/src/pages/Layout/isso.css
new file mode 100644
index 0000000..d995cce
--- /dev/null
+++ b/src/pages/Layout/isso.css
@@ -0,0 +1,340 @@
+/* ========================================================================== */
+/* Generic styling                                                            */
+/* ========================================================================== */
+#isso-thread * {
+    /* Reset */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* ========================================================================== */
+/* Thread heading area                                                        */
+/* ========================================================================== */
+#isso-thread {
+    padding: 0 0 50px 0;
+    margin: 40px 0 0 0;
+}
+h4.isso-thread-heading {
+    color: #fff;
+    font-weight: bold;
+}
+.isso-feedlink {
+    float: right;
+    padding-left: 1em;
+}
+.isso-feedlink a {
+    font-size: 0.8em;
+    vertical-align: bottom;
+}
+
+/* ========================================================================== */
+/* Comments                                                                   */
+/* ========================================================================== */
+
+.isso-comment {
+    max-width: 68em;
+    margin: 0 auto;
+}
+.isso-preview .isso-comment {
+    padding-top: 0;
+    margin: 0;
+}
+.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-avatar {
+    display: block;
+    float: left;
+    margin: 0.95em 0.95em 0;
+}
+.isso-avatar svg {
+    max-width: 48px;
+    max-height: 48px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-text-wrapper {
+    display: block;
+    padding: 0.95em;
+}
+.isso-follow-up {
+    padding-left: calc(7% + 20px);
+}
+.isso-comment-footer {
+    font-size: 0.95em;
+}
+.isso-comment-header {
+    font-size: 0.85em;
+}
+.isso-comment-header a {
+    text-decoration: none;
+}
+/* Only for comment header, spacer between up-/downvote should have no padding */
+.isso-comment-header .isso-spacer {
+    padding: 0 6px;
+}
+.isso-spacer,
+.isso-permalink,
+.isso-note,
+.isso-parent {
+    color: gray;
+    font-weight: normal;
+    text-shadow: none;
+}
+.isso-spacer:hover,
+.isso-permalink:hover,
+.isso-note:hover,
+.isso-parent:hover {
+    color: #606060;
+}
+.isso-note {
+    float: right;
+}
+.isso-author {
+    font-weight: bold;
+    color: #cbcbcb;
+}
+.isso-page-author-suffix {
+    font-weight: bold;
+    color: #2c2c2c;
+}
+.isso-textarea,
+.isso-preview {
+    margin-top: 0.2em;
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    box-shadow: 0 0 2px #888;
+}
+.isso-text {
+    color: #fff;
+    word-break: break-word;
+}
+.isso-text p {
+    margin-top: 0.2em;
+}
+.isso-text p:last-child {
+    margin-bottom: 0.2em;
+}
+.isso-text h1,
+.isso-text h2,
+.isso-text h3,
+.isso-text h4,
+.isso-text h5,
+.isso-text h6 {
+    font-size: 130%;
+    font-weight: bold;
+}
+.isso-text pre {
+    background: #eee;
+    border: 1px solid #ddd;
+    padding: 10px 15px;
+    color: #4d4d4c;
+    overflow: auto;
+    line-height: 1.5em;
+}
+.isso-text :not(pre) > code {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: #eeeeee;
+    border-radius: 6px;
+}
+.isso-comment-footer {
+    font-size: 0.80em;
+    color: gray;
+    clear: left;
+}
+.isso-feedlink,
+.isso-comment-footer a {
+    font-weight: bold;
+    text-decoration: none;
+}
+.isso-feedlink:hover,
+.isso-comment-footer a:hover {
+    color: #111111;
+    text-shadow: #aaaaaa 0 0 1px;
+}
+.isso-comment-footer > a {
+    position: relative;
+    top: .2em;
+}
+.isso-comment-footer > a + a {
+    padding-left: 1em;
+}
+.isso-comment-footer .isso-votes {
+    color: gray;
+}
+.isso-upvote svg,
+.isso-downvote svg {
+    position: relative;
+    top: .2em;
+}
+/* Reply postbox under existing comment */
+.isso-comment .isso-postbox {
+    margin-top: 0.8em;
+}
+.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
+    display: none;
+}
+
+/* ========================================================================== */
+/* Postbox                                                                    */
+/* ========================================================================== */
+.isso-postbox {
+    max-width: 68em;
+    margin: 0 auto 2em;
+    clear: right;
+}
+.isso-form-wrapper {
+    display: block;
+    padding: 0;
+}
+.isso-textarea,
+.isso-preview {
+    margin: 0 0 .3em;
+    padding: .4em .8em;
+    border-radius: 3px;
+    background-color: #282828;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-textarea {
+    color: #fff;
+    outline: 0;
+    width: 100%;
+    resize: none;
+}
+.isso-form-wrapper input[type=checkbox] {
+    vertical-align: middle;
+    position: relative;
+    bottom: 1px;
+    margin-left: 0;
+}
+.isso-notification-section {
+    font-size: 0.90em;
+    padding-top: .3em;
+    display: none;
+    padding-bottom: 10px;
+}
+.isso-auth-section {
+    display: block;
+}
+.isso-textarea:focus,
+.isso-input-wrapper input:focus,
+.isso-auth-section input:focus {
+    outline: 2px solid #3584e4;
+}
+.isso-input-wrapper {
+    display: inline-block;
+    position: relative;
+    margin: 0 1% 0 0;
+    color: #282828;
+}
+.isso-input-wrapper input {
+    display: block;
+    padding: .3em 10px;
+    max-width: 100%;
+    border-radius: 3px;
+    background-color: #282828;
+    line-height: 1.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    color: #fff;
+}
+.isso-input-wrapper label {
+    display: block;
+    line-height: 1.4em;
+    height: 1.4em;
+    color: #fff !important;
+}
+label {
+	color: #fff;
+}
+.isso-post-action {
+    display: block;
+    float: right;
+    margin: 1.4em 0 0 5px;
+}
+.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-post-action > input:hover {
+    background-color: #ccc;
+}
+.isso-post-action > input:active {
+    background-color: #bbb;
+}
+
+/* ========================================================================== */
+/* Postbox (preview mode)                                                     */
+/* ========================================================================== */
+.isso-preview,
+.isso-post-action 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-preview {
+    background-color: #f8f8f8;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f8f8f8,
+        #f8f8f8 10px,
+        #fff 10px,
+        #fff 20px
+    );
+}
+
+/* ========================================================================== */
+/* Animations                                                                 */
+/* ========================================================================== */
+
+/* "target" means the comment that's being linked to, for example:
+ * https://example.com/blog/example/#isso-15
+ */
+.isso-target {
+    animation: isso-target-fade 5s ease-out;
+}
+@keyframes isso-target-fade {
+    0% { background-color: #eee5a1; }
+    /* This color should be changed when used on a dark background,
+     * maybe #3f3c1c for example
+     */
+}
+
+/* ========================================================================== */
+/* Media queries                                                              */
+/* ========================================================================== */
+@media screen and (max-width:600px) {
+    .isso-input-wrapper {
+        display: block;
+        max-width: 100%;
+        margin: 0 0 .3em;
+    }
+    .isso-input-wrapper input {
+        width: 100%;
+    }
+    .isso-post-action {
+        margin-top: 0;
+    }
+}