crablog/templates/resources/style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*font: 300 1em/1.5 PingFangSC-Regular, Microsoft Yahei UI, Noto Sans CJK SC DemiLight, sans-serif;*/
    font-family: PingFangSC-Regular, Microsoft Yahei UI, Noto Sans CJK SC DemiLight, sans-serif;

}

html {
    font-size: 14px;

}

section.full-page {
    min-height: 80vh;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 5px 10px;
}

header {
    background-color: #FCFCFC;
    border-bottom: solid 1px #DDD;
    padding-top: 1rem;
}

header h1 {
    clear: both;
    font-size: 2.4rem;
    font-weight: 400;
    padding: 1rem 0;
    margin: 0;
}

header p {
    color: #A3ABB3;
    margin: 0;
    font-size: 1.2rem;

}

nav {
    padding: 1rem 0;
}

nav a:first-child {
    margin-left: 0;
}

nav a {
    font-size: 1.05rem;
    color: #dc1313;
    margin: 0 5px;
    /* font-size: .9rem; */
    text-decoration: none;
}

nav a:hover {
    border-bottom: 1px solid #dc1313;
}


section.article {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid #e5e5e5;
}

section.article p.mate {
    color: #A3ABB3;
    margin: 0;
    font-size: .9rem;
}

section.article p.mate a {
    color: #A3ABB3;
    margin: 0 5px;
    /* font-size: .9rem; */
    text-decoration: none;
}

section.article p.mate a:hover {
    color: #000;
    /* text-decoration: underline; */
    border-bottom: 1px solid #000;
}

section.article .title {
    font-size: 1.5em;
    margin-top: 0.5rem;
    text-transform: uppercase;
    color: #444;
    text-decoration: none;
    font-weight: 400;
    padding: 0;
}

section.article a.title:hover {
    border-bottom: 2px solid #dc1313
}

section.article section.desc {
    color: #555;
    margin-top: 1.5rem;
}

.single.article {
    padding: 3rem 0.25rem;
    margin: 0 auto;
}

.single.article > h2 {
    font-size: 2rem;
    margin-bottom: 3rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
    color: #444;
    text-decoration: none;
    font-weight: 400;
    padding: 0;
}

footer {
    margin: 2rem 0;
}

footer a {
    color: #dc1313;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


/*MARKDOWN*/
.yue {
    font: 300 15px/1.62 Georgia, "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
    color: #444443
}

.windows .yue {
    font-size: 1.2rem;
    font-family: Georgia, SimSun, sans-serif
}

.yue ::-moz-selection {
    background-color: rgba(0, 0, 0, .2)
}

.yue ::selection {
    background-color: rgba(0, 0, 0, .2)
}

.yue, .yue h1, .yue h2, .yue h3, .yue h4, .yue h5, .yue h6, .yue code, .yue blockquote, .yue em, .yue strong, .yue code {
    font-size: 1.2rem;
    line-height: 2rem;
    font-style: normal;
    font-family: Menlo, Monaco, "Droid Sans", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif
}

.yue h1, .yue h2, .yue h3, .yue h4, .yue h5, .yue h6, .yue code, .yue blockquote, .yue ol, .yue ul, .yue dl, .yue li, .yue p, .yue section, .yue header, .yue footer {
    float: none;
    margin: 0;
    padding: 0
}

.yue h1, .yue p, .yue ul, .yue dl, .yue ol, .yue blockquote {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.yue h1, .yue h2, .yue h3, .yue h4, .yue h5, .yue h6 {
    position: relative;
    margin-bottom: 1.5rem
}

.yue h1, .yue h2 {
    line-height: 1.5rem
}

.yue h1:before, .yue h2:before, .yue h3:before, .yue h4:before, .yue h5:before, .yue h6:before {
    display: inline;
    color: #d6d6d6;
}

@media screen and (min-width: 66rem) {
    .yue h1:before, .yue h2:before, .yue h3:before, .yue h4:before, .yue h5:before, .yue h6:before {
        display: block;
        position: absolute;
        transform: translateX(-100%);
        padding-right: 0.6rem
    }
}

.yue h1:before {
    content: "# "
}

.yue h2:before {
    content: "## "
}

.yue h3:before {
    content: "### "
}

.yue h4:before {
    content: "#### "
}

.yue h5:before {
    content: "##### "
}

.yue h6:before {
    content: "###### "
}

.yue p {
    margin-top: 0;
    margin-bottom: 1.46rem
}

.yue a {
    color: #dc1313;
    word-wrap: break-word;
    text-decoration: none;
    /*border-bottom: none*/
}

.yue a:hover {
    /*border-bottom: 1px solid #dc1313*/
    text-decoration: underline;
}

.yue h1 a, .yue h2 a, .yue h3 a {
    text-decoration: none
}

.yue b, .yue strong {
    font-weight: 700;
    color: #222223
}

.yue b:before, .yue strong:before {
    content: "**";
    color: #d6d6d6;
    margin-right: 0.1rem;
}

.yue b:after, .yue strong:after {
    content: "**";
    color: #d6d6d6;
    margin-left: 0.1rem;
}

.yue em, .yue i {
    font-style: italic;
    font-weight: 400;
    color: #222223
}

.yue em:before, .yue i:before {
    content: "*";
    color: #d6d6d6;
    margin-right: 0.1rem;
}

.yue em:after, .yue i:after {
    content: "*";
    color: #d6d6d6;
    margin-left: 0.1rem;
}

.yue img {
    max-width: 100%;
    height: auto;
    margin: .2em 0
}

.yue a img {
    border: none
}

.yue figure {
    position: relative;
    clear: both;
    outline: 0;
    margin: 10px 0 30px;
    padding: 0;
    min-height: 100px
}

.yue figure img {
    display: block;
    max-width: 100%;
    margin: auto auto 4px;
    box-sizing: border-box
}

.yue figure figcaption {
    position: relative;
    width: 100%;
    text-align: center;
    left: 0;
    margin-top: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #666665
}

.yue figure figcaption a {
    text-decoration: none;
    color: #666665
}

.yue hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: .8em;
    height: 10px
}

.yue blockquote {
    margin: 0 0 1.64em 0;
    border-left: 5px solid #dadada;
    padding-left: 12px
}
.yue blockquote p {
    color: #888;
}

.yue ol, .yue ul {
    margin: 0 0 24px 6px;
    padding-left: 16px
}

.yue ul {
    list-style-type: square
}

.yue ol {
    list-style-type: decimal
}

.yue li {
    margin-bottom: .2em
}

.yue li ol, .yue li ul {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 14px
}

.yue li ul {
    list-style-type: disc
}

.yue li ul ul {
    list-style-type: circle
}

.yue li p {
    margin: .4em 0 .6em
}

.yue .unstyled {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.yue code, .yue tt {
    padding: .2em 3px;
    margin: 0;
    font-size: 90%;
    background-color: rgba(0, 0, 0, .04);
    border-radius: 3px;
    word-break: break-all;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.yue pre {
    padding: 16px;
    overflow: auto;
    /*font-size: 95%;*/
    line-height: 1.45;
    background-color: #f7f7f7;
    border-radius: 3px
}

.yue pre code, .yue pre tt {
    color: #4c4c4c;
    border: none;
    background: 0 0;
    padding: 0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.yue table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1.5em;
    font-size: .96em;
    box-sizing: border-box
}

.yue td, .yue th {
    text-align: left;
    padding: 4px 8px 4px 10px;
    border: 1px solid #dadada
}

.yue td {
    vertical-align: top
}

.yue tr:nth-child(even) {
    background-color: #efefee
}

.yue iframe {
    display: block;
    max-width: 100%;
    margin-bottom: 30px
}

.yue figure iframe {
    margin: auto
}

.yue table pre {
    margin: 0;
    padding: 0;
    border: none;
    background: 0 0
}

@media (min-width: 1100px) {
    .yue blockquote {
        margin-left: 10px;
        padding-left: 20px;
        border-width: 5px
    }

    .yue blockquote blockquote {
        margin-left: 10px
    }
}

img {
    max-width: 100%;
}

/*CODE HIGHLIGHT*/

code[class*="language-"],
pre[class*="language-"] {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.token {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
    text-shadow: none;
    background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
    text-shadow: none;
    background: #b3d4fc;
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none;
    }
}

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #f7f7f7;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray;
}

.token.punctuation {
    color: #999;
}

.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #a67f59;
    background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a;
}

.token.function {
    color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
    color: #e90;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}