post.scss

.post {
    padding-top: 1em;
}

.post-block {
    .post-title {
        margin: 0.65em 0;
        color: #2c3e50;
        font-size: 1.5em;
    }

    .post-info {
        color: #7f8c8d;
        margin: 1.2em 0;
        span {
            margin-left: 0.5rem;
        }
        a.post-from {
            margin-left: 0.5rem;
            padding: 3px 6px;
            border-radius: 5px;
            font-size: 12px;
            color: white;
            background-color: #E36B6B;
        }
    }
}

.post-content {
    h2, h3, h4, h5, h6 {
        position: relative;
        margin: 1em 0;
        a:before {
            content: "#";
            color: #42b983;
            position: absolute;
            left: -0.7em;
            top: -4px;
            font-size: 1.2em;
            font-weight: bold;
        }
    }
    h4, h5, h6 {
        a:before {
            content: "";
        }
    }

    h2, h3 {
        font-size: 22px;
    }

    h4, h5, h6 {
        font-size: 18px;
    }
    a {
        color: #42b983;
        word-break: break-all;
    }
    blockquote {
        margin: 2em 0;
        padding-left: 20px;
        border-left: 4px solid #42b983;
    }
    img {
        display: block;
        max-width: 100%;
        margin: 1em auto;
    }
    & > table,
    & > figure.highlight {
        box-shadow: 0 1px 2px rgba(0,0,0,0.125);
    }
    .tip {
        position: relative;
        margin: 2em 0;
        padding: 12px 24px 12px 30px;
        border-left: 4px solid #f66;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        background-color: #f8f8f8;
        br {
            display: none;
        }
    }
    .tip:before {
        position: absolute;
        top: 14px;
        left: -12px;
        content: "!";
        width: 20px;
        height: 20px;
        border-radius: 100%;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
        text-align: center;
        background-color: #f66;
        font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    }
}

#mask {
    position: fixed;
    overflow: scroll;
    width: 100%;
    height: 100%;
    padding: 1em 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    #mask-image {
        max-width: 95%;
    }
}

code,
pre {
    font-size: 0.8em;
    background-color: #f8f8f8;
    font-family: 'Roboto Mono', Monaco, courier, monospace;
}

.highlight {
    position: relative;
    margin: 1em 0;
    border-radius: 2px;
    line-height: 1.1em;
    background-color: #f8f8f8;
    overflow-x: auto;
    table, tr, td {
        width: 100%;
        border-collapse: collapse;
        padding: 0;
        margin: 0;
    }
    .gutter {
        display: none;
    }
    .code pre {
        padding: 1.2em 1.4em;
        line-height: 1.5em;
        margin: 0;
        .line {
            width: auto;
            height: 18px;
        }
    }
}

%code-base {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    text-align: right;
    font-size: 0.75em;
    padding: 5px 10px 0;
    line-height: 15px;
    height: 15px;
    font-weight: 600;
}

@mixin code-signs($keys) {
    @each $key in $keys {
        .highlight.#{$key} .code:after {
            content: to-upper-case($key);
            @extend %code-base;
        }
    }
}

$signs: ("html", "js", "bash", "css", "scss","diff", "java", "xml", "python", "json", "swift", "ruby", "perl", "php", "c", "java", "cpp", "ts");
@include code-signs($signs);

.highlight.cpp .code:after {
    content: 'C++';
}

pre {
    color: #525252;
    .function .keyword,
    .constant {
       color: #0092db;
    }
    .keyword,
    .attribute {
        color: #e96900;
    }
    .number,
    .literal {
        color: #ae81ff;
    }
    .tag,
    .tag .title,
    .change,
    .winutils,
    .flow,
    .lisp .title,
    .clojure .built_in,
    .nginx .title,
    .tex .special {
        color: #2973b7;
    }
    .symbol,
    .symbol .string,
    .value,
    .regexp {
        color: #42b983;
    }
    .title {
        color: #83B917;
    }
    .tag .value,
    .string,
    .subst,
    .haskell .type,
    .preprocessor,
    .ruby .class .parent,
    .built_in,
    .sql .aggregate,
    .django .template_tag,
    .django .variable,
    .smalltalk .class,
    .javadoc,
    .django .filter .argument,
    .smalltalk .localvars,
    .smalltalk .array,
    .attr_selector,
    .pseudo,
    .addition,
    .stream,
    .envvar,
    .apache .tag,
    .apache .cbracket,
    .tex .command,
    .prompt {
        color: #42b983;
    }
    .comment,
    .java .annotation,
    .python .decorator,
    .template_comment,
    .pi,
    .doctype,
    .shebang,
    .apache .sqbracket,
    .tex .formula {
        color: #b3b3b3;
    }
    .deletion {
        color: #BA4545;
    }
    .coffeescript .javascript,
    .javascript .xml,
    .tex .formula,
    .xml .javascript,
    .xml .vbscript,
    .xml .css,
    .xml .cdata {
        opacity: 0.5;
    }
}