diff options
Diffstat (limited to 'themes/CodeIT/assets/css')
38 files changed, 2853 insertions, 0 deletions
diff --git a/themes/CodeIT/assets/css/_core/_base.scss b/themes/CodeIT/assets/css/_core/_base.scss new file mode 100644 index 0000000..510a103 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_base.scss @@ -0,0 +1,55 @@ +html { + font-family: $global-font-family; + font-weight: $global-font-weight; + font-display: swap; + font-size: $global-font-size; + line-height: $global-line-height; + width: 100%; +} + +/* scrollbar, only support webkit */ +::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; +} + +::-webkit-scrollbar-thumb { + background-color: $scrollbar-color; + + &:hover { + background-color: $scrollbar-hover-color; + } +} + +::selection { + background-color: $selection-color; + + [theme="dark"] & { + background-color: $selection-color-dark; + } +} + +body { + background-color: $global-background-color; + color: $global-font-color; + @include overflow-wrap(break-word); + scrollbar-color: auto; + + &[theme="dark"] { + color: $global-font-color-dark; + background-color: $global-background-color-dark; + } +} + +@include ms; +@include link(true, true); + +@import "../_partial/mask"; +@import "../_partial/icon"; +@import "../_partial/details"; +@import "../_partial/fixed-button"; +@import "../_partial/cookieconsent"; + +img { + @include object-fit(contain); +} diff --git a/themes/CodeIT/assets/css/_core/_layout.scss b/themes/CodeIT/assets/css/_core/_layout.scss new file mode 100644 index 0000000..154f3a6 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_layout.scss @@ -0,0 +1,15 @@ +/** Layout **/ +.wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + width: 100%; + + main { + flex: 1 0 auto; + + .container { + padding: 0 1rem; + } + } +} diff --git a/themes/CodeIT/assets/css/_core/_media.scss b/themes/CodeIT/assets/css/_core/_media.scss new file mode 100644 index 0000000..047fda5 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_media.scss @@ -0,0 +1,80 @@ +@media only screen and (max-width: 1440px) { + .page { + width: 56%; + } +} + +@media only screen and (max-width: 1200px) { + .page { + width: 52%; + } + + #header-desktop .header-wrapper { + padding-right: 1rem; + } + + .search-dropdown.desktop { + right: 1rem; + } +} + +@media only screen and (max-width: 960px) { + #toc-auto { + display: none; + } + + #toc-static { + display: block; + } + + .page { + width: 80%; + } + + #header-desktop .header-wrapper { + padding-left: 1rem; + } +} + +@media only screen and (max-width: 680px) { + #header-desktop { + display: none; + } + + #header-mobile { + display: block; + } + + body.blur { + overflow: hidden; + } + + .page { + width: 100%; + + [header-mobile] & { + padding-top: $header-height; + } + + [header-mobile="normal"] & { + padding-top: 0; + } + + .categories-card { + .card-item { + width: 100%; + } + } + } + + .copyright { + .copyright-line { + .icp-splitter { + display: none; + } + .icp-br { + display: block; + } + } + } +} diff --git a/themes/CodeIT/assets/css/_custom.scss b/themes/CodeIT/assets/css/_custom.scss new file mode 100644 index 0000000..37edf90 --- /dev/null +++ b/themes/CodeIT/assets/css/_custom.scss @@ -0,0 +1,4 @@ +// ============================== +// Custom style +// 自定义样式 +// ============================== diff --git a/themes/CodeIT/assets/css/_mixin/_blur.scss b/themes/CodeIT/assets/css/_mixin/_blur.scss new file mode 100644 index 0000000..d68ac17 --- /dev/null +++ b/themes/CodeIT/assets/css/_mixin/_blur.scss @@ -0,0 +1,5 @@ +@mixin blur { + .blur & { + @include filter(blur(1.5px)); + } +} diff --git a/themes/CodeIT/assets/css/_mixin/_compatibility.scss b/themes/CodeIT/assets/css/_mixin/_compatibility.scss new file mode 100644 index 0000000..5f4d403 --- /dev/null +++ b/themes/CodeIT/assets/css/_mixin/_compatibility.scss @@ -0,0 +1,110 @@ +@mixin border-radius($value) { + -webkit-border-radius: $value; + -moz-border-radius: $value; + border-radius: $value; +} + +@mixin box-shadow($values...) { + -webkit-box-shadow: $values; + box-shadow: $values; +} + +@mixin transition($values...) { + -webkit-transition: $values; + -moz-transition: $values; + -o-transition: $values; + transition: $values; +} + +@mixin transform($value) { + -webkit-transform: $value; + -moz-transform: $value; + -ms-transform: $value; + -o-transform: $value; + transform: $value; +} + +@mixin filter($value) { + -webkit-filter: $value; + -moz-filter: $value; + -ms-filter: $value; + filter: $value; +} + +@mixin flex($value) { + -webkit-flex: $value; + flex: $value; +} + +@mixin box($orient) { + display: -moz-box; + display: -webkit-box; + display: box; + + -webkit-box-orient: $orient; + -moz-box-orient: $orient; + box-orient: $orient; +} + +@mixin placeholder($color) { + input::-webkit-input-placeholder { + color: $color; + } + + input:-moz-placeholder { + color: $color; + } + + input::-moz-placeholder { + color: $color; + } + + input:-ms-input-placeholder { + color: $color; + } + + input::placeholder { + color: $color; + } +} + +@mixin max-content($property) { + #{$property}: -webkit-max-content; + #{$property}: -moz-max-content; + #{$property}: intrinsic; + #{$property}: max-content; +} + +@mixin tab-size($value) { + -moz-tab-size: $value; + -o-tab-size: $value; + tab-size: $value; +} + +@mixin appearance($value) { + -moz-appearance: $value; + -webkit-appearance: $value; +} + +@mixin overflow-wrap($value) { + word-wrap: $value; + overflow-wrap: $value; +} + +@mixin line-break($value) { + -webkit-line-break: $value; + -ms-line-break: $value; + line-break: $value; +} + +@mixin ms { + input::-ms-clear { + display: none; + } +} + +@mixin object-fit($value) { + -o-object-fit: $value; + object-fit: $value; + font-family: "object-fit: #{$value};"; +} diff --git a/themes/CodeIT/assets/css/_mixin/_details.scss b/themes/CodeIT/assets/css/_mixin/_details.scss new file mode 100644 index 0000000..218e6af --- /dev/null +++ b/themes/CodeIT/assets/css/_mixin/_details.scss @@ -0,0 +1,7 @@ +@mixin details-transition-open { + @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s); +} + +@mixin details-transition-close { + @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s); +} diff --git a/themes/CodeIT/assets/css/_mixin/_index.scss b/themes/CodeIT/assets/css/_mixin/_index.scss new file mode 100644 index 0000000..3c35521 --- /dev/null +++ b/themes/CodeIT/assets/css/_mixin/_index.scss @@ -0,0 +1,4 @@ +@import "_compatibility"; +@import "_link"; +@import "_blur"; +@import "_details"; diff --git a/themes/CodeIT/assets/css/_mixin/_link.scss b/themes/CodeIT/assets/css/_mixin/_link.scss new file mode 100644 index 0000000..7a97d01 --- /dev/null +++ b/themes/CodeIT/assets/css/_mixin/_link.scss @@ -0,0 +1,26 @@ +@mixin link($light, $dark) { + a, + a::before, + a::after { + text-decoration: none; + + color: if($light, $global-link-color, $single-link-color); + + [theme="dark"] & { + color: if($dark, $global-link-color-dark, $single-link-color-dark); + } + } + + a:active, + a:hover { + color: if($light, $global-link-hover-color, $single-link-hover-color); + + [theme="dark"] & { + color: if( + $dark, + $global-link-hover-color-dark, + $single-link-hover-color-dark + ); + } + } +} diff --git a/themes/CodeIT/assets/css/_override.scss b/themes/CodeIT/assets/css/_override.scss new file mode 100644 index 0000000..c37b4ec --- /dev/null +++ b/themes/CodeIT/assets/css/_override.scss @@ -0,0 +1,4 @@ +// ============================== +// Override Variables +// 覆盖变量 +// ============================== diff --git a/themes/CodeIT/assets/css/_page/_404.scss b/themes/CodeIT/assets/css/_page/_404.scss new file mode 100644 index 0000000..774c7dd --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_404.scss @@ -0,0 +1,6 @@ +#content-404 { + font-size: 1.8rem; + line-height: 3rem; + @include transform(translateY(30vh)); + text-align: center; +} diff --git a/themes/CodeIT/assets/css/_page/_archive.scss b/themes/CodeIT/assets/css/_page/_archive.scss new file mode 100644 index 0000000..2b8f466 --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_archive.scss @@ -0,0 +1,13 @@ +.archive { + .single-title { + text-align: right; + } + + .group-title { + margin-top: 1.5rem; + margin-bottom: 1rem; + } + + @import "../_partial/_archive/terms"; + @import "../_partial/_archive/tags"; +} diff --git a/themes/CodeIT/assets/css/_page/_home.scss b/themes/CodeIT/assets/css/_page/_home.scss new file mode 100644 index 0000000..c7b9021 --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_home.scss @@ -0,0 +1,183 @@ +.home { + .home-profile { + @include transform(translateY(16vh)); + padding: 0 0 0.5rem; + text-align: center; + + .home-avatar { + padding: 0.5rem; + + img { + display: inline-block; + width: 8rem; + height: auto; + margin: 0 auto; + @include border-radius(100%); + @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05)); + @include transition(all 0.4s ease); + + &:hover { + position: relative; + @include transform(translateY(-0.75rem)); + } + } + } + + .home-title { + font-size: 1.25rem; + font-weight: bold; + margin: 0; + padding: 0.5rem; + } + + .home-subtitle { + font-size: 1rem; + font-weight: normal; + margin: 0; + padding: 0.5rem; + } + + .links { + padding: 0.5rem; + font-size: 1.5rem; + + a * { + vertical-align: text-bottom; + } + + img { + height: 1.5rem; + padding: 0 0.25rem; + } + } + + .home-disclaimer { + font-size: 1rem; + line-height: 1.5rem; + font-weight: normal; + margin: 0; + padding: 0.5rem; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + } +} + +.home[posts] { + .home-profile { + @include transform(translateY(0)); + padding-top: 2rem; + } + + .home-avatar img { + width: 6rem; + } + + .summary { + padding-top: 1rem; + padding-bottom: 0.8rem; + color: $global-font-color; + border-bottom: 1px dashed $global-border-color; + + [theme="dark"] & { + color: $global-font-color-dark; + border-bottom: 1px dashed $global-border-color-dark; + } + + .featured-image-preview { + width: 100%; + padding: 30% 0 0; + position: relative; + margin: 0.6rem auto; + @include transition(transform 0.4s ease); + + img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + @include object-fit(none); + } + + img.lazyloaded { + @include object-fit(cover); + } + + &:hover { + @include transform(scale(1.01)); + } + } + + .single-title { + font-size: 1.25rem; + line-height: 140%; + margin: 0.4rem 0; + } + + .content { + @include box(vertical); + -webkit-line-clamp: 3; + margin-top: 0.3rem; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + @include overflow-wrap(break-word); + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + h2, + h3, + h4, + h5, + h6, + p { + font-size: 1rem; + line-height: 1.5; + display: inline; + + &::after { + content: "\A"; + white-space: pre; + } + } + + h2 { + font-size: 1.125rem; + } + + @include link(false, true); + + b, + strong { + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + } + + .post-footer { + margin-top: 0.4rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.875rem; + + @include link(false, false); + + .post-tags { + padding: 0; + + @include link(true, true); + } + } + } +} diff --git a/themes/CodeIT/assets/css/_page/_index.scss b/themes/CodeIT/assets/css/_page/_index.scss new file mode 100644 index 0000000..480667c --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_index.scss @@ -0,0 +1,22 @@ +.page { + position: relative; + max-width: 800px; + width: 60%; + margin: 0 auto; + + [header-desktop] & { + padding-top: $header-height; + } + + [header-desktop="normal"] & { + padding-top: 0; + } + + @include blur; +} + +@import "_single"; +@import "_special"; +@import "_archive"; +@import "_home"; +@import "_404"; diff --git a/themes/CodeIT/assets/css/_page/_single.scss b/themes/CodeIT/assets/css/_page/_single.scss new file mode 100644 index 0000000..d425774 --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_single.scss @@ -0,0 +1,336 @@ +@import "../_partial/_single/toc"; + +.single { + .single-title { + margin: 1rem 0 0.5rem; + font-size: 1.6rem; + font-weight: bold; + line-height: 140%; + } + + .single-subtitle { + margin: 0.4rem 0; + font-size: 1.2rem; + font-weight: normal; + font-style: italic; + line-height: 100%; + } + + .post-meta { + font-size: 0.875rem; + color: $global-font-secondary-color; + + span { + display: inline-block; + } + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + @include link(false, true); + + .author { + font-size: 1.05rem; + } + } + + .featured-image { + margin: 0.5rem 0 1rem 0; + + img { + display: block; + max-width: 100%; + height: auto; + margin: 0 auto; + overflow: hidden; + } + + img.lazyloaded { + width: 100%; + } + } + + .content { + > h2 { + font-size: 1.5rem; + + & 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 { + font-size: 1.125rem; + } + + > h6 { + font-size: 1rem; + } + + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + margin: 1.2rem 0; + + [theme="dark"] & { + font-weight: bolder; + } + } + + > h2, + > h3, + > h4, + > h5, + > h6 { + > .header-mark::before { + content: "|"; + margin-right: 0.3125rem; + color: $single-link-color; + + [theme="dark"] & { + color: $single-link-color-dark; + } + } + } + + > h2 > .header-mark::before { + content: "#"; + } + + p { + margin: 0.5rem 0; + } + + b, + strong { + font-weight: bold; + + [theme="dark"] & { + color: #ddd; + } + } + + @include link(false, false); + + a { + @include overflow-wrap(break-word); + + [theme="dark"] & b, + [theme="dark"] & strong { + color: $single-link-color-dark; + } + } + + [theme="dark"] a:hover b, + [theme="dark"] a:hover strong { + color: $single-link-hover-color-dark; + } + + ul, + ol { + margin: 0.5rem 0; + padding-left: 2.5rem; + } + + ul { + list-style-type: disc; + } + + 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; + } + } + } + + .table-wrapper { + overflow-x: auto; + + &::-webkit-scrollbar { + background-color: $table-background-color; + + [theme="dark"] & { + background-color: $table-background-color-dark; + } + } + + > table { + width: 100%; + max-width: 100%; + margin: 0.625rem 0; + border-spacing: 0; + background: $table-background-color; + border-collapse: collapse; + + [theme="dark"] & { + background: $table-background-color-dark; + } + + thead { + background: $table-thead-color; + + [theme="dark"] & { + background-color: $table-thead-color-dark; + } + } + + th, + td { + padding: 0.3rem 1rem; + border: 1px solid darken($table-thead-color, 2%); + + [theme="dark"] & { + border-color: darken($table-thead-color-dark, 2%); + } + } + } + } + + img { + max-width: 100%; + min-height: 1em; + } + + figure { + margin: 0.5rem; + text-align: center; + + .image-caption:not(:empty) { + min-width: 20%; + max-width: 80%; + display: inline-block; + padding: 0.5rem; + margin: 0 auto; + font-size: 0.875rem; + color: #969696; + } + + img { + display: block; + height: auto; + margin: 0 auto; + overflow: hidden; + } + } + + .lazyloading { + @include object-fit(none); + } + + blockquote { + display: block; + border-left: 0.5rem solid $blockquote-color; + background-color: rgba($blockquote-color, 0.2); + padding: 0.25rem 0.75rem; + margin: 1rem 0; + + [theme="dark"] & { + border-left-color: $blockquote-color-dark; + background-color: rgba($blockquote-color-dark, 0.2); + } + } + + .footnotes { + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + p { + margin: 0.25rem 0; + } + } + + @import "../_partial/_single/code"; + @import "../_partial/_single/instagram"; + @import "../_partial/_single/admonition"; + @import "../_partial/_single/echarts"; + @import "../_partial/_single/mapbox"; + @import "../_partial/_single/music"; + @import "../_partial/_single/bilibili"; + + hr { + margin: 1rem 0; + position: relative; + border-top: 1px dashed $global-border-color; + border-bottom: none; + + [theme="dark"] & { + border-top: 1px dashed $global-border-color-dark; + } + } + + kbd { + display: inline-block; + padding: 0.25rem; + background-color: $global-background-color; + border: 1px solid $global-border-color; + border-bottom-color: $global-border-color; + @include border-radius(3px); + @include box-shadow(inset 0 -1px 0 $global-border-color); + font-size: 0.8rem; + font-family: $code-font-family; + color: $code-color; + + [theme="dark"] & { + background-color: $global-background-color-dark; + border: 1px solid $global-border-color-dark; + border-bottom-color: $global-border-color-dark; + @include box-shadow(inset 0 -1px 0 $global-border-color-dark); + color: $code-color-dark; + } + } + + .typeit { + .code { + padding: 0.375rem; + font-size: 0.875rem; + font-family: $code-font-family; + font-weight: bold; + word-break: break-all; + } + } + + .version { + height: 1.25em; + vertical-align: text-bottom; + } + } + + @import "../_partial/_single/footer"; + @import "../_partial/_single/comment"; +} + +.lg-toolbar .lg-icon::after { + color: #999; +} diff --git a/themes/CodeIT/assets/css/_page/_special.scss b/themes/CodeIT/assets/css/_page/_special.scss new file mode 100644 index 0000000..3a8f18d --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_special.scss @@ -0,0 +1,6 @@ +.special { + .single-title, + .single-subtitle { + text-align: right; + } +} diff --git a/themes/CodeIT/assets/css/_partial/_archive/_tags.scss b/themes/CodeIT/assets/css/_partial/_archive/_tags.scss new file mode 100644 index 0000000..1c1de3f --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_archive/_tags.scss @@ -0,0 +1,27 @@ +.tag-cloud-tags { + margin: 10px 0; + + @include link(true, true); + + a { + display: inline-block; + position: relative; + margin: 5px 10px; + @include overflow-wrap(break-word); + @include transition(all ease-out 0.3s); + + &:active, + &:focus, + &:hover { + @include transform(scale(1.2)); + } + + sup { + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + } +} diff --git a/themes/CodeIT/assets/css/_partial/_archive/_terms.scss b/themes/CodeIT/assets/css/_partial/_archive/_terms.scss new file mode 100644 index 0000000..c171bdd --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_archive/_terms.scss @@ -0,0 +1,82 @@ +.categories-card { + margin: 0 auto; + margin-top: 3rem; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + line-height: 1.6rem; + + .card-item { + font-size: 0.875rem; + text-align: left; + width: 45%; + display: flex; + align-items: flex-start; + margin-top: 2rem; + min-height: 10rem; + padding: 0 2%; + position: relative; + + .card-item-wrapper { + width: 100%; + overflow: hidden; + + .card-item-title { + font-size: 1.2rem; + font-weight: bold; + display: inline-block; + margin-top: 1rem; + margin-bottom: 0.75rem; + } + + span { + float: right; + padding-right: 1rem; + } + } + } +} + +.archive-item { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + margin: 0.25rem 0 0.25rem 1.5rem; +} + +.archive-item-link { + min-width: 10%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + &:hover { + color: $global-link-hover-color; + background-color: transparent; + } + + [theme="dark"] & { + color: $global-link-color-dark; + + &:hover { + color: $global-link-hover-color-dark; + } + } +} + +.archive-item-date { + width: 4em; + text-align: right; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } +} + +.more-post { + text-align: right; +} diff --git a/themes/CodeIT/assets/css/_partial/_cookieconsent.scss b/themes/CodeIT/assets/css/_partial/_cookieconsent.scss new file mode 100644 index 0000000..1e47696 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_cookieconsent.scss @@ -0,0 +1,19 @@ +.cc-window.cc-banner { + .cc-btn { + color: $global-font-color; + + &:hover, + &:focus { + background-color: #ccc; + } + + [theme="dark"] & { + color: $global-font-color; + + &:hover, + &:focus { + background-color: #fff; + } + } + } +} diff --git a/themes/CodeIT/assets/css/_partial/_details.scss b/themes/CodeIT/assets/css/_partial/_details.scss new file mode 100644 index 0000000..cdb7112 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_details.scss @@ -0,0 +1,33 @@ +.details { + .details-summary { + &:hover { + cursor: pointer; + } + } + + i.details-icon { + color: $global-font-secondary-color; + @include transition(transform 0.2s ease); + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + + .details-content { + max-height: 0; + overflow-y: hidden; + @include details-transition-open; + } + + &.open { + i.details-icon { + @include transform(rotate(90deg)); + } + + .details-content { + max-height: $MAX_LENGTH; + @include details-transition-close; + } + } +} diff --git a/themes/CodeIT/assets/css/_partial/_fixed-button.scss b/themes/CodeIT/assets/css/_partial/_fixed-button.scss new file mode 100644 index 0000000..3a48bca --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_fixed-button.scss @@ -0,0 +1,50 @@ +#fixed-buttons { + display: none; +} + +.fixed-button { + display: none; + z-index: 100; + position: fixed; + right: 1.5rem; + font-size: 1rem; + line-height: 1.3rem; + padding: 0.6rem 0.6rem; + color: $global-font-secondary-color; + background: $header-background-color; + @include border-radius(2rem); + @include transition(color 0.4s ease); + + @include blur; + + &:hover, + &:active { + color: $global-font-color; + cursor: pointer; + } + + &:active, + &:focus, + &:hover { + outline: none; + } + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + background: $header-background-color-dark; + + &:hover, + &:active { + color: $global-font-color-dark; + } + } +} + +#back-to-top { + display: block; + bottom: 1.5rem; +} + +#view-comments { + bottom: 4.5rem; +} diff --git a/themes/CodeIT/assets/css/_partial/_footer.scss b/themes/CodeIT/assets/css/_partial/_footer.scss new file mode 100644 index 0000000..6d803cc --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_footer.scss @@ -0,0 +1,21 @@ +footer { + height: 2rem; + width: 100%; + text-align: center; + line-height: 1.25rem; + padding: 1rem 0; + + .footer-container { + font-size: 0.875rem; + + .footer-line { + width: 100%; + + .icp-br { + display: none; + } + } + } + + @include blur; +} diff --git a/themes/CodeIT/assets/css/_partial/_header.scss b/themes/CodeIT/assets/css/_partial/_header.scss new file mode 100644 index 0000000..3b17916 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_header.scss @@ -0,0 +1,471 @@ +header { + width: 100%; + z-index: 150; + background-color: $header-background-color; + @include transition(box-shadow 0.3s ease); + + [theme="dark"] & { + background-color: $header-background-color-dark; + } + + .logo { + min-height: 1.5em; + height: 1.5em; + vertical-align: text-bottom; + } + + .logo, + .header-title-pre { + padding-right: 0.25rem; + } + + .header-title-post { + padding-left: 0.25rem; + } + + &:hover { + @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1)); + } +} + +.header-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + width: 100%; +} + +.header-title { + font-family: $header-title-font-family; + font-weight: bold; + margin-right: 0.5rem; + min-width: 10%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + @include flex(10); +} + +.menu .menu-item { + position: relative; +} + +.language-select { + position: absolute; + opacity: 0; + left: 0; + top: 0; + width: 100%; + height: 100%; + + &:hover { + cursor: pointer; + } +} + +.search { + position: relative; + + input { + color: transparent; + box-sizing: border-box; + height: 2.5rem; + width: 2.5rem; + @include border-radius(0.5rem); + border: none; + outline: none; + background-color: $header-background-color; + vertical-align: baseline !important; + @include transition(width 0.3s ease); + + [theme="dark"] & { + background-color: $header-background-color-dark; + } + } + + @include placeholder(transparent); + + .search-button { + margin: 0; + position: absolute; + left: auto; + right: 1rem; + } + + .search-toggle { + left: 0.5rem; + right: auto; + } + + .search-loading { + display: none; + } + + .search-clear { + display: none; + } + + .open &, + &.mobile { + input { + color: $global-font-color; + background-color: $search-background-color; + padding: 0 2rem 0 2rem; + } + + [theme="dark"] & { + input { + color: $global-font-color-dark; + background-color: $search-background-color-dark; + } + + @include placeholder($global-font-secondary-color-dark); + } + + @include placeholder($global-font-secondary-color); + + .search-button { + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + + .search-clear:hover { + color: #ff6b6b; + } + + .search-toggle:hover { + cursor: default; + } + } +} + +.theme-switch i { + @include transform(rotate(225deg)); +} + +#header-desktop { + display: block; + position: fixed; + height: $header-height; + line-height: $header-height; + + [header-desktop="normal"] & { + position: static; + } + + .header-wrapper { + padding: 0 2rem 0 10vh; + + .header-title { + font-size: $header-title-font-size; + } + + .menu { + overflow: hidden; + white-space: nowrap; + + .menu-inner { + float: right; + } + + .menu-item { + margin: 0 0.5rem; + + &.delimiter { + border-left: 1.5px solid $global-font-color; + + [theme="dark"] & { + border-left-color: $global-border-color-dark; + } + } + + &.language { + margin-right: 0; + } + + &.search { + margin: 0 -0.5rem 0 0; + } + } + + a.active { + font-weight: 900; + color: $header-hover-color; + + [theme="dark"] & { + color: $header-hover-color-dark; + } + } + } + } + + &.open .header-wrapper .menu .menu-item.search { + margin: 0 0.25rem 0 0.5rem; + + input { + width: 24rem; + } + } +} + +#header-mobile { + display: none; + position: fixed; + height: $header-height; + line-height: $header-height; + + [header-mobile="normal"] & { + position: static; + } + + .header-container { + padding: 0; + margin: 0; + + .header-wrapper { + padding: 0 1rem; + font-size: 1.125rem; + @include transition(margin-top 0.3s ease); + + .header-title { + font-size: $header-title-font-size; + max-width: 80%; + } + + .menu-toggle { + line-height: 4rem; + cursor: pointer; + @include transition(width 0.3s ease); + + span { + display: block; + background: $global-font-color; + width: 1.5rem; + height: 2px; + @include border-radius(3px); + @include transition(all 0.3s ease-in-out); + + [theme="dark"] & { + background: $global-font-color-dark; + } + } + + span:nth-child(1) { + margin-bottom: 0.5rem; + } + + span:nth-child(3) { + margin-top: 0.5rem; + } + + &.active { + span:nth-child(1) { + @include transform(rotate(45deg) translate(0.4rem, 0.5rem)); + } + + span:nth-child(2) { + opacity: 0; + } + + span:nth-child(3) { + @include transform(rotate(-45deg) translate(0.4rem, -0.5rem)); + } + } + } + } + + .menu { + text-align: center; + background: $header-background-color; + border-top: 2px solid $global-border-color; + display: none; + padding-top: 0.5rem; + @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); + + .search-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + padding: ($header-height - 2.5rem) / 2 1rem; + line-height: 2.5rem; + } + + .search { + flex-grow: 10; + + .algolia-autocomplete, + input { + width: 100%; + } + } + + .search-button { + top: 0; + } + + .search-cancel { + display: none; + margin-left: 0.75rem; + } + + .menu-item { + display: block; + line-height: 2.5rem; + } + + &.active { + display: block; + } + + [theme="dark"] & { + background: $header-background-color-dark; + border-top-color: $global-border-color-dark; + } + } + } + + &.open { + .header-wrapper { + margin-top: -$header-height; + } + + .menu { + padding-top: 0; + border-top: none; + + .menu-item { + display: none; + } + + .search-cancel { + display: inline; + } + } + } +} + +.search-dropdown { + position: fixed; + z-index: 200; + top: $header-height; + @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); + + &.desktop { + right: 2rem; + width: 30rem; + } + + &.mobile { + right: 0; + width: 100%; + } + + .dropdown-menu { + right: 0 !important; + background-color: $global-background-color; + + [theme="dark"] & { + background-color: $global-background-color-dark; + } + + .suggestions { + overflow-y: auto; + max-height: calc(100vh - #{$header-height}); + + .suggestion { + padding: 0.75rem 1rem; + + .suggestion-title { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 1rem; + font-weight: bold; + max-width: 75%; + } + + .suggestion-date { + font-size: 0.875rem; + float: right; + text-align: right; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + + .suggestion-context { + line-height: 1.25rem; + @include box(vertical); + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; + @include overflow-wrap(break-word); + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + + em { + font-style: normal; + background-color: $selection-color; + + [theme="dark"] & { + background-color: $selection-color-dark; + } + } + + &.cursor { + background: darken($code-background-color, 5%); + + [theme="dark"] & { + background: lighten($code-background-color-dark, 5%); + } + } + + &:hover { + cursor: pointer; + } + } + } + + .search-empty { + padding: 1rem; + text-align: center; + + .search-query { + font-weight: bold; + + [theme="dark"] & { + color: #ddd; + } + } + } + + .search-footer { + padding: 0.5rem 1rem; + float: right; + font-size: 0.8rem; + color: $global-font-secondary-color; + + [theme="dark"] { + color: $global-font-secondary-color-dark; + } + + @include link(false, false); + + a { + font-size: 1rem; + } + } + } +} diff --git a/themes/CodeIT/assets/css/_partial/_icon.scss b/themes/CodeIT/assets/css/_partial/_icon.scss new file mode 100644 index 0000000..10c7bcb --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_icon.scss @@ -0,0 +1,17 @@ +svg.icon { + display: inline-block; + width: 1.25em; + height: 1em; + text-align: center; + + path { + fill: currentColor; + } +} + +img.emoji { + height: 1em; + width: 1em; + margin: 0 0.05em 0 0.1em; + vertical-align: -0.1em; +} diff --git a/themes/CodeIT/assets/css/_partial/_mask.scss b/themes/CodeIT/assets/css/_partial/_mask.scss new file mode 100644 index 0000000..32cf991 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_mask.scss @@ -0,0 +1,16 @@ +#mask { + background-repeat: no-repeat; + background-position: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-color: rgba(0, 0, 0, 0); + + .blur & { + z-index: 100; + background-color: rgba(0, 0, 0, 0.25); + } +} diff --git a/themes/CodeIT/assets/css/_partial/_pagination.scss b/themes/CodeIT/assets/css/_partial/_pagination.scss new file mode 100644 index 0000000..3584a62 --- /dev/null +++ b/themes/CodeIT/assets/css/_partial/_pagination.scss @@ -0,0 +1,90 @@ +.pagination { + display: flex; + flex-direction: row; + justify-content: center; + list-style: none; + white-space: nowrap; + width: 100%; + padding: 1rem 0 0; + + a { + font-size: 0.8rem; + color: #bfbfbf; + letter-spacing: 0.1rem; + font-weight: 700; + padding: 5px 5px; + text-decoration: none; + @include transition(0.3s); + } + + li { + padding-bottom: 3px; + margin: 0 20px; + box-sizing: border-box; + position: relative; + display: inline; + + &.disabled { + display: none; + } + + &:hover a { + color: $pagination-link-hover-color; + } + + [theme="dark"] &:hover a { + color: $pagination-link-hover-color-dark; + } + + &:before, + &:after { + position: absolute; + content: ""; + width: 0; + height: 3px; + background: $pagination-link-hover-color; + @include transition(0.3s); + bottom: 0px; + } + + [theme="dark"] &:before, + [theme="dark"] &:after { + background: $pagination-link-hover-color-dark; + } + + &:before .active, + &:after .active { + width: 100%; + } + + &:before { + left: 50%; + } + + &:after { + right: 50%; + } + + &:hover { + &:before, + &:after { + width: 50%; + } + } + + &.active { + a { + color: $pagination-link-hover-color; + } + + [theme="dark"] & a { + color: $pagination-link-hover-color-dark; + } + + &:before, + &:after { + width: 60%; + } + } + } +} 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%); + } + } + } +} diff --git a/themes/CodeIT/assets/css/_variables.scss b/themes/CodeIT/assets/css/_variables.scss new file mode 100644 index 0000000..f7ca9c9 --- /dev/null +++ b/themes/CodeIT/assets/css/_variables.scss @@ -0,0 +1,369 @@ +// ============================== +// Variables +// ============================== + +// ========== Global ========== // +// Font and Line Height +$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, + Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, + Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default; +$global-font-size: 16px; +$global-font-weight: 400; +$global-line-height: 1.5rem; + +// Color of the background +$global-background-color: #fff !default; +$global-background-color-dark: #292a2d !default; + +// Color of the text +$global-font-color: #161209 !default; +$global-font-color-dark: #a9a9b3 !default; + +// Color of the secondary text +$global-font-secondary-color: #a9a9b3 !default; +$global-font-secondary-color-dark: #5d5d5f !default; + +// Color of the link +$global-link-color: #161209 !default; +$global-link-color-dark: #a9a9b3 !default; + +// Color of the hover link +$global-link-hover-color: #2d96bd !default; +$global-link-hover-color-dark: #fff !default; + +// Color of the border +$global-border-color: #f0f0f0 !default; +$global-border-color-dark: #363636 !default; +// ========== Global ========== // + +// ========== Scrollbar ========== // +// Color of the scrollbar +$scrollbar-color: #87878d !default; + +// Color of the hover scrollbar +$scrollbar-hover-color: #a9a9b3 !default; +// ========== Scrollbar ========== // + +// ========== Selection ========== // +// Color of the selected text +$selection-color: rgba(53, 166, 247, 0.25) !default; +$selection-color-dark: rgba(50, 112, 194, 0.4) !default; +// ========== Selection ========== // + +// ========== Header ========== // +// Height of the header +$header-height: 3.5rem !default; + +// Color of the header background +$header-background-color: #f8f8f8 !default; +$header-background-color-dark: #252627 !default; + +// Font style of the header title +$header-title-font-family: $global-font-family !default; +$header-title-font-size: 1.5rem !default; + +// Color of the hover header item +$header-hover-color: #161209 !default; +$header-hover-color-dark: #fff !default; + +// Color of the search background +$search-background-color: #e9e9e9 !default; +$search-background-color-dark: #363636 !default; +// ========== Header ========== // + +// ========== Single Content ========== // +// Font size of the TOC +$toc-title-font-size: 1.2rem !default; +$toc-content-font-size: 1rem !default; + +// Color of the single link +$single-link-color: #2d96bd !default; +$single-link-color-dark: #55bde2 !default; + +// Color of the hover single link +$single-link-hover-color: #ef3982 !default; +$single-link-hover-color-dark: #bdebfc !default; + +// Color of the table background +$table-background-color: #fff !default; +$table-background-color-dark: #272c34 !default; + +// Color of the table thead +$table-thead-color: #ededed !default; +$table-thead-color-dark: #20252b !default; + +// Color of the blockquote +$blockquote-color: #6bd6fd !default; +$blockquote-color-dark: #59c5ec !default; +// ========== Single Content ========== // + +// ========== Pagination ========== // +// Color of the link in pagination +$pagination-link-color: #2d96bd !default; +$pagination-link-color-dark: #a9a9b3 !default; + +// Color of the hover link in pagination +$pagination-link-hover-color: #000 !default; +$pagination-link-hover-color-dark: #fff !default; +// ========== Pagination ========== // + +// ========== Code ========== // +// Color of the code +$code-color: #e74c3c !default; +$code-color-dark: #e5bf78 !default; + +// Color of the code background +$code-background-color: #f5f5f5 !default; +$code-background-color-dark: #272c34 !default; + +$code-info-color: #9c9c9c !default; +$code-info-color-dark: #b1b0b0 !default; + +// Font size of the code +$code-font-size: 0.875rem !default; + +// Font family of the code +$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, + $global-font-family !default; + +// Code type map +$code-type-map: ( + // Custom code type + language-bash: "Bash", + language-c: "C", + language-cs: "C#", + language-cpp: "C++", + language-clojure: "Clojure", + language-coffeescript: "CoffeeScript", + language-css: "CSS", + language-dart: "Dart", + language-diff: "Diff", + language-erlang: "Erlang", + language-go: "Go", + language-go-html-template: "Go HTML Template", + language-groovy: "Groovy", + language-haskell: "Haskell", + language-html: "HTML", + language-http: "HTTP", + language-xml: "XML", + language-java: "Java", + language-js: "JavaScript", + language-javascript: "JavaScript", + language-json: "JSON", + language-kotlin: "Kotlin", + language-latex: "LaTeX", + language-less: "Less", + language-lisp: "Lisp", + language-lua: "Lua", + language-makefile: "Makefile", + language-markdown: "Markdown", + language-matlab: "Matlab", + language-objectivec: "Objective-C", + language-php: "PHP", + language-perl: "Perl", + language-python: "Python", + language-r: "R", + language-ruby: "Ruby", + language-rust: "Rust", + language-scala: "Scala", + language-scss: "Scss", + language-shell: "Shell", + language-sql: "SQL", + language-swift: "Swift", + language-tex: "TeX", + language-toml: "TOML", + language-ts: "TypeScript", + language-typescript: "TypeScript", + language-vue: "Vue", + language-yml: "YAML", + language-yaml: "YAML" +) !default; + +// Color map of the code highlight +$code-highlight-color-map: ( + /* Parentheses */ "p": #a9a9b3, + /* Keyword */ "k": #b501a9, + /* KeywordConstant */ "kc": #b501a9, + /* KeywordDeclaration */ "kd": #b501a9, + /* KeywordNamespace */ "kn": #b501a9, + /* KeywordPseudo */ "kp": #b501a9, + /* KeywordReserved */ "kr": #b501a9, + /* KeywordType */ "kt": #b501a9, + /* Name */ "n": #333333, + /* NameAttribute */ "na": #2b77fa, + /* NameBuiltin */ "nb": #f74840, + /* NameBuiltinPseudo */ "bp": #f74840, + /* NameClass */ "nc": #cb8100, + /* NameConstant */ "no": #2b77fa, + /* NameDecorator */ "nd": #0086c1, + /* NameEntity */ "ni": #2b77fa, + /* NameException */ "ne": #2b77fa, + /* NameFunction */ "nf": #2b77fa, + /* NameFunctionMagic */ "fm": #1ccad6, + /* NameLabel */ "nl": #2b77fa, + /* NameNamespace */ "nn": #2b77fa, + /* NameOther */ "nx": #333333, + /* NameProperty */ "py": #2b77fa, + /* NameTag */ "nt": #2b77fa, + /* NameVariable */ "nv": #2b77fa, + /* NameVariableClass */ "vc": #2b77fa, + /* NameVariableGlobal */ "vg": #2b77fa, + /* NameVariableInstance */ "vi": #2b77fa, + /* NameVariableMagic */ "vm": #2b77fa, + /* Literal */ "l": #2aa198, + /* LiteralDate */ "ld": #2aa198, + /* LiteralString */ "s": #24a443, + /* LiteralStringAffix */ "sa": #24a443, + /* LiteralStringBacktick */ "sb": #24a443, + /* LiteralStringChar */ "sc": #24a443, + /* LiteralStringDelimiter */ "dl": #24a443, + /* LiteralStringDoc */ "sd": #24a443, + /* LiteralStringDouble */ "s2": #24a443, + /* LiteralStringEscape */ "se": #24a443, + /* LiteralStringHeredoc */ "sh": #24a443, + /* LiteralStringInterpol */ "si": #24a443, + /* LiteralStringOther */ "sx": #24a443, + /* LiteralStringRegex */ "sr": #24a443, + /* LiteralStringSingle */ "s1": #24a443, + /* LiteralStringSymbol */ "ss": #24a443, + /* LiteralNumber */ "m": #e2893c, + /* LiteralNumberBin */ "mb": #e2893c, + /* LiteralNumberFloat */ "mf": #e2893c, + /* LiteralNumberHex */ "mh": #e2893c, + /* LiteralNumberInteger */ "mi": #e2893c, + /* LiteralNumberIntegerLong */ "il": #e2893c, + /* LiteralNumberOct */ "mo": #e2893c, + /* Operator */ "o": #f19b04, + /* OperatorWord */ "ow": #b501a9, + /* Comment */ "c": #a0a1a8, + /* CommentHashbang */ "ch": #a0a1a8, + /* CommentMultiline */ "cm": #a0a1a8, + /* CommentSingle */ "c1": #a0a1a8, + /* CommentSpecial */ "cs": #a0a1a8, + /* CommentPreproc */ "cp": #a0a1a8, + /* CommentPreprocFile */ "cpf": #a0a1a8, + /* Generic */ "g": #e72d40, + /* GenericDeleted */ "gd": #e72d40, + /* GenericEmph */ "ge": #e72d40, + /* GenericError */ "gr": #e72d40, + /* GenericHeading */ "gh": #e72d40, + /* GenericInserted */ "gi": #e72d40, + /* GenericOutput */ "go": #e72d40, + /* GenericPrompt */ "gp": #e72d40, + /* GenericStrong */ "gs": #e72d40, + /* GenericSubheading */ "gu": #e72d40, + /* GenericTraceback */ "gt": #e72d40, + /* TextWhitespace */ "w": #bbbbbb +) !default; +$code-highlight-color-map-dark: ( + /* Parentheses */ "p": #a9a9b3, + /* Keyword */ "k": #d371e3, + /* KeywordConstant */ "kc": #d371e3, + /* KeywordDeclaration */ "kd": #d371e3, + /* KeywordNamespace */ "kn": #d371e3, + /* KeywordPseudo */ "kp": #d371e3, + /* KeywordReserved */ "kr": #d371e3, + /* KeywordType */ "kt": #d371e3, + /* Name */ "n": #a9b2c0, + /* NameAttribute */ "na": #41b0f5, + /* NameBuiltin */ "nb": #19b9c4, + /* NameBuiltinPseudo */ "bp": #ecbf6f, + /* NameClass */ "nc": #ecbf6f, + /* NameConstant */ "no": #41b0f5, + /* NameDecorator */ "nd": #ecbf6f, + /* NameEntity */ "ni": #41b0f5, + /* NameException */ "ne": #41b0f5, + /* NameFunction */ "nf": #41b0f5, + /* NameFunctionMagic */ "fm": #19b9c4, + /* NameLabel */ "nl": #41b0f5, + /* NameNamespace */ "nn": #41b0f5, + /* NameOther */ "nx": #a9a9b3, + /* NameProperty */ "py": #41b0f5, + /* NameTag */ "nt": #41b0f5, + /* NameVariable */ "nv": #41b0f5, + /* NameVariableClass */ "vc": #41b0f5, + /* NameVariableGlobal */ "vg": #41b0f5, + /* NameVariableInstance */ "vi": #41b0f5, + /* NameVariableMagic */ "vm": #41b0f5, + /* Literal */ "l": #2aa198, + /* LiteralDate */ "ld": #2aa198, + /* LiteralString */ "s": #8cc570, + /* LiteralStringAffix */ "sa": #8cc570, + /* LiteralStringBacktick */ "sb": #8cc570, + /* LiteralStringChar */ "sc": #8cc570, + /* LiteralStringDelimiter */ "dl": #8cc570, + /* LiteralStringDoc */ "sd": #8cc570, + /* LiteralStringDouble */ "s2": #8cc570, + /* LiteralStringEscape */ "se": #8cc570, + /* LiteralStringHeredoc */ "sh": #8cc570, + /* LiteralStringInterpol */ "si": #8cc570, + /* LiteralStringOther */ "sx": #8cc570, + /* LiteralStringRegex */ "sr": #8cc570, + /* LiteralStringSingle */ "s1": #8cc570, + /* LiteralStringSymbol */ "ss": #8cc570, + /* LiteralNumber */ "m": #db985c, + /* LiteralNumberBin */ "mb": #db985c, + /* LiteralNumberFloat */ "mf": #db985c, + /* LiteralNumberHex */ "mh": #db985c, + /* LiteralNumberInteger */ "mi": #db985c, + /* LiteralNumberIntegerLong */ "il": #db985c, + /* LiteralNumberOct */ "mo": #db985c, + /* Operator */ "o": #ecbf6f, + /* OperatorWord */ "ow": #d371e3, + /* Comment */ "c": #7e848f, + /* CommentHashbang */ "ch": #7e848f, + /* CommentMultiline */ "cm": #7e848f, + /* CommentSingle */ "c1": #7e848f, + /* CommentSpecial */ "cs": #7e848f, + /* CommentPreproc */ "cp": #7e848f, + /* CommentPreprocFile */ "cpf": #7e848f, + /* Generic */ "g": #f16372, + /* GenericDeleted */ "gd": #f16372, + /* GenericEmph */ "ge": #f16372, + /* GenericError */ "gr": #f16372, + /* GenericHeading */ "gh": #f16372, + /* GenericInserted */ "gi": #f16372, + /* GenericOutput */ "go": #f16372, + /* GenericPrompt */ "gp": #f16372, + /* GenericStrong */ "gs": #f16372, + /* GenericSubheading */ "gu": #f16372, + /* GenericTraceback */ "gt": #f16372, + /* TextWhitespace */ "w": #bbbbbb +) !default; +// ========== Code ========== // + +// ========== Admonition ========== // +// Color map of the admonition +$admonition-color-map: ( + "note": #448aff, + "abstract": #00b0ff, + "info": #00b8d4, + "tip": #00bfa5, + "success": #00c853, + "question": #64dd17, + "warning": #ff9100, + "failure": #ff5252, + "danger": #ff1744, + "bug": #f50057, + "example": #651fff, + "quote": #9e9e9e, +) !default; + +// Color map of the admonition background +$admonition-background-color-map: ( + "note": rgba(68, 138, 255, 0.1), + "abstract": rgba(0, 176, 255, 0.1), + "info": rgba(0, 184, 212, 0.1), + "tip": rgba(0, 191, 165, 0.1), + "success": rgba(0, 200, 83, 0.1), + "question": rgba(100, 221, 23, 0.1), + "warning": rgba(255, 145, 0, 0.1), + "failure": rgba(255, 82, 82, 0.1), + "danger": rgba(255, 23, 68, 0.1), + "bug": rgba(245, 0, 87, 0.1), + "example": rgba(101, 31, 255, 0.1), + "quote": rgba(159, 159, 159, 0.1), +) !default; +// ========== Admonition ========== // + +$MAX_LENGTH: 12000px; diff --git a/themes/CodeIT/assets/css/style.scss b/themes/CodeIT/assets/css/style.scss new file mode 100644 index 0000000..cd685a8 --- /dev/null +++ b/themes/CodeIT/assets/css/style.scss @@ -0,0 +1,19 @@ +@charset "utf-8"; + +@import "_variables"; +@import "_override"; + +@import "_mixin/index"; + +@import "_core/base"; +@import "_core/layout"; + +@import "_page/index"; + +@import "_partial/header"; +@import "_partial/footer"; +@import "_partial/pagination"; + +@import "_core/media"; + +@import "_custom"; |