364 lines
9.6 KiB
SCSS
364 lines
9.6 KiB
SCSS
/** Post **/
|
|
|
|
.post-warp {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 780px;
|
|
margin: 0 auto;
|
|
padding-top: 2rem;
|
|
|
|
.post-header h1 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 2em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.post-meta {
|
|
color: rgba(85, 85, 85, 0.52941) !important;
|
|
.dark-theme & {
|
|
color: $dark-font-secondary-color !important;
|
|
}
|
|
|
|
a {
|
|
color: $light-post-link-color;
|
|
.dark-theme & {
|
|
color: $dark-post-link-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-post-link-hover-color;
|
|
.dark-theme & {
|
|
color: $dark-post-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-content {
|
|
padding-top: 1rem;
|
|
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
padding-top: .8em;
|
|
padding-bottom: .3em;
|
|
}
|
|
h2::before {
|
|
content: "#";
|
|
margin-right: 5px;
|
|
color: $light-post-link-color;
|
|
.dark-theme & {
|
|
color: $dark-post-link-color;
|
|
}
|
|
}
|
|
|
|
h3::before {
|
|
content: "|";
|
|
margin-right: 5px;
|
|
color: $light-post-link-color;
|
|
|
|
.dark-theme & {
|
|
color: $dark-post-link-color;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $light-post-link-color;
|
|
.dark-theme & {
|
|
color: $dark-post-link-color;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
color: $light-post-link-hover-color;
|
|
.dark-theme &:hover {
|
|
color: $dark-post-link-hover-color;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
padding: 7px;
|
|
font-size: 13px;
|
|
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
code:not([class]) {
|
|
padding: 5px 5px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
|
|
.dark-theme &:not([class]) {
|
|
background: transparent;
|
|
box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
table {
|
|
max-width: 100%;
|
|
margin: 10px 0;
|
|
border-spacing: 0;
|
|
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
|
|
|
|
th,
|
|
td {
|
|
padding: 5px 15px;
|
|
border: 1px double #ebe9f5;
|
|
}
|
|
}
|
|
|
|
figure {
|
|
text-align: center;
|
|
img:hover{
|
|
cursor: zoom-in;
|
|
}
|
|
}
|
|
|
|
.image-caption:not(:empty) {
|
|
min-width: 20%;
|
|
max-width: 80%;
|
|
display: inline-block;
|
|
padding: 10px;
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
font-size: 14px;
|
|
color: #969696;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 80%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
img[data-action="zoom"] {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.featured_image {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
div.typeit-code {
|
|
padding: 6px;
|
|
font-size: 14px;
|
|
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
|
|
font-weight:bold;
|
|
word-break: break-all;
|
|
|
|
.k {
|
|
color: #D371E3;
|
|
}
|
|
|
|
.kt {
|
|
color: #D371E3;
|
|
}
|
|
|
|
.kc {
|
|
color: #D371E3;
|
|
}
|
|
|
|
.o {
|
|
color: #D371E3;
|
|
}
|
|
|
|
.n {
|
|
color: #ECBF6F;
|
|
}
|
|
|
|
.nf {
|
|
color: #F16473;
|
|
}
|
|
|
|
.na {
|
|
color: #41B1F5;
|
|
}
|
|
|
|
.s {
|
|
color: #8BC56F;
|
|
}
|
|
|
|
.n {
|
|
color: #DB975C;
|
|
}
|
|
|
|
.c1 {
|
|
color: #7E848F;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.space {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
.align-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.align-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 1em;
|
|
margin: .5em 0 .5em 0;
|
|
}
|
|
|
|
.post-copyright {
|
|
margin-top: 5rem;
|
|
border-top: 1px solid $light-border-color;
|
|
border-bottom: 1px solid $light-border-color;
|
|
|
|
.copyright-item {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.dark-theme & {
|
|
border-top: 1px solid $dark-border-color;
|
|
border-bottom: 1px solid $dark-border-color;
|
|
}
|
|
}
|
|
|
|
.post-tags {
|
|
padding: 1rem 0 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.post-nav {
|
|
|
|
&:before,
|
|
&:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
& a.prev,
|
|
& a.next {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
|
|
transition-property: transform;
|
|
transition-timing-function: ease-out;
|
|
transition-duration: 0.3s;
|
|
}
|
|
|
|
& a.prev {
|
|
float: left;
|
|
}
|
|
|
|
& a.prev:hover {
|
|
transform: translateX(-4px);
|
|
}
|
|
|
|
& a.next {
|
|
float: right;
|
|
}
|
|
& a.next:hover {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
|
|
.tag:not(:last-child) a::after {
|
|
content: " / ";
|
|
}
|
|
|
|
.post-comment {
|
|
padding: 3em 0;
|
|
}
|
|
}
|
|
|
|
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
|
|
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
|
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
|
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
|
|
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
/* Keyword */ .chroma .k { color: #ff79c6 }
|
|
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
|
|
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
|
|
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
|
|
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
|
|
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
|
|
/* KeywordType */ .chroma .kt { color: #8be9fd }
|
|
/* NameAttribute */ .chroma .na { color: #50fa7b }
|
|
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
|
|
/* NameClass */ .chroma .nc { color: #50fa7b }
|
|
/* NameFunction */ .chroma .nf { color: #50fa7b }
|
|
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
|
|
/* NameTag */ .chroma .nt { color: #ff79c6 }
|
|
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
|
|
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
|
|
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
|
|
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
|
|
/* LiteralString */ .chroma .s { color: #f1fa8c }
|
|
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
|
|
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
|
|
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
|
|
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
|
|
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
|
|
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
|
|
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
|
|
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
|
|
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
|
|
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
|
|
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
|
|
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
|
|
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
|
|
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
|
|
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
|
|
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
|
|
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
|
|
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
|
|
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
|
|
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
|
|
/* Operator */ .chroma .o { color: #ff79c6 }
|
|
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
|
|
/* Comment */ .chroma .c { color: #6272a4 }
|
|
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
|
|
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
|
|
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
|
|
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
|
|
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
|
|
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
|
|
/* GenericDeleted */ .chroma .gd { color: #8b080b }
|
|
/* GenericEmph */ .chroma .ge { text-decoration: underline }
|
|
/* GenericHeading */ .chroma .gh { font-weight: bold }
|
|
/* GenericInserted */ .chroma .gi { font-weight: bold }
|
|
/* GenericOutput */ .chroma .go { color: #44475a }
|
|
/* GenericSubheading */ .chroma .gu { font-weight: bold }
|
|
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|