diff options
Diffstat (limited to 'themes/CodeIT/assets/css/_partial/_single')
10 files changed, 763 insertions, 0 deletions
diff --git a/themes/CodeIT/assets/css/_partial/_single/_admonition.scss b/themes/CodeIT/assets/css/_partial/_single/_admonition.scss new file mode 100644 index 0000000..074b547 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_admonition.scss @@ -0,0 +1,70 @@ +.admonition { + position: relative; + margin: 1rem 0; + padding: 0 0.75rem; + background-color: map-get($admonition-background-color-map, "note"); + border-left: 0.25rem solid map-get($admonition-color-map, "note"); + overflow: auto; + + .admonition-title { + font-weight: bold; + margin: 0 -0.75rem; + padding: 0.25rem 1.8rem; + border-bottom: 1px solid map-get($admonition-background-color-map, "note"); + background-color: opacify( + map-get($admonition-background-color-map, "note"), + 0.15 + ); + } + + &.open .admonition-title { + background-color: map-get($admonition-background-color-map, "note"); + } + + .admonition-content { + padding: 0.5rem 0; + } + + i.icon { + font-size: 0.85rem; + color: map-get($admonition-color-map, "note"); + position: absolute; + top: 0.6rem; + left: 0.4rem; + } + + i.details-icon { + position: absolute; + top: 0.6rem; + right: 0.3rem; + } + + @each $type, $color in $admonition-color-map { + &.#{$type} { + border-left-color: $color; + + i.icon { + color: $color; + } + } + } + + @each $type, $color in $admonition-background-color-map { + &.#{$type} { + background-color: $color; + + .admonition-title { + border-bottom-color: $color; + background-color: opacify($color, 0.15); + } + + &.open .admonition-title { + background-color: $color; + } + } + } + + &:last-child { + margin-bottom: 0.75rem; + } +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_bilibili.scss b/themes/CodeIT/assets/css/_partial/_single/_bilibili.scss new file mode 100644 index 0000000..6eef8e6 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_bilibili.scss @@ -0,0 +1,16 @@ +.bilibili { + position: relative; + width: 100%; + height: 0; + padding-bottom: 75%; + margin: 3% auto; + text-align: center; + + iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_code.scss b/themes/CodeIT/assets/css/_partial/_single/_code.scss new file mode 100644 index 0000000..0590bd3 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_code.scss @@ -0,0 +1,403 @@ +code { + display: inline-block; + max-width: 100%; + padding: 0 0.4rem; + @include overflow-wrap(break-word); + @include line-break(anywhere); + font-size: $code-font-size; + font-family: $code-font-family; + color: $code-color; + + [theme="dark"] & { + color: $code-color-dark; + } +} + +pre { + margin: 0; + padding: 0.25rem 0 0.25rem 0.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: 0; + border: none !important; + white-space: nowrap; + } + } +} + +.highlight { + line-height: 1.4em; + margin: 0.5rem 0; + + > .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%); + + [theme="dark"] & { + color: $code-info-color-dark; + background: darken($code-background-color-dark, 6%); + } + + &:hover { + cursor: pointer; + } + + .code-title { + width: 100%; + padding: 0.4rem; + } + + .code-title::after { + padding-left: 0.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: 0.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 0.2rem; + @include transition(transform 0.2s ease); + } + + .ellipses { + padding: 0.4rem; + } + + .copy { + display: none; + padding: 0.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; + @include details-transition-open; + } + + &.open { + .code-header { + background: darken($code-background-color, 3%); + + [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: 0.4rem 0.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/themes/CodeIT/assets/css/_partial/_single/_comment.scss b/themes/CodeIT/assets/css/_partial/_single/_comment.scss new file mode 100644 index 0000000..88899f6 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_comment.scss @@ -0,0 +1,3 @@ +#comments { + padding: 8rem 0 2rem; +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_echarts.scss b/themes/CodeIT/assets/css/_partial/_single/_echarts.scss new file mode 100644 index 0000000..12c5806 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_echarts.scss @@ -0,0 +1,4 @@ +.echarts { + margin: 0.5rem 0; + text-align: center; +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_footer.scss b/themes/CodeIT/assets/css/_partial/_single/_footer.scss new file mode 100644 index 0000000..6dc99b3 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_footer.scss @@ -0,0 +1,98 @@ +.post-footer { + margin-top: 3rem; + + .post-info { + border-bottom: 1px solid $global-border-color; + padding: 1rem 0 0.3rem; + + [theme="dark"] & { + border-bottom: 1px solid $global-border-color-dark; + } + + .post-info-line { + display: flex; + justify-content: space-between; + + .post-info-mod { + font-size: 0.8em; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + @include link(false, false); + } + + .post-info-license { + font-size: 0.8em; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + @include link(false, false); + } + + .post-info-md { + font-size: 0.8rem; + width: 8rem; + + @include link(false, false); + } + + .post-info-share { + a * { + vertical-align: text-bottom; + } + } + } + } + + .post-info-more { + padding: 0.3rem 0 1rem; + display: flex; + justify-content: space-between; + font-size: 0.9rem; + } + + .post-tags { + max-width: 65%; + + * { + display: inline; + } + } + + .post-nav { + &::before, + &::after { + content: " "; + display: table; + } + + & a.prev, + & a.next { + font-size: 1rem; + font-weight: 600; + @include transition(all 0.3s ease-out); + } + + & a.prev { + float: left; + } + + & a.prev:hover { + @include transform(translateX(-4px)); + } + + & a.next { + float: right; + } + + & a.next:hover { + @include transform(translateX(4px)); + } + } +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_instagram.scss b/themes/CodeIT/assets/css/_partial/_single/_instagram.scss new file mode 100644 index 0000000..9387e2d --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_instagram.scss @@ -0,0 +1,5 @@ +iframe.instagram-media { + [theme="dark"] & { + border: none !important; + } +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_mapbox.scss b/themes/CodeIT/assets/css/_partial/_single/_mapbox.scss new file mode 100644 index 0000000..6762e7e --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_mapbox.scss @@ -0,0 +1,4 @@ +.mapbox { + margin: 0.5rem 0; + padding: 0.5rem 0; +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_music.scss b/themes/CodeIT/assets/css/_partial/_single/_music.scss new file mode 100644 index 0000000..a4cf9c2 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_music.scss @@ -0,0 +1,3 @@ +meting-js { + margin: 0.5rem 0; +} diff --git a/themes/CodeIT/assets/css/_partial/_single/_toc.scss b/themes/CodeIT/assets/css/_partial/_single/_toc.scss new file mode 100644 index 0000000..88b32a4 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_single/_toc.scss @@ -0,0 +1,157 @@ +.toc { + .toc-title { + font-size: $toc-title-font-size; + font-weight: bold; + text-transform: uppercase; + } + + .toc-content { + font-size: $toc-content-font-size; + + ul { + text-indent: -0.85rem; + padding-left: 0.8rem; + list-style: none; + + a:first-child::before { + content: "|"; + font-weight: bolder; + margin-right: 0.5rem; + color: $single-link-color; + + [theme="dark"] & { + color: $single-link-color-dark; + } + } + + ul { + padding-left: 1.5rem; + } + } + } + + ruby { + background: $code-background-color; + + rt { + color: $global-font-secondary-color; + } + + [theme="dark"] & { + background: $code-background-color-dark; + + rt { + color: $global-font-secondary-color-dark; + } + } + } +} + +#toc-auto { + display: block; + position: absolute; + width: $MAX_LENGTH; + max-width: 0; + padding: 0 0.8rem; + border-left: 4px solid $global-border-color; + @include overflow-wrap(break-word); + box-sizing: border-box; + top: 10rem; + left: 0; + visibility: hidden; + + [header-desktop="normal"] & { + top: 5rem; + } + + @include blur; + + [theme="dark"] & { + border-left-color: $global-border-color-dark; + } + + .toc-title { + margin: 0.8rem 0; + } + + .toc-content { + &.always-active ul { + display: block; + } + + > nav > ul { + margin: 0.625rem 0; + } + + ul { + ul { + display: none; + } + + .has-active > ul { + display: block; + } + } + + a.active { + font-weight: bold; + color: $single-link-color; + + [theme="dark"] & { + color: $single-link-color-dark; + } + + &::before { + color: $single-link-hover-color; + + [theme="dark"] & { + color: $single-link-hover-color-dark; + } + } + } + } +} + +#toc-static { + display: none; + margin: 0.8rem 0; + + &[kept="true"] { + display: block; + } + + .toc-title { + display: flex; + justify-content: space-between; + line-height: 2em; + padding: 0 0.75rem; + background: darken($code-background-color, 6%); + + [theme="dark"] & { + background: darken($code-background-color-dark, 6%); + } + } + + .toc-content { + background-color: $code-background-color; + + > nav > ul { + margin: 0; + padding: 0.4rem 1rem 0.4rem 1.8rem; + } + + [theme="dark"] & { + background-color: $code-background-color-dark; + } + } + + &.open { + .toc-title { + background: darken($code-background-color, 3%); + + [theme="dark"] & { + background: darken($code-background-color-dark, 3%); + } + } + } +} |