Merge commit '6a7d3111b31e73fc66af5360149d41f690fbcaa4'

1 files changed, 375 insertions, 0 deletions

diff --git a/sysret.org/themes/tabi-lean/static/isso.css b/sysret.org/themes/tabi-lean/static/isso.css
new file mode 100644
index 0000000..c5a7329
--- /dev/null
+++ b/sysret.org/themes/tabi-lean/static/isso.css
@@ -0,0 +1,375 @@
+/* ========================================================================== */
+/* Generic styling                                                            */
+/* ========================================================================== */
+#isso-thread * {
+    /* Reset */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* ========================================================================== */
+/* Thread heading area                                                        */
+/* ========================================================================== */
+#isso-thread {
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+    color: var(--text-color);
+    font-size: 0.9em;
+    font-family: var(--sans-serif-font);
+}
+
+h4.isso-thread-heading {
+    padding-bottom: 0.2em;
+    color: var(--text-color);
+    font-size: 1.2rem;
+}
+
+.isso-feedlink {
+    float: inline-end;
+    padding-inline-start: 1em;
+}
+
+.isso-feedlink a {
+    vertical-align: bottom;
+    font-size: 0.8em;
+}
+
+/* ========================================================================== */
+/* Comments                                                                   */
+/* ========================================================================== */
+
+.isso-comment {
+    margin: 0 auto;
+    max-width: 68em;
+}
+
+.isso-preview .isso-comment {
+    margin: 0;
+    padding-top: 0;
+}
+
+.isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    margin-block-end: 0.5em;
+    border-top: 1px solid var(--divider-color);
+}
+
+.isso-avatar {
+    display: block;
+    float: inline-start;
+    margin: 0.95em 0.95em 0;
+}
+
+.isso-avatar svg {
+    border: 1px solid var(--divider-color);
+    border-radius: 3px;
+    width: 100%;
+    max-width: 48px;
+    height: 100%;
+    max-height: 48px;
+}
+
+.isso-text-wrapper {
+    display: block;
+    padding: 0.3em;
+}
+
+.isso-follow-up {
+    padding-inline-start: 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-inline: 6px;
+}
+
+.isso-spacer,
+.isso-permalink,
+.isso-note,
+.isso-parent {
+    color: var(--meta-color);
+    font-weight: normal;
+    text-shadow: none;
+}
+
+.isso-permalink:hover,
+.isso-note:hover,
+.isso-parent:hover {
+    color: var(--hover-color);
+}
+
+.isso-note {
+    float: inline-end;
+}
+
+.isso-author {
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.isso-page-author-suffix {
+    color: var(--text-color-high-contrast);
+    font-weight: bold;
+}
+
+/* Style author comments and replies */
+.isso-is-page-author>.isso-text-wrapper {
+    background-color: var(--bg-1);
+}
+
+.isso-textarea,
+.isso-preview {
+    background-color: var(--bg-2);
+    padding: 10px;
+    width: 100%;
+    color: var(--text-color);
+    font-size: 0.8em;
+    font-family: var(--sans-serif-font);
+}
+
+.isso-text p {
+    margin-top: -0.4em;
+}
+
+.isso-text p:last-child {
+    margin-block-end: 0.2em;
+}
+
+.isso-text h1,
+.isso-text h2,
+.isso-text h3,
+.isso-text h4,
+.isso-text h5,
+.isso-text h6 {
+    font-weight: bold;
+    font-size: 130%;
+}
+
+.isso-comment-footer {
+    clear: left;
+    color: var(--meta-color);
+    font-size: 0.80em;
+}
+
+.isso-feedlink,
+.isso-comment-footer a {
+    margin: 0.4em;
+    padding: 0.1em;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.isso-comment-footer .isso-votes {
+    color: var(--meta-color);
+}
+
+.isso-upvote svg,
+.isso-downvote svg {
+    position: relative;
+    top: .2em;
+}
+
+.isso-upvote:hover svg,
+.isso-downvote:hover svg {
+    fill: var(--hover-color);
+}
+
+/* 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 {
+    clear: right;
+    margin: 0 auto 2em;
+}
+
+.isso-form-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.isso-textarea,
+.isso-preview {
+    margin-top: 0.2em;
+    border: 1px solid var(--divider-color);
+    border-radius: 5px;
+    width: 100%;
+}
+
+.isso-textarea {
+    outline: 0;
+    width: 100%;
+    resize: none;
+}
+
+.isso-form-wrapper input[type=checkbox] {
+    position: relative;
+    bottom: 1px;
+    vertical-align: middle;
+    margin-inline-end: 0;
+}
+
+.isso-notification-section {
+    display: none;
+    padding-top: .3em;
+    padding-bottom: 10px;
+    font-size: 0.90em;
+}
+
+.isso-auth-section {
+    display: flex;
+    flex-direction: row;
+}
+
+.isso-input-wrapper,
+.isso-post-action {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 35%;
+    font-size: 0.8em;
+    font-family: var(--sans-serif-font);
+    text-align: center;
+}
+
+.isso-input-wrapper {
+    margin-inline-end: 0.5em;
+}
+
+.isso-input-wrapper input,
+.isso-post-action input {
+    margin-top: auto;
+}
+
+.isso-input-wrapper label {
+    display: inline-block;
+    margin-top: auto;
+    height: auto;
+    line-height: 1.4em;
+}
+
+.isso-input-wrapper input {
+    border: 1px solid var(--divider-color);
+    border-radius: 5px;
+    background-color: var(--bg-2);
+    padding: 0.3em;
+    width: 100%;
+    color: var(--text-color);
+    line-height: 1.2em;
+    font-family: var(--sans-serif-font);
+}
+
+.isso-post-action input {
+    cursor: pointer;
+    margin: 0.1em;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--primary-color);
+    padding-inline: 1em;
+    padding-block: 0.6em;
+    color: var(--background-color);
+    font-size: 0.8rem;
+}
+
+.isso-post-action {
+    display: block;
+    align-self: flex-end;
+    margin: 0 auto;
+}
+
+.isso-post-action>input:hover {
+    opacity: 0.8;
+}
+
+/* ========================================================================== */
+/* 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: repeating-linear-gradient(-45deg,
+            var(--bg-0),
+            var(--bg-0) 10px,
+            var(--bg-2) 10px,
+            var(--bg-2) 20px);
+    background-color: var(--bg-0);
+}
+
+/* ========================================================================== */
+/* 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: var(--divider-color)
+    }
+}
+
+/* ========================================================================== */
+/* Media queries                                                              */
+/* ========================================================================== */
+@media screen and (max-width:600px) {
+    .isso-auth-section {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .isso-input-wrapper {
+        display: block;
+        margin: 0 0 .4em;
+        max-width: 100%;
+    }
+
+    .isso-input-wrapper input {
+        width: 100%;
+    }
+
+    .isso-post-action {
+        margin: 0.4em auto;
+        width: 60%;
+    }
+}