frontpage/styles/Blog/Content.module.scss

.asciidoc {
    font-family: sans-serif;

    :global {

        @import "../asciidocMain";

        h1 {
            color: var(--blog_color-accent);
            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(--blog_color-accent-dark);
        }

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

        .paragraph {
            line-height: 1.3;
        }

        tbody>tr:nth-of-type(odd),
        #footer {
            background-color: var(--blog_background-main);
        }

        #footer {
            clear: right;
            border-radius: 1em;
        }

        tbody>tr:hover {
            background-color: rgba(0,0,0,0.2);
        }

        pre {
            background-color: #282c34;
            border: 1px solid var(--blog_content-border);
            padding: 1em;
            color: #abb2bf;
            clear: right;
        }

        pre.highlight {
            padding: 1px;
        }

        :not(pre)>code, kbd {
            background-color: var(--blog_background-main);
            color: inherit;

            [data-theme="light"] & {
                background-color: #d49a9a;
            }
        }

        a:link, a:visited, a:active {
            color: var(--blog_color-accent);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        /* 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;
            }
        }
    }
}