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