frontpage/styles/Terminal/customAsciidoc.module.scss

.asciidoc {
    font-family: sans-serif;

    :global {
        @import "./asciidocBootSlate";
        @import "~highlight.js/scss/atom-one-dark";

        h1 {
            color: var(--repl_color-link, #2ac02a);
            font-size: 2em;
        }

        h2 {
            font-size: 1.5em;
        }
        h3 {
            font-size: 1.2em;
        }
        h4 {
            font-size: 1.1em;
        }

        h2,
        h3 {
            font-weight: bold;
            text-decoration: underline;
        }

        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--repl_color, #188a18);
        }

        #preamble {
            font-style: italic;
            font-size: 120%;
        }

        .paragraph {
            line-height: 1.3;
        }

        tbody>tr:nth-of-type(odd),
        #footer {
            background-color: #1f2420;
        }

        tbody>tr:hover {
            background-color: #364239;
        }

        pre {
            background-color: #282c34;
            border: 1px solid var(--repl_color-hint, #188a18);
            padding: 1em;
            color: #abb2bf;
        }

        pre.highlight {
            padding: 1px;
        }

        code {
            background-color: #282c34;
            color: #abb2bf;
        }

        /* This _should_ have been included in the Asciidoc style but it isn't */
        .underline { text-decoration:underline; }
        .overline { text-decoration:overline; }
        .line-through { text-decoration:line-through; }
        :not(pre)>code.nobreak{ word-wrap:normal; }
        :not(pre)>code.nowrap { white-space:nowrap; }
        pre.nowrap, pre.nowrap pre { 
            white-space:pre; 
            word-wrap:normal; 
        }

        /* A custom indicator that this code is in fact faulty */
        .notCompiling code {
            display: block;
            position: relative;
            /*
            .content {
                position: absolute;
            }*/

            &::before {
                content: "!";
                color: white;
                background-color: #a30e0e;
                border-radius: 50%;
                position: absolute;
                top: 1em;
                right: 1em;
                display: inline-block;
                width: 1.3em;
                height: 1.3em;
                text-align: center;
                font-weight: bolder;
                padding: 1px 1px 1px 1px;
                font-family: sans-serif;
                font-size: 1rem;
            }

            &:hover::after {
                content: "Code is faulty!";
                font-weight: bold;
                color: #a30e0e;
                position: absolute;
                right: 1em;
                bottom: 1em;
            }
        }
    }
}