.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;
}
h2:before, h3:before {
    content: "#";
    color: #42b983;
    position: absolute;
    left: -0.7em;
    top: -4px;
    font-size: 1.2em;
    font-weight: bold;
}
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;
}
pre {
    padding: 1.2em 1.4em;
    line-height: 1.5em;
    margin: 0;
    code {
        color: #525252;
        font-size: inherit; // different strcuts
        padding: 0;
        margin: 0;
    }
}

}

%code-base {

position: absolute;
top: 0;
right: 0;
color: #ccc;
text-align: right;
// font-size: 0.75em; // todo
font-size: 11.25px;
font-family: 'sourcesanspro', 'Helvetica Neue', Arial, sans-serif;
padding: 5px 10px 0;
line-height: 15px;
height: 15px;
font-weight: 600;

}

@mixin code-signs($keys) {

@each $key in $keys {
    .highlight .language-#{$key}: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 .language-cpp:after {

content: 'C++';

}

/* Long-term todo, currently using highlight.scss instead .highlight code {

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

} */