mirror of https://github.com/jkjoy/sunpeiwen.git
304 lines
5.9 KiB
SCSS
304 lines
5.9 KiB
SCSS
|
.gutter pre {
|
||
|
color: #999;
|
||
|
}
|
||
|
pre {
|
||
|
color: #525252;
|
||
|
}
|
||
|
pre .function .keyword,
|
||
|
pre .constant {
|
||
|
color: #0092db;
|
||
|
}
|
||
|
pre .keyword,
|
||
|
pre .attribute {
|
||
|
color: #e96900;
|
||
|
}
|
||
|
pre .number,
|
||
|
pre .literal {
|
||
|
color: #ae81ff;
|
||
|
}
|
||
|
pre .tag,
|
||
|
pre .tag .title,
|
||
|
pre .change,
|
||
|
pre .winutils,
|
||
|
pre .flow,
|
||
|
pre .lisp .title,
|
||
|
pre .clojure .built_in,
|
||
|
pre .nginx .title,
|
||
|
pre .tex .special {
|
||
|
color: #2973b7;
|
||
|
}
|
||
|
pre .class .title {
|
||
|
color: #fff;
|
||
|
}
|
||
|
pre .symbol,
|
||
|
pre .symbol .string,
|
||
|
pre .value,
|
||
|
pre .regexp {
|
||
|
color: #42b983;
|
||
|
}
|
||
|
pre .title {
|
||
|
color: #a6e22e;
|
||
|
}
|
||
|
pre .tag .value,
|
||
|
pre .string,
|
||
|
pre .subst,
|
||
|
pre .haskell .type,
|
||
|
pre .preprocessor,
|
||
|
pre .ruby .class .parent,
|
||
|
pre .built_in,
|
||
|
pre .sql .aggregate,
|
||
|
pre .django .template_tag,
|
||
|
pre .django .variable,
|
||
|
pre .smalltalk .class,
|
||
|
pre .javadoc,
|
||
|
pre .django .filter .argument,
|
||
|
pre .smalltalk .localvars,
|
||
|
pre .smalltalk .array,
|
||
|
pre .attr_selector,
|
||
|
pre .pseudo,
|
||
|
pre .addition,
|
||
|
pre .stream,
|
||
|
pre .envvar,
|
||
|
pre .apache .tag,
|
||
|
pre .apache .cbracket,
|
||
|
pre .tex .command,
|
||
|
pre .prompt {
|
||
|
color: #42b983;
|
||
|
}
|
||
|
pre .comment,
|
||
|
pre .java .annotation,
|
||
|
pre .python .decorator,
|
||
|
pre .template_comment,
|
||
|
pre .pi,
|
||
|
pre .doctype,
|
||
|
pre .deletion,
|
||
|
pre .shebang,
|
||
|
pre .apache .sqbracket,
|
||
|
pre .tex .formula {
|
||
|
color: #b3b3b3;
|
||
|
}
|
||
|
pre .coffeescript .javascript,
|
||
|
pre .javascript .xml,
|
||
|
pre .tex .formula,
|
||
|
pre .xml .javascript,
|
||
|
pre .xml .vbscript,
|
||
|
pre .xml .css,
|
||
|
pre .xml .cdata {
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
.post {
|
||
|
position: relative;
|
||
|
padding-bottom: 30px;
|
||
|
margin-bottom: 30px;
|
||
|
border-bottom: 1px solid #e6e6e6;
|
||
|
}
|
||
|
.post h1,
|
||
|
.post h2 {
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
.post h1 a:hover,
|
||
|
.post h2 a:hover {
|
||
|
border-bottom: 3px solid #666;
|
||
|
}
|
||
|
.post h1 {
|
||
|
font-size: 32px;
|
||
|
margin: 0 0 45px;
|
||
|
letter-spacing: 1px;
|
||
|
}
|
||
|
.post h2 {
|
||
|
font-size: 24px;
|
||
|
margin: 60px 0 30px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.post h2:before {
|
||
|
content: '';
|
||
|
border-left: 5px solid #f66;
|
||
|
position: absolute;
|
||
|
left: -15px;
|
||
|
height: 75%;
|
||
|
top: 12%;
|
||
|
}
|
||
|
.post h3 {
|
||
|
margin: 30px 0 15px;
|
||
|
}
|
||
|
.post .date {
|
||
|
font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
|
||
|
font-size: 13px;
|
||
|
color: #999;
|
||
|
margin: 0 0 30px;
|
||
|
letter-spacing: 1px;
|
||
|
}
|
||
|
.post .page-content {
|
||
|
text-align: left;
|
||
|
line-height: 1.8em;
|
||
|
}
|
||
|
.post .page-content p,
|
||
|
.post .page-content ul,
|
||
|
.post .page-content ol {
|
||
|
margin: 1em 0 1.5em;
|
||
|
}
|
||
|
.post .page-content strong {
|
||
|
font-weight: 600;
|
||
|
color: #444;
|
||
|
}
|
||
|
.post .page-content ol {
|
||
|
padding-left: 1.6em;
|
||
|
}
|
||
|
.post .page-content ul {
|
||
|
padding-left: 15px;
|
||
|
list-style-type: none;
|
||
|
}
|
||
|
.post .page-content ul li:before {
|
||
|
position: absolute;
|
||
|
font-weight: 600;
|
||
|
content: " · ";
|
||
|
margin: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
.post .page-content a {
|
||
|
color: #f66;
|
||
|
border-bottom: 2px solid transparent;
|
||
|
}
|
||
|
.post .page-content a:hover {
|
||
|
color: #f33;
|
||
|
border-bottom-color: #f33;
|
||
|
}
|
||
|
.post .page-content .highlight,
|
||
|
.post .page-content .highlight table {
|
||
|
margin: 0;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.post .page-content .highlight {
|
||
|
overflow-x: auto;
|
||
|
}
|
||
|
.post .page-content .highlight table,
|
||
|
.post .page-content .highlight tr,
|
||
|
.post .page-content .highlight td {
|
||
|
padding: 0;
|
||
|
border-collapse: collapse;
|
||
|
}
|
||
|
.post .page-content code {
|
||
|
font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
|
||
|
font-size: 13px;
|
||
|
background-color: #f6f6f6;
|
||
|
padding: 3px 10px;
|
||
|
margin: 0 5px;
|
||
|
border-radius: 2px;
|
||
|
}
|
||
|
.post .page-content pre {
|
||
|
font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
|
||
|
font-size: 13px;
|
||
|
overflow-x: auto;
|
||
|
text-align: left;
|
||
|
padding: 15px 25px;
|
||
|
background-color: #f6f6f6;
|
||
|
line-height: 1.5em;
|
||
|
}
|
||
|
.post .page-content .code pre {
|
||
|
border-top-right-radius: 2px;
|
||
|
border-bottom-right-radius: 2px;
|
||
|
}
|
||
|
.post .page-content .gutter pre {
|
||
|
padding: 15px 0 15px 15px;
|
||
|
color: #75715e;
|
||
|
border-top-left-radius: 2px;
|
||
|
border-bottom-left-radius: 2px;
|
||
|
}
|
||
|
.post .page-content blockquote {
|
||
|
margin: 2em 0;
|
||
|
padding-left: 30px;
|
||
|
border-left: 5px solid #e6e6e6;
|
||
|
}
|
||
|
.post .page-content blockquote p {
|
||
|
font-size: 17px;
|
||
|
font-style: italic;
|
||
|
line-height: 1.8em;
|
||
|
color: #999;
|
||
|
}
|
||
|
.post img {
|
||
|
display: block;
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
.blog-nav {
|
||
|
position: fixed;
|
||
|
bottom: 20px;
|
||
|
height: 20px;
|
||
|
line-height: 20px;
|
||
|
font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
|
||
|
font-size: 15px;
|
||
|
color: #999;
|
||
|
text-decoration: none;
|
||
|
cursor: pointer;
|
||
|
letter-spacing: 1px;
|
||
|
border-bottom: 3px solid transparent;
|
||
|
}
|
||
|
.blog-nav:hover {
|
||
|
color: #333;
|
||
|
border-bottom-color: #333;
|
||
|
}
|
||
|
#newer {
|
||
|
left: 40px;
|
||
|
}
|
||
|
#older {
|
||
|
right: 40px;
|
||
|
}
|
||
|
.show-comments {
|
||
|
font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.show-comments a {
|
||
|
color: #999;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.show-comments a:hover {
|
||
|
color: #666;
|
||
|
}
|
||
|
@media screen and (max-width: 900px) {
|
||
|
.post {
|
||
|
padding-bottom: 80px;
|
||
|
}
|
||
|
.blog-nav {
|
||
|
position: absolute;
|
||
|
bottom: 30px;
|
||
|
}
|
||
|
#newer {
|
||
|
left: 0;
|
||
|
}
|
||
|
#older {
|
||
|
right: 0;
|
||
|
}
|
||
|
}
|
||
|
@media screen and (max-width: 420px) {
|
||
|
.main {
|
||
|
margin-top: 32px;
|
||
|
}
|
||
|
.post h1 {
|
||
|
font-size: 24px;
|
||
|
margin: 0 0 30px;
|
||
|
}
|
||
|
.post h2 {
|
||
|
font-size: 20px;
|
||
|
margin: 30px 0 15px;
|
||
|
}
|
||
|
.post h3 {
|
||
|
font-size: 16px;
|
||
|
line-height: 1.3em;
|
||
|
}
|
||
|
.post .date {
|
||
|
font-size: 12px;
|
||
|
margin: 0 0 20px;
|
||
|
}
|
||
|
.post .page-content {
|
||
|
font-size: 15px;
|
||
|
}
|
||
|
.post .page-content pre {
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.post .page-content blockquote p {
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.blog-nav {
|
||
|
font-size: 14px;
|
||
|
color: #444;
|
||
|
}
|
||
|
}
|