diff options
Diffstat (limited to 'themes/theme/source/css')
51 files changed, 2747 insertions, 0 deletions
diff --git a/themes/theme/source/css/animation.styl b/themes/theme/source/css/animation.styl new file mode 100644 index 00000000..ef22c6f9 --- /dev/null +++ b/themes/theme/source/css/animation.styl @@ -0,0 +1,14 @@ +@keyframes fadeIn + from + opacity 0 + to + opacity 1 + +.fade-in + animation fadeIn 0.6s ease + +.post-list-item, .post-gallery-item + transition opacity $transition-duration ease + + &:hover + opacity 0.85
\ No newline at end of file diff --git a/themes/theme/source/css/base.styl b/themes/theme/source/css/base.styl new file mode 100644 index 00000000..02dc0bb7 --- /dev/null +++ b/themes/theme/source/css/base.styl @@ -0,0 +1,38 @@ +div + display block + padding 0 + margin 0 + +ul + list-style none + padding 0 + margin 0 + +*, *::before, *::after + box-sizing border-box + +a + text-decoration: none + color: $color-text-primary + +input + outline none + border none + +body + text-style(body-default) + background-color $color-background + +/* clears the 'X' from Internet Explorer */ +input[type=search]::-ms-clear + display none + width 0 + height 0 +input[type=search]::-ms-reveal + display none + width 0 + height 0 + +/* clears the 'X' from Chrome */ +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration + display: none diff --git a/themes/theme/source/css/color.styl b/themes/theme/source/css/color.styl new file mode 100644 index 00000000..c7cf2c25 --- /dev/null +++ b/themes/theme/source/css/color.styl @@ -0,0 +1,10 @@ +$color_path = 'color_mode/default.styl' + +if hexo-config("color_mode") == 'default' + $color_path = 'color_mode/default.styl' +else if hexo-config("color_mode") == 'dark' + $color_path = 'color_mode/dark.styl' +else if hexo-config("color_mode") == 'classic' + $color_path = 'color_mode/classic.styl' + +@import $color_path diff --git a/themes/theme/source/css/color_mode/classic.styl b/themes/theme/source/css/color_mode/classic.styl new file mode 100644 index 00000000..cd3f6413 --- /dev/null +++ b/themes/theme/source/css/color_mode/classic.styl @@ -0,0 +1,19 @@ +$color-text-primary = #1C1917 +$color-text-secondary = #78716C +$color-text-third = #A8A29E +$color-text-fourth = #E7E5E4 +$color-background = #FFFBEB + +$color-accent = #2563EB +$color-border = #E7E5E4 + +$color-code-background = #FEF3C7 +$color-code-highlight = #2563EB +$color-code-default = #57534E +$color-code-marker = #A8A29E + +$color-search-marker = #FDE68A +$color-overlay = rgba(0, 0, 0, 0.4) +$color-glass = rgba(255, 251, 235, 0.85) + +@import "../highlight/github.styl"
\ No newline at end of file diff --git a/themes/theme/source/css/color_mode/dark.styl b/themes/theme/source/css/color_mode/dark.styl new file mode 100644 index 00000000..67a9aaa6 --- /dev/null +++ b/themes/theme/source/css/color_mode/dark.styl @@ -0,0 +1,20 @@ +// COLOR +$color-text-primary = #FAFAFA +$color-text-secondary = #A1A1AA +$color-text-third = #71717A +$color-text-fourth = #3F3F46 +$color-background = #18181B + +$color-accent = #3B82F6 +$color-border = #3F3F46 + +$color-code-background = #27272A +$color-code-highlight = #3B82F6 +$color-code-default = #D4D4D8 +$color-code-marker = #71717A + +$color-search-marker = #854D0E +$color-overlay = rgba(0, 0, 0, 0.6) +$color-glass = rgba(24, 24, 27, 0.85) + +@import "../highlight/github-gist.styl"
\ No newline at end of file diff --git a/themes/theme/source/css/color_mode/default.styl b/themes/theme/source/css/color_mode/default.styl new file mode 100644 index 00000000..15f8a292 --- /dev/null +++ b/themes/theme/source/css/color_mode/default.styl @@ -0,0 +1,20 @@ +// COLOR +$color-text-primary = #09090B +$color-text-secondary = #71717A +$color-text-third = #A1A1AA +$color-text-fourth = #E4E4E7 +$color-background = #FFFFFF + +$color-accent = #2563EB +$color-border = #E4E4E7 + +$color-code-background = #F4F4F5 +$color-code-highlight = #2563EB +$color-code-default = #52525B +$color-code-marker = #A1A1AA + +$color-search-marker = #FDE68A +$color-overlay = rgba(0, 0, 0, 0.4) +$color-glass = rgba(255, 255, 255, 0.92) + +@import "../highlight/github.styl"
\ No newline at end of file diff --git a/themes/theme/source/css/component/button.styl b/themes/theme/source/css/component/button.styl new file mode 100644 index 00000000..6c6520db --- /dev/null +++ b/themes/theme/source/css/component/button.styl @@ -0,0 +1,64 @@ +.btn + display inline-flex + align-items center + justify-content center + white-space nowrap + border-radius $margin-m-2 + font-size $font-size-header + font-weight 400 + transition all $transition-duration ease + cursor pointer + border none + text-decoration none + user-select none + outline none + padding $margin-m-0 $margin-l-0 + + &:focus-visible + outline 2px solid $color-accent + outline-offset 2px + + &:disabled + pointer-events none + opacity 0.5 + +.btn-default + background-color $color-text-primary + color $color-background + + &:hover + opacity 0.9 + + &:active + opacity 0.95 + +.btn-outline + border 1px solid $color-border + background-color transparent + color $color-text-primary + + &:hover + border-color $color-accent + color $color-accent + +.btn-ghost + background-color transparent + color $color-text-primary + + &:hover + background-color $color-text-fourth + +.btn-link + background-color transparent + color $color-accent + text-decoration underline + text-underline-offset 4px + + &:hover + text-decoration none + +@keyframes spin + 0% + transform rotate(0deg) + 100% + transform rotate(360deg)
\ No newline at end of file diff --git a/themes/theme/source/css/component/component.styl b/themes/theme/source/css/component/component.styl new file mode 100644 index 00000000..b203aecc --- /dev/null +++ b/themes/theme/source/css/component/component.styl @@ -0,0 +1,44 @@ +.h-line-primary + background-color $color-text-primary + height $line-third + +.h-line-secondary + background-color $color-border + height $line-third + +hr + background-color $color-border + height $line-third + border 0 + +.tag-list + display flex + flex-wrap wrap + margin-bottom $margin-m-0 + +.tag-title + margin $margin-m-1 0 + color $color-text-secondary + font-size $font-size-header + + a + color @color + +.post-tag + text-style(post-tag) + border 1px solid $color-border + margin-right $margin-s-2 + margin-bottom $margin-s-2 + padding $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0 + border-radius $margin-m-2 + transition all $transition-duration ease + + a + background-image none!important + + &:hover + border-color $color-accent + background-color $color-accent + + a + color #fff diff --git a/themes/theme/source/css/component/icon.styl b/themes/theme/source/css/component/icon.styl new file mode 100644 index 00000000..8a6c0511 --- /dev/null +++ b/themes/theme/source/css/component/icon.styl @@ -0,0 +1,21 @@ +.icon + display block + background-color $color-text-primary + width $icon-size + height $icon-size + +.arrow-up + -webkit-mask-image url('../icon/arrow-up.svg') + mask-image url('../icon/arrow-up.svg') + +.arrow-left + -webkit-mask-image url('../icon/arrow-left.svg') + mask-image url('../icon/arrow-left.svg') + +.arrow-right + -webkit-mask-image url('../icon/arrow-right.svg') + mask-image url('../icon/arrow-right.svg') + +.close-btn + -webkit-mask-image url('../icon/close-btn.svg') + mask-image url('../icon/close-btn.svg')
\ No newline at end of file diff --git a/themes/theme/source/css/font-slices.styl b/themes/theme/source/css/font-slices.styl new file mode 100644 index 00000000..97b9b47b --- /dev/null +++ b/themes/theme/source/css/font-slices.styl @@ -0,0 +1,47 @@ +// FONT SLICES - GoogleSansCode 分段字体定义 +// 自动生成，包含 5 个 Unicode 范围切片 + +// Latin 基础字符集（ASCII + 基本拉丁 + 常用标点） +@font-face + font-family 'GoogleSansCode' + font-style normal + font-weight 400 + font-display swap + src url('/fonts/latin-base.woff2') format('woff2') + unicode-range U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F + +// Latin 扩展（拉丁扩展 A/B + 货币符号 + 特殊字符） +@font-face + font-family 'GoogleSansCode' + font-style normal + font-weight 400 + font-display swap + src url('/fonts/latin-ext.woff2') format('woff2') + unicode-range U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF + +// CJK 常用汉字（约 3500 字，覆盖 99% 中文内容） +@font-face + font-family 'GoogleSansCode' + font-style normal + font-weight 400 + font-display swap + src url('/fonts/cjk-common.woff2') format('woff2') + unicode-range U+4E00-62FF + +// CJK 扩展汉字（次常用汉字 + 扩展 A） +@font-face + font-family 'GoogleSansCode' + font-style normal + font-weight 400 + font-display swap + src url('/fonts/cjk-ext.woff2') format('woff2') + unicode-range U+6300-9FFF, U+3400-4DBF + +// 符号（CJK 标点 + 全角字符） +@font-face + font-family 'GoogleSansCode' + font-style normal + font-weight 400 + font-display swap + src url('/fonts/symbols.woff2') format('woff2') + unicode-range U+3000-303F, U+FF00-FFEF diff --git a/themes/theme/source/css/font.styl b/themes/theme/source/css/font.styl new file mode 100644 index 00000000..4ca10b78 --- /dev/null +++ b/themes/theme/source/css/font.styl @@ -0,0 +1,105 @@ +text-style(n) + font-family $font-family + font-weight 400 + + if n == 'body-default' + font-size $font-size-body + line-height $line-height-body + color $color-text-primary + + else if n == 'body-bold' + font-size $font-size-body + line-height $line-height-body + color $color-text-primary + + else if n == 'body-italic' + font-size $font-size-body + font-style italic + line-height $line-height-body + color $color-text-primary + + else if n == 'body-delete' + font-size $font-size-body + line-height $line-height-body + text-decoration line-through + color $color-text-primary + + else if n == 'code-default' + font-family $font-family + font-size $font-size-code + line-height $line-height-code + color $color-code-default + + else if n == 'code-highlight' + font-family $font-family + font-size $font-size-code + line-height $line-height-code + color $color-code-highlight + + else if n == 'code-marker' + font-family $font-family + font-size $font-size-code + line-height $line-height-code + color $color-code-marker + + else if n == 'heading-h1' + font-size $font-size-heading-h1 + line-height $line-height-heading-h1 + color $color-text-primary + + else if n == 'heading-h2' + font-size $font-size-heading-h2 + line-height $line-height-heading-h2 + color $color-text-primary + + else if n == 'heading-h3' + font-size $font-size-heading-h3 + line-height $line-height-heading-h3 + color $color-text-primary + + else if n == 'heading-h4' + font-size $font-size-heading-h4 + line-height $line-height-heading-h4 + color $color-text-primary + + else if n == 'heading-h5' + font-size $font-size-heading-h5 + line-height $line-height-heading-h5 + color $color-text-primary + + else if n == 'heading-h6' + font-size $font-size-heading-h6 + line-height $line-height-heading-h6 + color $color-text-primary + + else if n == 'footer' + font-size $font-size-footer + line-height $line-height-footer + color $color-text-secondary + + else if n == 'header' + font-size $font-size-header + line-height $line-height-header + color $color-text-primary + + else if n == 'post-date' + font-size $font-size-post-date + line-height $line-height-post-date + color $color-text-secondary + + else if n == 'year-title' + font-size $font-size-year-title + line-height $line-height-year-title + color $color-text-third + + else if n == 'post-tag' + font-size $font-size-post-tag + line-height $line-height-post-tag + color $color-text-secondary + + else if n == 'search-result-message' + font-family $font-family + font-size $font-size-code + line-height $line-height-code + color $color-text-third + text-transform lowercase diff --git a/themes/theme/source/css/highlight/ascetic.styl b/themes/theme/source/css/highlight/ascetic.styl new file mode 100644 index 00000000..19d1eff3 --- /dev/null +++ b/themes/theme/source/css/highlight/ascetic.styl @@ -0,0 +1,37 @@ +/* + +Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]> + +*/ + +.highlight + color: black + background: white + .code + .string, + .variable, + .template-variable, + .symbol, + .bullet, + .section, + .addition, + .attribute, + .link + color: #888 + + .comment, + .quote, + .meta, + .deletion + color: #ccc + + .keyword, + .selector-tag, + .section, + .name, + .type, + .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/brown-paper.styl b/themes/theme/source/css/highlight/brown-paper.styl new file mode 100644 index 00000000..a81bd2d7 --- /dev/null +++ b/themes/theme/source/css/highlight/brown-paper.styl @@ -0,0 +1,55 @@ +/* + +Brown Paper style from goldblog.com.ua (c) Zaripov Yura <[email protected]> + +*/ + +.highlight + color: #363c69 + background:#b7a68e url(brown-papersq.png) + .code + .keyword, + .selector-tag, + .literal + color:#005599 + font-weight:normal + + .highlight, + .subst + color: #363c69 + + .string, + .title, + .section, + .type, + .attribute, + .symbol, + .bullet, + .built_in, + .addition, + .variable, + .template-tag, + .template-variable, + .link, + .name + color: #2c009f + + .comment, + .quote, + .meta, + .deletion + color: #802022 + + .keyword, + .selector-tag, + .literal, + .doctag, + .title, + .section, + .type, + .name, + .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/dark.styl b/themes/theme/source/css/highlight/dark.styl new file mode 100644 index 00000000..1cdbc9b0 --- /dev/null +++ b/themes/theme/source/css/highlight/dark.styl @@ -0,0 +1,27 @@ +/* + + Dark style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]> + +*/ +.highlight + background: #444 + color: #ddd + + .code + .keyword, .selector-tag, .literal, .section, .link + color: white + + .subst + color: #ddd + + .string, .title, .name, .type, .attribute, .symbol, .bullet, .built_in, .addition, .variable, .template-tag, .template-variable + color: #d88 + + .comment, .quote, .deletion, .meta + color: #777 + + .keyword, .selector-tag, .literal, .title, .section, .doctag, .type, .name, .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/darkula.styl b/themes/theme/source/css/highlight/darkula.styl new file mode 100644 index 00000000..0295887d --- /dev/null +++ b/themes/theme/source/css/highlight/darkula.styl @@ -0,0 +1,33 @@ +/* + + Darkula color scheme from the JetBrains family of IDEs + +*/ +.highlight + background: #2b2b2b + color: #bababa + + .code + .strong, .emphasis + color: #a8a8a2 + + .bullet, .quote, .link, .number, .regexp, .literal + color: #6896ba + + .code, .selector-class + color: #a6e22e + + .emphasis + font-style: italic + + .keyword, .selector-tag, .section, .attribute, .name, .variable + color: #cb7832 + + .params + color: #b9b9b9 + + .string, .subst, .type, .built_in, .builtin-name, .symbol, .selector-id, .selector-attr, .selector-pseudo, .template-tag, .template-variable, .addition + color: #e0c46c + + .comment, .deletion, .meta + color: #7f7f7f diff --git a/themes/theme/source/css/highlight/foundation.styl b/themes/theme/source/css/highlight/foundation.styl new file mode 100644 index 00000000..8c52a5ae --- /dev/null +++ b/themes/theme/source/css/highlight/foundation.styl @@ -0,0 +1,71 @@ +/* +Description: Foundation 4 docs style for highlight.js +Author: Dan Allen <[email protected]> +Website: http://foundation.zurb.com/docs/ +Version: 1.0 +Date: 2013-04-02 +*/ + +.highlight + color: black + background: #eee + .code + .link, + .emphasis, + .attribute, + .addition + color: #070 + + .emphasis + font-style: italic + + .strong, + .string, + .deletion + color: #d14 + + .strong + font-weight: normal + + .quote, + .comment + color: #998 + font-style: italic + + .section, + .title + color: #900 + + .class .title, + .type + color: #458 + + .variable, + .template-variable + color: #336699 + + .bullet + color: #997700 + + .meta + color: #3344bb + + .code, + .number, + .literal, + .keyword, + .selector-tag + color: #099 + + .regexp + background-color: #fff0ff + color: #880088 + + .symbol + color: #990073 + + .tag, + .name, + .selector-id, + .selector-class + color: #007700 diff --git a/themes/theme/source/css/highlight/github-gist.styl b/themes/theme/source/css/highlight/github-gist.styl new file mode 100644 index 00000000..e3a81ce3 --- /dev/null +++ b/themes/theme/source/css/highlight/github-gist.styl @@ -0,0 +1,57 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.highlight + padding: 0.5em + color: #333333 + .code + .comment, + .meta + color: #969896 + + .string, + .variable, + .template-variable, + .strong, + .emphasis, + .quote + color: #df5000 + + .keyword, + .selector-tag, + .type + color: #a71d5d + + .literal, + .symbol, + .bullet, + .attribute + color: #0086b3 + + .section, + .name + color: #63a35c + + .tag + color: #333333 + + .title, + .attr, + .selector-id, + .selector-class, + .selector-attr, + .selector-pseudo + color: #795da3 + + .addition + color: #55a532 + background-color: #eaffea + + .deletion + color: #bd2c00 + background-color: #ffecec + + .link + text-decoration: underline diff --git a/themes/theme/source/css/highlight/github.styl b/themes/theme/source/css/highlight/github.styl new file mode 100644 index 00000000..f06484fd --- /dev/null +++ b/themes/theme/source/css/highlight/github.styl @@ -0,0 +1,79 @@ +/* + +github.com style (c) Vasily Polovnyov <[email protected]> + +*/ + +.highlight + color: #333 + background: #f8f8f8 + .code + .comment, + .quote + color: #998 + font-style: italic + + .keyword, + .selector-tag, + .subst + color: #333 + font-weight: normal + + .number, + .literal, + .variable, + .template-variable, + .tag .attr + color: #008080 + + .string, + .doctag + color: #d14 + + .title, + .section, + .selector-id + color: #900 + font-weight: normal + + .subst + font-weight: normal + + .type, + .class .title + color: #458 + font-weight: normal + + .tag, + .name, + .attribute + color: #000080 + font-weight: normal + + .regexp, + .link + color: #009926 + + .symbol, + .bullet + color: #990073 + + .built_in, + .builtin-name + color: #0086b3 + + .meta + color: #999 + font-weight: normal + + .deletion + background: #fdd + + .addition + background: #dfd + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/highlight/googlecode.styl b/themes/theme/source/css/highlight/googlecode.styl new file mode 100644 index 00000000..c25bb01c --- /dev/null +++ b/themes/theme/source/css/highlight/googlecode.styl @@ -0,0 +1,72 @@ +/* + +Google Code style (c) Aahan Krish <[email protected]> + +*/ + +.highlight + color: black + background: white + .code + .comment, + .quote + color: #800 + + .keyword, + .selector-tag, + .section, + .title, + .name + color: #008 + + .variable, + .template-variable + color: #660 + + .string, + .selector-attr, + .selector-pseudo, + .regexp + color: #080 + + .literal, + .symbol, + .bullet, + .meta, + .number, + .link + color: #066 + + .title, + .doctag, + .type, + .attr, + .built_in, + .builtin-name, + .params + color: #606 + + .attribute, + .subst + color: #000 + + .formula + background-color: #eee + font-style: italic + + .selector-id, + .selector-class + color: #9B703F + + .addition + background-color: #baeeba + + .deletion + background-color: #ffc8bd + + .doctag, + .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/idea.styl b/themes/theme/source/css/highlight/idea.styl new file mode 100644 index 00000000..cc009c4a --- /dev/null +++ b/themes/theme/source/css/highlight/idea.styl @@ -0,0 +1,78 @@ +/* + +Intellij Idea-like styling (c) Vasily Polovnyov <[email protected]> + +*/ + +.highlight + color: #000 + background: #fff + .code + .subst, + .title + font-weight: normal + color: #000 + + .comment, + .quote + color: #808080 + font-style: italic + + .meta + color: #808000 + + .tag + background: #efefef + + .section, + .name, + .literal, + .keyword, + .selector-tag, + .type, + .selector-id, + .selector-class + font-weight: normal + color: #000080 + + .attribute, + .number, + .regexp, + .link + font-weight: normal + color: #0000ff + + .number, + .regexp, + .link + font-weight: normal + + .string + color: #008000 + font-weight: normal + + .symbol, + .bullet, + .formula + color: #000 + background: #d0eded + font-style: italic + + .doctag + text-decoration: underline + + .variable, + .template-variable + color: #660e7a + + .addition + background: #baeeba + + .deletion + background: #ffc8bd + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/highlight/rainbow.styl b/themes/theme/source/css/highlight/rainbow.styl new file mode 100644 index 00000000..88930970 --- /dev/null +++ b/themes/theme/source/css/highlight/rainbow.styl @@ -0,0 +1,46 @@ +/* + + Style with support for rainbow parens + +*/ +.highlight + background: #474949 + color: #d1d9e1 + + .code + .comment, .quote + color: #969896 + font-style: italic + + .keyword, .selector-tag, .literal, .type, .addition + color: #cc99cc + + .number, .selector-attr, .selector-pseudo + color: #f99157 + + .string, .doctag, .regexp + color: #8abeb7 + + .title, .name, .section, .built_in + color: #b5bd68 + + .variable, .template-variable, .selector-id, .class .title + color: #ffcc66 + + .section, .name, .strong + font-weight: normal + + .symbol, .bullet, .subst, .meta, .link + color: #f99157 + + .deletion + color: #dc322f + + .formula + background: #eee8d5 + + .attr, .attribute + color: #81a2be + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/school-book.styl b/themes/theme/source/css/highlight/school-book.styl new file mode 100644 index 00000000..eebfa821 --- /dev/null +++ b/themes/theme/source/css/highlight/school-book.styl @@ -0,0 +1,57 @@ +/* + +School Book style from goldblog.com.ua (c) Zaripov Yura <[email protected]> + +*/ + +.highlight + background:#f6f6ae url(school-book.png) + border-top: solid 2px #d2e8b9 + border-bottom: solid 1px #d2e8b9 + .code + .keyword, + .selector-tag, + .literal + color:#005599 + font-weight:normal + + .highlight, + .subst + color: #3e5915 + + .string, + .title, + .section, + .type, + .symbol, + .bullet, + .attribute, + .built_in, + .builtin-name, + .addition, + .variable, + .template-tag, + .template-variable, + .link + color: #2c009f + + .comment, + .quote, + .deletion, + .meta + color: #e60415 + + .keyword, + .selector-tag, + .literal, + .doctag, + .title, + .section, + .type, + .name, + .selector-id, + .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/solarized-dark.styl b/themes/theme/source/css/highlight/solarized-dark.styl new file mode 100644 index 00000000..a4b3ff4a --- /dev/null +++ b/themes/theme/source/css/highlight/solarized-dark.styl @@ -0,0 +1,45 @@ +/* + + Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]> + +*/ +.highlight + background: #002b36 + color: #839496 + + .code + .comment, .quote + color: #586e75 + + /* Solarized Green */ + .keyword, .selector-tag, .addition + color: #859900 + + /* Solarized Cyan */ + .number, .string, .meta .meta-string, .literal, .doctag, .regexp + color: #2aa198 + + /* Solarized Blue */ + .title, .section, .name, .selector-id, .selector-class + color: #268bd2 + + /* Solarized Yellow */ + .attribute, .attr, .variable, .template-variable, .class .title, .type + color: #b58900 + + /* Solarized Orange */ + .symbol, .bullet, .subst, .meta, .meta .keyword, .selector-attr, .selector-pseudo, .link + color: #cb4b16 + + /* Solarized Red */ + .built_in, .deletion + color: #dc322f + + .formula + background: #073642 + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/highlight/solarized-light.styl b/themes/theme/source/css/highlight/solarized-light.styl new file mode 100644 index 00000000..3b8abdad --- /dev/null +++ b/themes/theme/source/css/highlight/solarized-light.styl @@ -0,0 +1,71 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]> + +*/ + +.highlight + color: #657b83 + table + background: #fdf6e3 + .code + .comment, + .quote + color: #93a1a1 + + /* Solarized Green */ + .keyword, + .selector-tag, + .addition + color: #859900 + + /* Solarized Cyan */ + .number, + .string, + .meta .meta-string, + .literal, + .doctag, + .regexp + color: #2aa198 + + /* Solarized Blue */ + .title, + .section, + .name, + .selector-id, + .selector-class + color: #268bd2 + + /* Solarized Yellow */ + .attribute, + .attr, + .variable, + .template-variable, + .class .title, + .type + color: #b58900 + + /* Solarized Orange */ + .symbol, + .bullet, + .subst, + .meta, + .meta .keyword, + .selector-attr, + .selector-pseudo, + .link + color: #cb4b16 + + /* Solarized Red */ + .built_in, + .deletion + color: #dc322f + + .formula + background: #eee8d5 + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/highlight/tomorrow.styl b/themes/theme/source/css/highlight/tomorrow.styl new file mode 100644 index 00000000..f83057aa --- /dev/null +++ b/themes/theme/source/css/highlight/tomorrow.styl @@ -0,0 +1,56 @@ +.highlight + color: #4d4d4c + background: white + .code + /* Tomorrow Comment */ + .comment, + .quote + color: #8e908c + + /* Tomorrow Red */ + .variable, + .template-variable, + .tag, + .name, + .selector-id, + .selector-class, + .regexp, + .deletion + color: #c82829 + + /* Tomorrow Orange */ + .number, + .built_in, + .builtin-name, + .literal, + .type, + .params, + .meta, + .link + color: #f5871f + + /* Tomorrow Yellow */ + .attribute + color: #eab700 + + /* Tomorrow Green */ + .string, + .symbol, + .bullet, + .addition + color: #718c00 + + /* Tomorrow Blue */ + .title, + .section + color: #4271ae + + /* Tomorrow Purple */ + .keyword, + .selector-tag + color: #8959a8 + .emphasis + font-style: italic + + .strong + font-weight: normal
\ No newline at end of file diff --git a/themes/theme/source/css/highlight/vs.styl b/themes/theme/source/css/highlight/vs.styl new file mode 100644 index 00000000..940ec690 --- /dev/null +++ b/themes/theme/source/css/highlight/vs.styl @@ -0,0 +1,58 @@ +/* + +Visual Studio-like style based on original C# coloring by Jason Diamond <[email protected]> + +*/ +.highlight + display: block + overflow-x: auto + padding: 0.5em + background: white + color: black + .code + .comment, + .quote, + .variable + color: #008000 + + .keyword, + .selector-tag, + .built_in, + .name, + .tag + color: #00f + + .string, + .title, + .section, + .attribute, + .literal, + .template-tag, + .template-variable, + .type, + .addition + color: #a31515 + + .deletion, + .selector-attr, + .selector-pseudo, + .meta + color: #2b91af + + .doctag + color: #808080 + + .attr + color: #f00 + + .symbol, + .bullet, + .link + color: #00b0e8 + + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/highlight/xcode.styl b/themes/theme/source/css/highlight/xcode.styl new file mode 100644 index 00000000..94290cd7 --- /dev/null +++ b/themes/theme/source/css/highlight/xcode.styl @@ -0,0 +1,74 @@ +/* + +XCode style (c) Angel Garcia <[email protected]> + +*/ + +.highlight + color: black + background: #fff + .code + .comment, + .quote + color: #006a00 + + .keyword, + .selector-tag, + .literal + color: #aa0d91 + + .name + color: #008 + + .variable, + .template-variable + color: #660 + + .string + color: #c41a16 + + .regexp, + .link + color: #080 + + .title, + .tag, + .symbol, + .bullet, + .number, + .meta + color: #1c00cf + + .section, + .class .title, + .type, + .attr, + .built_in, + .builtin-name, + .params + color: #5c2699 + + .attribute, + .subst + color: #000 + + .formula + background-color: #eee + font-style: italic + + .addition + background-color: #baeeba + + .deletion + background-color: #ffc8bd + + .selector-id, + .selector-class + color: #9b703f + + .doctag, + .strong + font-weight: normal + + .emphasis + font-style: italic diff --git a/themes/theme/source/css/highlight/zenburn.styl b/themes/theme/source/css/highlight/zenburn.styl new file mode 100644 index 00000000..941cd1f4 --- /dev/null +++ b/themes/theme/source/css/highlight/zenburn.styl @@ -0,0 +1,46 @@ +/* + + Zenburn style from voldmar.ru (c) Vladimir Epifanov <[email protected]> + based on dark.css by Ivan Sagalaev + +*/ +.highlight + background: #3f3f3f + color: #dcdcdc + + .code + .keyword, .selector-tag, .tag + color: #e3ceab + + .template-tag + color: #dcdcdc + + .number + color: #8cd0d3 + + .variable, .template-variable, .attribute + color: #efdcbc + + .literal + color: #efefaf + + .subst + color: #8f8f8f + + .title, .name, .selector-id, .selector-class, .section, .type + color: #efef8f + + .symbol, .bullet, .link + color: #dca3a3 + + .deletion, .string, .built_in, .builtin-name + color: #cc9393 + + .addition, .comment, .quote, .meta + color: #7f9f7f + + .emphasis + font-style: italic + + .strong + font-weight: normal diff --git a/themes/theme/source/css/layout.styl b/themes/theme/source/css/layout.styl new file mode 100644 index 00000000..9da0e03d --- /dev/null +++ b/themes/theme/source/css/layout.styl @@ -0,0 +1,13 @@ +body + margin 0 + +.wrapper + display flex + flex-direction column + min-height 100vh + padding-top $header-height + +.main + flex-grow 1 + margin 0 + padding 0
\ No newline at end of file diff --git a/themes/theme/source/css/media.styl b/themes/theme/source/css/media.styl new file mode 100644 index 00000000..c0bd3879 --- /dev/null +++ b/themes/theme/source/css/media.styl @@ -0,0 +1,28 @@ +.flex-container + width 720px + margin 0 auto + +html + font-size 18px + +@media (max-width: 1600px) + html + font-size 18px + .flex-container + width 720px + +@media (max-width: 1200px) + html + font-size 18px + .flex-container + width 640px + +@media (max-width: 688px) + html + font-size 16px + + .flex-container + display block + width calc(100% - 32px) + padding-left 16px + padding-right 16px diff --git a/themes/theme/source/css/motion.styl b/themes/theme/source/css/motion.styl new file mode 100644 index 00000000..c6599e1f --- /dev/null +++ b/themes/theme/source/css/motion.styl @@ -0,0 +1,34 @@ +underline-motion(n) + if n == 'link' + background-image linear-gradient($color-background, $color-background), linear-gradient($color-accent, $color-accent) + background-size 100% $line-third, 0% $line-third + background-position 100% 100%, 0 100% + background-repeat no-repeat, no-repeat + transition background-size $transition-duration ease + + &:hover + background-size 0 $line-third, 100% $line-third + + else if n == 'underline-link' + padding-bottom $line-secondary + background-image linear-gradient($color-text-primary, $color-text-primary), linear-gradient($color-accent, $color-accent) + background-size 100% $line-third, 0 $line-secondary + background-position 100% 100%, 0 100% + background-repeat no-repeat, no-repeat + transition background-size $transition-duration ease + + &:hover + background-size 100% $line-third, 100% $line-secondary + + else if n == 'header' + &:after + content "" + transition width $transition-duration ease + position absolute + left 0 + bottom 0 + width 0 + border-bottom solid $line-third $color-accent + + &:hover:after + width 100%
\ No newline at end of file diff --git a/themes/theme/source/css/normalize.styl b/themes/theme/source/css/normalize.styl new file mode 100644 index 00000000..a4d01c37 --- /dev/null +++ b/themes/theme/source/css/normalize.styl @@ -0,0 +1,308 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html + line-height 1.15 /* 1 */ + -webkit-text-size-adjust 100% /* 2 */ + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body + margin 0 + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 + font-size 2em + margin 0.67em 0 + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr + box-sizing content-box /* 1 */ + height 0 /* 1 */ + overflow visible /* 2 */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre + font-family monospace, monospace /* 1 */ + font-size 1em /* 2 */ + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a + background-color transparent + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] + border-bottom none /* 1 */ + text-decoration underline /* 2 */ + text-decoration underline dotted /* 2 */ + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong + font-weight 400 + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp + font-family monospace, monospace /* 1 */ + font-size 1em /* 2 */ + +/** + * Add the correct font size in all browsers. + */ + +small + font-size 80% + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup + font-size 75% + line-height 0 + position relative + vertical-align baseline + +sub + bottom -0.25em + +sup + top -0.5em + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img + border-style none + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea + font-family inherit /* 1 */ + font-size 100% /* 1 */ + line-height 1.15 /* 1 */ + margin 0 /* 2 */ + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input /* 1 */ + overflow visible + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select /* 1 */ + text-transform none + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] + -webkit-appearance button + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner + border-style none + padding 0 + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]-moz-focusring, +[type="reset"]-moz-focusring, +[type="submit"]-moz-focusring + outline 1px dotted ButtonText + +/** + * Correct the padding in Firefox. + */ + +fieldset + padding 0.35em 0.75em 0.625em + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend + box-sizing border-box /* 1 */ + color inherit /* 2 */ + display table /* 1 */ + max-width 100% /* 1 */ + padding 0 /* 3 */ + white-space normal /* 1 */ + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress + vertical-align baseline + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea + overflow auto + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] + box-sizing border-box /* 1 */ + padding 0 /* 2 */ + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button + height auto + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] + -webkit-appearance textfield /* 1 */ + outline-offset -2px /* 2 */ + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration + -webkit-appearance none + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button + -webkit-appearance button /* 1 */ + font inherit /* 2 */ + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details + display block + +/* + * Add the correct display in all browsers. + */ + +summary + display list-item + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template + display none + +/** + * Add the correct display in IE 10. + */ + +[hidden] + display none
\ No newline at end of file diff --git a/themes/theme/source/css/page/search.styl b/themes/theme/source/css/page/search.styl new file mode 100644 index 00000000..88233cef --- /dev/null +++ b/themes/theme/source/css/page/search.styl @@ -0,0 +1,65 @@ +// Search page styles + +.search-page + max-width 720px + margin 0 auto + padding $margin-l-0 $margin-m-1 + +.search-input-container + margin-bottom $margin-l-0 + +.search-input + width 100% + padding $margin-m-1 $margin-m-2 + font-size $font-size-body + border $line-third solid $color-border + border-radius $margin-s-2 + background $color-background + font-family $font-family + font-weight 400 + + &:focus + outline none + border-color $color-accent + +.search-result-container + min-height 200px + +.search-result-message + color $color-text-secondary + padding $margin-l-0 0 + text-align center + +.search-result-list + list-style none + padding 0 + margin 0 + +.search-result-item + padding $margin-m-1 0 + border-bottom $line-third solid $color-border + + &:last-child + border-bottom none + + // LocalSearch generates HTML with these classes + .search-result-title + margin-bottom $margin-s-2 + font-size $font-size-heading-h4 + + a + color $color-accent + text-decoration none + + &:hover + text-decoration underline + + .search-result + text-style(body-default) + color $color-text-primary + margin-top $margin-s-2 + margin-bottom 0 + + mark + color $color-text-primary + background-color $color-search-marker diff --git a/themes/theme/source/css/partials/footer.styl b/themes/theme/source/css/partials/footer.styl new file mode 100644 index 00000000..5819da88 --- /dev/null +++ b/themes/theme/source/css/partials/footer.styl @@ -0,0 +1,20 @@ +.footer + margin-top auto + border-top 1px solid $color-border + text-style(footer) + + .footer-text + margin-top $margin-m-0 + margin-bottom $margin-m-0 + +@media (max-width: 688px) + .footer + margin-top $margin-l-0 + + .footer-text + font-size 10*$px + margin-top $margin-s-1 + margin-bottom $margin-s-1 + + + diff --git a/themes/theme/source/css/partials/header.styl b/themes/theme/source/css/partials/header.styl new file mode 100644 index 00000000..545743f3 --- /dev/null +++ b/themes/theme/source/css/partials/header.styl @@ -0,0 +1,121 @@ +.header + position fixed + top 0 + left 0 + right 0 + z-index 100 + background $color-glass + backdrop-filter blur(12px) + -webkit-backdrop-filter blur(12px) + border-bottom 1px solid $color-border + text-style(header) + +@supports not (backdrop-filter: blur(12px)) + .header + background $color-background + +@media (max-width: 688px) + @supports not (backdrop-filter: blur(12px)) + .header-inner .site-nav .menu-list + background $color-background + +.header-inner + display flex + flex-wrap nowrap + align-items center + height $header-height + + #menu-btn + display none + + .site-nav + flex-grow 1 + overflow-x auto + +.site-brand-container + a + font-weight 400 + color $color-text-primary + +.menu-list + text-align right + display flex + + &:before + content "" + flex-grow 1 + +.menu-item + position relative + margin-left $margin-l-0 + underline-motion(header) + +.menu-item-active:after + border-bottom solid $line-secondary $color-accent + width 100% + +.logo-img + max-height $line-height-heading-h1 + width auto + max-width 100% + display flex + +@media (max-width: 688px) + .header + overflow visible + + .header-inner + flex-wrap wrap + align-items center + height $header-height + padding-top 0 + padding-bottom 0 + + #menu-btn + display flex !important + align-items center + justify-content flex-end + width 50% + height 100% + cursor pointer + color $color-text-primary + transition color $transition-duration ease + + &:hover + color $color-accent + + .site-brand-container + display flex + align-items center + width 50% + height 100% + + .site-nav + width 100% + + .menu-list + display flex + flex-direction column + max-height 0 + overflow hidden + margin-top 0 + background $color-glass + backdrop-filter blur(12px) + -webkit-backdrop-filter blur(12px) + border-top 1px solid $color-border + transition max-height 300ms ease-out + text-align left + + &.active + max-height 400px + + .menu-item + margin 0 + padding $margin-m-0 $margin-m-1 + border-bottom 1px solid $color-border + + &:last-child + border-bottom none + + a + display block
\ No newline at end of file diff --git a/themes/theme/source/css/partials/paginator.styl b/themes/theme/source/css/partials/paginator.styl new file mode 100644 index 00000000..08009372 --- /dev/null +++ b/themes/theme/source/css/partials/paginator.styl @@ -0,0 +1,28 @@ +.paginator + margin-top $margin-l-1 + +.pagination + margin-top $margin-m-1 + text-style(header) + display flex + + &:before + content "" + flex-grow 1 + +.page-number + position relative + margin-left $margin-l-0 + underline-motion(header) + +.pagination .current:after + border-bottom solid $line-secondary $color-accent + width 100% + +.pagination .space + margin-left $margin-l-0 + +@media (max-width: 688px) + .paginator + margin-top $margin-m-1 + margin-bottom $margin-m-1
\ No newline at end of file diff --git a/themes/theme/source/css/partials/post_gallery.styl b/themes/theme/source/css/partials/post_gallery.styl new file mode 100644 index 00000000..ca953848 --- /dev/null +++ b/themes/theme/source/css/partials/post_gallery.styl @@ -0,0 +1,39 @@ +.post-gallery-list + .h-line-secondary + margin-top $margin-m-1 + + .h-line-secondary:last-child + display none + +.post-gallery-item + display flex + margin-top $margin-l-1 + margin-bottom $margin-m-0 + .post-info + margin-right $margin-l-0 + width 50% + display flex + flex-direction column + + .post-title + margin-bottom $margin-m-1 + text-style(heading-h1) + + .post-date + text-style(post-date) + + .post-img + width 50% + + a + underline-motion(link) + +@media (max-width: 480px) + .post-gallery-item + flex-wrap wrap + .post-info + width 100% + .post-img + width 100% + margin-top $margin-m-1 + diff --git a/themes/theme/source/css/partials/post_list.styl b/themes/theme/source/css/partials/post_list.styl new file mode 100644 index 00000000..c5ea22cc --- /dev/null +++ b/themes/theme/source/css/partials/post_list.styl @@ -0,0 +1,39 @@ +.post-list + + a + underline-motion(link) + +.year-title + margin-top $margin-l-1 + margin-bottom $margin-m-1 + text-style(year-title) + +.post-list-item + display flex + flex-wrap nowrap + margin-top $margin-m-0 + align-items top + + .post-title + flex-grow 1 + text-style(body-default) + + .post-date + margin-left $margin-l-0 + min-width 8rem + text-align right + text-style(post-date) + line-height $line-height-body + color $color-text-secondary + +@media (max-width: 480px) + .post-list-item + flex-wrap wrap + .post-title + width 100% + + .post-date + margin-left 0 + width 100% + text-align left + diff --git a/themes/theme/source/css/partials/profile.styl b/themes/theme/source/css/partials/profile.styl new file mode 100644 index 00000000..44025cdb --- /dev/null +++ b/themes/theme/source/css/partials/profile.styl @@ -0,0 +1,69 @@ +.profile + margin-top 20vh + display flex + flex-direction row-reverse + align-items center + + .profile-content + width 50% + margin 0 $margin-l-0 0 0 + + .profile-title + margin-top 0 + margin-bottom $margin-m-0 + + .profile-body + margin-top 0 + margin-bottom $margin-m-1 + color $color-text-secondary + + .profile-title + text-style(heading-h1) + + .profile-body + text-style(body-default) + + .profile-link + margin-top 0 + margin-bottom $margin-m-1 + font-size 15*$px + + a + text-decoration underline + text-underline-offset 3px + transition color $transition-duration ease + + &:hover + color $color-accent + + + .profile-image + width 50% + display flex + align-items center + justify-content center + + img + max-width 100% + max-height 35vh + object-fit contain + +@media (max-width: 480px) + .profile + flex-wrap wrap + align-items flex-start + margin-top $margin-l-0 + + .profile-content + width 100% + margin-top $margin-m-0 + + .profile-link + font-size 14*$px + + .profile-image + width 100% + + img + max-height 25vh +
\ No newline at end of file diff --git a/themes/theme/source/css/post/code.styl b/themes/theme/source/css/post/code.styl new file mode 100644 index 00000000..f641f8d2 --- /dev/null +++ b/themes/theme/source/css/post/code.styl @@ -0,0 +1,97 @@ +// 统一字体权重 +font-weight-normal() + font-weight 400 + +// 代码块基础样式 +code + text-style(code-highlight) + font-weight 400 + +.code + pre + span + text-style(code-default) + font-weight 400 + +// 代码高亮区域 - 设置整体背景色 +.highlight + margin 0 0 $margin-m-2 0 + overflow-x auto + border 1px solid $color-border + border-radius $margin-s-1 + // 代码块背景色 + background-color $color-code-background + + .line + width $margin-l-2 + + table + margin 0 + border-spacing 0 + border none + // 表格继承背景色 + background-color transparent + + td.code + padding 0 $margin-s-1 0 $margin-m-0 + + pre + font-weight 400 + background-color transparent + +// 行号列 - 与代码块背景色保持一致 +td.gutter + width $margin-l-0 + padding 0 $margin-m-0 + vertical-align top + position -webkit-sticky + position sticky + left 0 + // 与代码块背景色一致 + background-color $color-code-background + // 添加右边框分隔 + border-right 1px solid $color-border + // 确保层级正确 + z-index 1 + + pre + margin 0 + color $color-code-marker + font-size $font-size-code + font-weight 400 + background-color transparent + +// 代码列 +td.code + vertical-align top + background-color transparent + + pre + margin 0 + font-weight 400 + background-color transparent + +// 所有 pre 标签 +pre + margin 0 + overflow-x auto + font-weight 400 + +// 移除内联代码背景（在代码块中不需要） +.highlight code + background-color transparent + padding 0 + +@media (max-width: 688px) + code + font-size 12*$px + + .highlight + pre + font-size 12*$px + + td.gutter + width $margin-m-2 + padding-right $margin-s-2 + font-size 11*$px + background-color $color-code-background diff --git a/themes/theme/source/css/post/media.styl b/themes/theme/source/css/post/media.styl new file mode 100644 index 00000000..3d49010f --- /dev/null +++ b/themes/theme/source/css/post/media.styl @@ -0,0 +1,17 @@ +img + width 100% + height auto + +// fix 16:9 ratio +.video-container + width 100% + padding-top 56.25% + position relative + +.video-container>iframe + position absolute + top 0 + left 0 + width 100% + height 100% + diff --git a/themes/theme/source/css/post/mermaid.styl b/themes/theme/source/css/post/mermaid.styl new file mode 100644 index 00000000..aae47ec5 --- /dev/null +++ b/themes/theme/source/css/post/mermaid.styl @@ -0,0 +1,96 @@ +// Mermaid 图表样式 + +// 基础容器样式 +.mermaid + display flex + justify-content center + align-items center + margin $margin-l-0 auto + padding $margin-m-2 + background $color-text-fourth + border $line-third solid $color-border + border-radius $margin-s-2 + cursor pointer + transition all $transition-duration ease + max-width 100% + overflow auto + position relative + + // 悬停效果 + &:hover + border-color $color-accent + box-shadow 0 4*$px 12*$px rgba(0, 0, 0, 0.1) + + // 提示文字 + &::after + content "点击放大" + position absolute + bottom $margin-s-2 + right $margin-s-2 + font-size $font-size-post-tag + color $color-text-secondary + opacity 0 + transition opacity $transition-duration + + &:hover::after + opacity 1 + + // SVG 图表样式 + svg + max-width 100% + height auto + +// Mermaid 放大模态框 +.mermaid-modal + display none + position fixed + top 0 + left 0 + width 100% + height 100% + background $color-overlay + z-index 10000 + justify-content center + align-items center + padding $margin-primary + + &.active + display flex + + // 关闭按钮 + .mermaid-close + position absolute + top $margin-m-2 + right $margin-m-2 + width 48*$px + height 48*$px + background $color-background + border $line-third solid $color-border + border-radius 50% + cursor pointer + display flex + justify-content center + align-items center + font-size 24*$px + color $color-text-primary + transition all $transition-duration + + &:hover + background $color-accent + color $color-background + border-color $color-accent + + // 放大后的图表容器 + .mermaid-content + max-width 95vw + max-height 90vh + overflow auto + background $color-background + padding $margin-l-0 + border-radius $margin-s-2 + box-shadow 0 8*$px 32*$px rgba(0, 0, 0, 0.3) + + svg + display block + max-width none + max-height none diff --git a/themes/theme/source/css/post/post_comment.styl b/themes/theme/source/css/post/post_comment.styl new file mode 100644 index 00000000..b027897a --- /dev/null +++ b/themes/theme/source/css/post/post_comment.styl @@ -0,0 +1,12 @@ +.post-comment + margin-top $margin-l-1 + +.v[data-class="v"] .vsys + display none!important + +.vcontent + p + margin-top 0!important + font-size $font-size-comment!important + color $color-text-primary!important + diff --git a/themes/theme/source/css/post/post_content.styl b/themes/theme/source/css/post/post_content.styl new file mode 100644 index 00000000..701f19e3 --- /dev/null +++ b/themes/theme/source/css/post/post_content.styl @@ -0,0 +1,104 @@ +.post-content + margin-top $margin-l-1 + +h1, h2, h3, h4, h5, h6 + margin-top $margin-l-0 + margin-bottom $margin-m-1 + +h1 + text-style(heading-h1) + +h2 + text-style(heading-h2) + +h3 + text-style(heading-h3) + +h4 + text-style(heading-h4) + +h5 + text-style(heading-h5) + +h6 + text-style(heading-h6) + +p + text-style(body-default) + +strong + text-style(body-bold) + +em + text-style(body-italic) + +del + text-style(body-delete) + +.post-content + a + underline-motion(underline-link) + +blockquote + margin-left 0 + margin-right 0 + margin-top $margin-m-2 + border-left $margin-s-2 solid $color-text-secondary + + p + margin-left $margin-m-2 + margin-top 0 + margin-bottom 0 + margin-right $margin-m-2 + padding-top $margin-m-0 + padding-bottom $margin-m-0 + + blockquote + margin-left $margin-m-2 + margin-top 0 + margin-bottom 0 + +.post-content + li + text-style(body-default) + margin-top $margin-m-0 + + ol + padding-left $margin-l-0 + margin-left $margin-m-1 + margin-right $margin-m-1 + margin-top $margin-m-2 + + ol + margin-top $margin-m-0 + + ul + padding-left $margin-l-0 + margin-left $margin-m-1 + margin-right $margin-m-1 + margin-top $margin-m-2 + + ul + margin-top $margin-m-0 + + li + list-style-type disc + + + .task-list + padding-left 0 + .task-list-item + list-style none + +dl + dt + padding $margin-m-0 0 + text-style(body-bold) + + dt::after + content " :" + + dd + margin 0 + + diff --git a/themes/theme/source/css/post/post_footer.styl b/themes/theme/source/css/post/post_footer.styl new file mode 100644 index 00000000..65782aec --- /dev/null +++ b/themes/theme/source/css/post/post_footer.styl @@ -0,0 +1,29 @@ +.post-footer + margin-top $margin-l-1 + + a + underline-motion(link) + +.post-nav + margin-top $margin-m-1 + display flex + flex-wrap wrap + text-style(header) + + .prev-item + display flex + text-align left + min-width 50% + align-items center + .arrow-left + margin-right $margin-s-2 + + .next-item + display flex + flex-direction row-reverse + text-align right + min-width 50% + align-items center + .arrow-right + margin-left $margin-s-2 +
\ No newline at end of file diff --git a/themes/theme/source/css/post/post_head.styl b/themes/theme/source/css/post/post_head.styl new file mode 100644 index 00000000..32f4b47b --- /dev/null +++ b/themes/theme/source/css/post/post_head.styl @@ -0,0 +1,18 @@ +.post-head + margin-top $margin-l-1 + + .post-info + width 100% + display flex + flex-direction column + + .post-title + margin-bottom $margin-m-1 + text-style(heading-h1) + + .post-date + text-style(post-date) + + .post-img + margin-top $margin-l-1 + diff --git a/themes/theme/source/css/post/table.styl b/themes/theme/source/css/post/table.styl new file mode 100644 index 00000000..405e2433 --- /dev/null +++ b/themes/theme/source/css/post/table.styl @@ -0,0 +1,36 @@ +.post-content + table + border $color-text-primary solid $line-third + width 100% + text-align left + border-collapse collapse + table-layout fixed + + td, th + padding $margin-m-1 + + th + font-weight 400 + + td + font-weight 400 + + table, tboby, tr, td + background-color inherit + +.highlight>table + width auto + min-width fit-content + border none + + td + padding 0 + border none + +@media (max-width: 480px) + .block-table + display block + overflow-x auto + + +
\ No newline at end of file diff --git a/themes/theme/source/css/post/tag_plugin.styl b/themes/theme/source/css/post/tag_plugin.styl new file mode 100644 index 00000000..9a1a7d94 --- /dev/null +++ b/themes/theme/source/css/post/tag_plugin.styl @@ -0,0 +1,48 @@ +.gist + td + border 0 + + a + color $color-text-secondary + background-image none!important + +blockquote>footer + margin 0 $margin-m-2 + padding $margin-m-0 0 + font-size $font-size-blockquote-footer + color $color-text-secondary + + cite + margin-left $margin-m-0 + + cite::before + content " — " + + strong + color $color-text-secondary + font-size $font-size-blockquote-footer + + a + color $color-text-secondary + background-image none!important + + +figcaption + font-family monospace + font-size $font-size-blockquote-footer + padding $margin-m-0 0 + color $color-text-secondary + + span + padding-right $margin-m-0 + + a + color $color-text-secondary + background-image none!important + +blockquote.pullquote.left + float left + +blockquote.pullquote.right + float right +
\ No newline at end of file diff --git a/themes/theme/source/css/post/task_list.styl b/themes/theme/source/css/post/task_list.styl new file mode 100644 index 00000000..ea5dabca --- /dev/null +++ b/themes/theme/source/css/post/task_list.styl @@ -0,0 +1,43 @@ +ul + li.task-list-item + position relative + + li.task-list-item>input[type=checkbox] + list-style none + background none + appearance none + -webkit-appearance none + -moz-appearance none; + width $margin-l-0 + display inline-block + border none + opacity 1 + + li.task-list-item>input[type=checkbox][checked]:before + background $color-text-primary + -webkit-mask-image url('../icon/checkbox-checked.svg') + -webkit-mask-position center center + mask-image url('../icon/checkbox-checked.svg') + -webkit-mask-repeat no-repeat + + li.task-list-item>input[type=checkbox]:before + background $color-text-primary + -webkit-mask-image url('../icon/checkbox-default.svg') + -webkit-mask-position center center + mask-image url('../icon/checkbox-default.svg') + -webkit-mask-repeat no-repeat + + li.task-list-item>input[type=checkbox]:after, li.task-list-item>input[type=checkbox]:before + display block + position absolute + content "X" + color transparent + left 0 + top 0 + width $icon-size + height $line-height-body + background-size contain + background-repeat no-repeat + background-position-x 0 + background-position-y center + --webkit-touch-callout none
\ No newline at end of file diff --git a/themes/theme/source/css/style.styl b/themes/theme/source/css/style.styl new file mode 100644 index 00000000..97bd4cb9 --- /dev/null +++ b/themes/theme/source/css/style.styl @@ -0,0 +1,47 @@ +// media +@import "media.styl" + +// variable & init +@import "variable.styl" +@import "normalize.styl" + +// color mode +@import "color.styl" + +// font +@import "font-slices.styl" +@import "font.styl" + +// structure style +@import "layout.styl" +@import "base.styl" + +// motion +@import "motion.styl" + +// partials +@import "partials/header.styl" +@import "partials/footer.styl" +@import "partials/post_list.styl" +@import "partials/post_gallery.styl" +@import "partials/paginator.styl" +@import "partials/profile.styl" + +// pages +@import "page/search.styl" + +// post +@import "post/post_content.styl" +@import "post/post_head.styl" +@import "post/post_footer.styl" +@import "post/post_comment.styl" +@import "post/code.styl" +@import "post/table.styl" +@import "post/media.styl" +@import "post/tag_plugin.styl" +@import "post/task_list.styl" +@import "post/mermaid.styl" + +// component +@import "component/icon.styl" +@import "component/component.styl" diff --git a/themes/theme/source/css/variable.styl b/themes/theme/source/css/variable.styl new file mode 100644 index 00000000..f8af5332 --- /dev/null +++ b/themes/theme/source/css/variable.styl @@ -0,0 +1,72 @@ +// PIXEL +$px = 0.0625rem + +$line-primary = 4px +$line-secondary = 2px +$line-third = 1px + +$icon-size = 20*$px + +$margin-primary = 48*$px +$margin-l-2 = 40*$px +$margin-l-1 = 32*$px +$margin-l-0 = 24*$px +$margin-m-2 = 16*$px +$margin-m-1 = 12*$px +$margin-m-0 = 8*$px +$margin-s-2 = 4*$px +$margin-s-1 = 2*$px +$margin-s-0 = 1*$px + +$font-family = 'GoogleSansCode', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif + +$font-weight-light = 300 +$font-weight-regular = 400 +$font-weight-medium = 500 +$font-weight-semibold = 600 +$font-weight-bold = 700 + +$font-size-header = 13*$px +$font-size-footer = 11*$px + +$font-size-heading-h1 = 26*$px +$font-size-heading-h2 = 22*$px +$font-size-heading-h3 = 17*$px +$font-size-heading-h4 = 15*$px +$font-size-heading-h5 = 14*$px +$font-size-heading-h6 = 14*$px + +$font-size-body = 15*$px + +$font-size-code = 13*$px + +$font-size-comment = 13*$px + +$font-size-post-date = 13*$px +$font-size-year-title = 26*$px +$font-size-post-tag = 11*$px + +$font-size-blockquote-footer = 11*$px + +$line-height-header = 18*$px +$line-height-footer = 18*$px + +$line-height-heading-h1 = 32*$px +$line-height-heading-h2 = 28*$px +$line-height-heading-h3 = 22*$px +$line-height-heading-h4 = 20*$px +$line-height-heading-h5 = 18*$px +$line-height-heading-h6 = 18*$px + +$line-height-body = 22*$px + +$line-height-code = 15*$px + +$line-height-post-date = 18*$px +$line-height-year-title = 32*$px +$line-height-post-tag = 14*$px + +$transition-duration = 200ms +$header-height = 48*$px + + |