diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/_page/_single.scss | 28 | ||||
| -rw-r--r-- | assets/css/_partial/_single/_code.scss | 392 | ||||
| -rw-r--r-- | assets/css/_ublogger.scss | 40 |
3 files changed, 48 insertions, 412 deletions
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index 2af8059..50d3a10 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -4,6 +4,11 @@ .single > :first-child { margin-top: 0 !important; } + + .single > section:first-child > :first-child, + .single > article:first-child > :first-child { + margin-top: 0 !important; + } } .single { @@ -41,26 +46,14 @@ h2 { font-size: 1.6rem; - - & code { - font-size: 1.25rem; - } } h3 { font-size: 1.375rem; - - & code { - font-size: 1.125rem; - } } h4 { font-size: 1.25rem; - - & code { - font-size: 1rem; - } } h5 { @@ -77,6 +70,12 @@ [theme=dark] & { font-weight: bolder; } + + code { + background: #f5f2f0; + padding: .4rem; + border-radius: 3px; + } } h3, h4, h5, h6 { @@ -93,10 +92,6 @@ margin-bottom: 1.2rem; font-size: 2rem; margin-top: 7rem; - - code { - font-size: 90%; - } } h3 { @@ -277,7 +272,6 @@ } } - @import "../_partial/_single/code"; @import "../_partial/_single/instagram"; @import "../_partial/_single/admonition"; @import "../_partial/_single/echarts"; diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss deleted file mode 100644 index 38d70a0..0000000 --- a/assets/css/_partial/_single/_code.scss +++ /dev/null @@ -1,392 +0,0 @@ -code { - display:inline-block; - max-width: 100%; - padding: .1rem .4rem 0 .4rem;; - @include overflow-wrap(break-word); - @include line-break(anywhere); - font-size: $code-font-size; - font-family: $code-font-family; - color: $code-color; - border-radius: 3px; - - [theme=dark] & { - color: $code-color-dark; - } -} - -em { - code { - line-height: 1.8rem; - } -} - -pre { - margin: 0; - padding: .25rem 0 .25rem .5rem; - @include tab-size(4); - - code { - padding: 0; - } - - img { - min-height: 1em; - max-height: 1.2em; - vertical-align: text-bottom; - } -} - -code, pre, .highlight table, .highlight tr, .highlight td { - background: $code-background-color; - - [theme=dark] & { - background: $code-background-color-dark; - } -} - -.highlight, .gist { - font-family: $code-font-family; - font-size: $code-font-size; - - .table-wrapper { - > table, - > table thead, - > table tr, - > table td { - margin: 0; - padding: 5px; - border: none !important; - white-space: nowrap; - } - } -} - -.highlight { - line-height: 1.4em; - margin: $margin-article; - - > .chroma { - position: relative; - - .code-header { - display: flex; - justify-content: space-between; - align-items: center; - box-sizing: border-box; - width: 100%; - font-family: $global-font-family; - font-weight: bold; - color: $code-info-color; - background: darken($code-background-color, 8%); - border-radius: 6px; - transition-property: background-color, color; - transition-duration: 0.5s; - - &:hover { - cursor: pointer; - } - - .code-title { - width: 100%; - padding: .4rem; - } - - .code-title::after { - padding-left: .2rem; - content: 'Code'; - } - - @each $type, $text in $code-type-map { - &.#{$type} .code-title::after { - content: $text; - } - } - } - - .lntd:first-child { - min-width: 1.6rem; - text-align: right; - } - - .lntd:last-child { - width: 100%; - - pre { - @include max-content(min-width); - } - } - - .ln { - padding-right: .75rem; - } - - .hl { - display: block; - background-color: darken($code-background-color, 10%); - - [theme=dark] & { - background-color: darken($code-background-color-dark, 5%); - } - } - - .ln, .lnt { - color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - } - - .arrow { - padding: 0 .2rem; - @include transition(transform 0.2s ease); - } - - .ellipses { - padding: .4rem; - } - - .copy { - display: none; - padding: .4rem; - - &:hover { - cursor: pointer; - color: $global-link-hover-color; - - [theme=dark] & { - color: $global-link-hover-color-dark; - } - } - } - - .table-wrapper { - max-height: 0; - overflow-y: hidden; - border-radius: 0 0 6px 6px; - @include details-transition-open; - } - - &.open { - .code-header { - background: darken($code-background-color, 3%); - border-radius: 6px 6px 0 0; - - [theme=dark] & { - background: darken($code-background-color-dark, 3%); - } - } - - .table-wrapper { - max-height: $MAX_LENGTH; - @include details-transition-close; - } - - .arrow { - @include transform(rotate(90deg)); - } - - .ellipses { - display: none; - } - - .copy { - display: inline; - } - } - } - - /* Comment */ .c, - /* CommentHashbang */ .ch, - /* CommentMultiline */ .cm, - /* CommentSingle */ .c1, - /* CommentSpecial */ .cs, - /* CommentPreproc */ .cp, - /* CommentPreprocFile */ .cpf { font-style: italic } - /* GenericUnderline */ .gl { text-decoration: underline } - - @each $class, $color in $code-highlight-color-map { - .#{$class} { color: $color; } - } - - [theme=dark] & { - @each $class, $color in $code-highlight-color-map-dark { - .#{$class} { color: $color; } - } - } -} - -.gist { - .gist-file, .gist-data, .gist-meta { - border: none; - } - - .gist-meta { - padding: .4rem .8rem; - background-color: darken($code-background-color, 5%); - - @include link(false, false); - - [theme=dark] & { - background-color: darken($code-background-color-dark, 5%); - } - } - - [theme=dark] & { - // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css - .highlight { - background: #141414; - } - .blob-num, - .blob-code-inner, - .highlight, - .pl-enm, - .pl-ko, - .pl-mo, - .pl-mp1 .pl-sf, - .pl-ms, - .pl-pdc1, - .pl-scp, - .pl-smc, - .pl-som, - .pl-va, - .pl-vpf, - .pl-vpu, - .pl-mdr { - color: #aab1bf; - } - .pl-mb, - .pl-pdb { - font-weight: 700; - } - .pl-c, - .pl-c span, - .pl-pdc { - color: #5b6270; - font-style: italic; - } - .pl-sr .pl-cce { - color: #56b5c2; - font-weight: 400; - } - .pl-ef, - .pl-en, - .pl-enf, - .pl-eoai, - .pl-kos, - .pl-mh .pl-pdh, - .pl-mr { - color: #61afef; - } - .pl-ens, - .pl-vi { - color: #be5046; - } - .pl-enti, - .pl-mai .pl-sf, - .pl-ml, - .pl-sf, - .pl-sr, - .pl-sr .pl-sra, - .pl-src, - .pl-st, - .pl-vo { - color: #56b5c2; - } - .pl-eoi, - .pl-mri, - .pl-pds, - .pl-pse .pl-s1, - .pl-s, - .pl-s1 { - color: #97c279; - } - .pl-k, - .pl-kolp, - .pl-mc, - .pl-pde { - color: #c578dd; - } - .pl-mi, - .pl-pdi { - color: #c578dd; - font-style: italic; - } - .pl-mp, - .pl-stp { - color: #818896; - } - .pl-mdh, - .pl-mdi, - .pl-mdr { - font-weight: 400; - } - .pl-mdht, - .pl-mi1 { - color: #97c279; - background: #020; - } - .pl-md, - .pl-mdhf { - color: #df6b75; - background: #200; - } - .pl-corl { - color: #df6b75; - text-decoration: underline; - } - .pl-ib { - background: #df6b75; - } - .pl-ii { - background: #e0c184; - color: #fff; - } - .pl-iu { - background: #e05151; - } - .pl-ms1 { - color: #aab1bf; - background: #373b41; - } - .pl-c1, - .pl-cn, - .pl-e, - .pl-eoa, - .pl-eoac, - .pl-eoac .pl-pde, - .pl-kou, - .pl-mm, - .pl-mp .pl-s3, - .pl-mq, - .pl-s3, - .pl-sok, - .pl-sv, - .pl-mb { - color: #d19965; - } - .pl-enc, - .pl-entc, - .pl-pse .pl-s2, - .pl-s2, - .pl-sc, - .pl-smp, - .pl-sr .pl-sre, - .pl-stj, - .pl-v, - .pl-pdb { - color: #e4bf7a; - } - .pl-ent, - .pl-entl, - .pl-entm, - .pl-mh, - .pl-pdv, - .pl-smi, - .pl-sol, - .pl-mdh, - .pl-mdi { - color: #df6b75; - } - } -} diff --git a/assets/css/_ublogger.scss b/assets/css/_ublogger.scss index 996cd3b..e89fc45 100644 --- a/assets/css/_ublogger.scss +++ b/assets/css/_ublogger.scss @@ -79,7 +79,7 @@ body { } - .s { + .str { font-weight: bold; [theme=dark] & { @@ -87,7 +87,7 @@ body { } } - .m { + .marker-text { background: #fff3bc; font-style: inherit; padding: 4px 7px 6px; @@ -272,9 +272,16 @@ a.post-tag-summary { } .img-frame { + + margin-bottom: 1.5rem; + img { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } + + p { + margin: 0; + } } .list-smile { @@ -902,7 +909,7 @@ figure { margin-right: -60px; margin-left: -60px; - .code-header, .table-wrapper, .admonition { + pre, .table-wrapper, .admonition { border-radius: 0 !important; } @@ -1175,5 +1182,32 @@ figure { user-select: none; } +code:not([class*="language-"]) { + background: #f5f2f0; + padding: .4rem; + border-radius: 3px; + font-size: .9rem; + [theme=dark] & { + color: #161209; + } +} + +pre[class*="language-"] { + border-radius: 10px; +} + +code[class*="language-"], pre[class*="language-"] { + line-height: 1.4; + font-size: 1.05rem; + + marker { + background: rgba(242,201,76,0.35); + border-radius: 3px; + color: inherit; + margin: 1px 0; + padding: 3.2px 0; + } +} + @import "_partial/share-icon"; @import "ublogger_media";
\ No newline at end of file |