mirror of https://github.com/jkjoy/sunpeiwen.git
440 lines
6.9 KiB
SCSS
440 lines
6.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: #6af;
|
|
}
|
|
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 .highlight,
|
|
.post .highlight table {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.post .highlight {
|
|
overflow-x: auto;
|
|
margin: 10px 0;
|
|
}
|
|
.post .highlight table,
|
|
.post .highlight tr,
|
|
.post .highlight td {
|
|
padding: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
.post code {
|
|
font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
|
|
font-size: 13px;
|
|
background-color: #f6f6f6;
|
|
padding: 3px 10px;
|
|
margin: 0 5px;
|
|
border-radius: 2px;
|
|
}
|
|
.post 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 .code pre {
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
.post .gutter pre {
|
|
padding: 15px 0 15px 15px;
|
|
color: #75715e;
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
.post blockquote {
|
|
margin: 2em 0;
|
|
padding-left: 30px;
|
|
border-left: 5px solid #e6e6e6;
|
|
}
|
|
.post blockquote p {
|
|
font-size: 17px;
|
|
font-style: italic;
|
|
line-height: 1.8em;
|
|
color: #999;
|
|
}
|
|
|
|
|
|
.post .highlight:before {
|
|
color: #6b7f94;
|
|
opacity: .3;
|
|
content: attr(data-lang);
|
|
font-size: 1.9em;
|
|
font-weight: 700;
|
|
position: absolute;
|
|
right: .3rem;
|
|
}
|
|
|
|
// Post wrapper
|
|
.wrapper .post {
|
|
@include media-query($on-mobile) {
|
|
padding-left: $spacing-half;
|
|
padding-right: $spacing-half;
|
|
}
|
|
}
|
|
|
|
// Post title
|
|
.header {
|
|
margin-top: 7.8em;
|
|
margin-bottom: 3em;
|
|
|
|
.tags {
|
|
margin-left: 3px;
|
|
letter-spacing: 0.5px;
|
|
|
|
.tag {
|
|
font-weight: $bold-weight;
|
|
font-size: $small-font-size - 2;
|
|
margin-right: 0.5rem;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-title {
|
|
position: relative;
|
|
font-size: 2em;
|
|
line-height: 1.2;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
&:not(.header-title.center)::before{
|
|
content: '';
|
|
border-left: 5px solid #f66;
|
|
position: absolute;
|
|
left: -15px;
|
|
height: 75%;
|
|
top: 12%;
|
|
}
|
|
|
|
&.center {
|
|
text-align: center;
|
|
}
|
|
|
|
@include media-query($on-mobile) {
|
|
font-size: 1.9em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Post meta
|
|
.post-meta {
|
|
padding-top: 3px;
|
|
line-height: 1.3;
|
|
color: $gray;
|
|
|
|
time {
|
|
position: relative;
|
|
margin-right: 1.5em;
|
|
|
|
&::after {
|
|
background: $light;
|
|
bottom: 1px;
|
|
content: " ";
|
|
height: 2px;
|
|
position: absolute;
|
|
right: -20px;
|
|
width: 12px;
|
|
}
|
|
}
|
|
|
|
span[itemprop="author"] {
|
|
border-bottom: 1px dotted $light;
|
|
}
|
|
}
|
|
|
|
// page-content
|
|
.post{
|
|
padding-top: 8px;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
|
|
iframe {
|
|
text-align: center;
|
|
}
|
|
|
|
figure {
|
|
img {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: 5px;
|
|
font-style: italic;
|
|
font-size: $small-font-size;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $text-link-blue;
|
|
word-break: break-word;
|
|
text-decoration: none;
|
|
border-bottom: 2px solid transparent;
|
|
|
|
&:hover {
|
|
color: #f33;
|
|
border-bottom-color: #f33;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-link-blue;
|
|
}
|
|
}
|
|
|
|
> p {
|
|
margin: 0;
|
|
padding-top: $spacing-full - 15;
|
|
padding-bottom: $spacing-full - 15;
|
|
}
|
|
|
|
ul.task-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li::before {
|
|
content: "";
|
|
}
|
|
|
|
li input[type="checkbox"] {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
dl dt {
|
|
font-weight: $bold-weight;
|
|
}
|
|
|
|
.post
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: $black;
|
|
font-weight: $bold-weight;
|
|
margin-top: $spacing-full;
|
|
margin-bottom: 0;
|
|
|
|
&:hover {
|
|
.headerlink {
|
|
color: $text-link-blue;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.headerlink {
|
|
position: relative;
|
|
opacity: 0;
|
|
outline: none;
|
|
|
|
&::before {
|
|
content: "#";
|
|
position: absolute;
|
|
right: -3px;
|
|
width: 1em;
|
|
font-weight: $bold-weight;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@include relative-font-size(1.5);
|
|
}
|
|
|
|
h2 {
|
|
@include relative-font-size(1.375);
|
|
}
|
|
|
|
h3 {
|
|
@include relative-font-size(1.25);
|
|
border-bottom: 1px solid $light;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
h4 {
|
|
@include relative-font-size(1.25);
|
|
}
|
|
|
|
h5 {
|
|
@include relative-font-size(1);
|
|
}
|
|
|
|
h6 {
|
|
@include relative-font-size(0.875);
|
|
}
|
|
}
|
|
|
|
.post-nav {
|
|
display: flex;
|
|
position: relative;
|
|
margin-top: 5em;
|
|
border-top: 1px solid $light;
|
|
line-height: 1.4;
|
|
|
|
.post-nav-item {
|
|
border-bottom: 0;
|
|
font-weight: $bold-weight;
|
|
padding-bottom: 10px;
|
|
|
|
.post-title {
|
|
color: $black;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.post-title {
|
|
color: $text-link-blue-active;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.nav-arrow {
|
|
font-weight: $normal-weight;
|
|
font-size: $small-font-size;
|
|
color: $gray;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
width: 50%;
|
|
padding-top: 10px;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
|
|
&:nth-child(odd) {
|
|
padding-left: 0;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
text-align: right;
|
|
padding-right: 0;
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
@include media-query($on-mobile) {
|
|
font-size: $small-font-size;
|
|
|
|
.post-nav-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.post-nav-item:nth-child(even) {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
border-top: 1px solid $light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags-container a {
|
|
padding: 5px 10px;
|
|
background-color: #f6f8fa;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.dis {
|
|
margin-top: 5em;
|
|
}
|
|
|
|
.dis .btn {
|
|
display: block;
|
|
padding: 10px;
|
|
background-color: #f6f8fa;
|
|
text-align: center;
|
|
&:hover {
|
|
background-color: #f66;
|
|
color: #fff;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
|
cursor: pointer;
|
|
}
|
|
} |