diff --git a/_config.yml b/_config.yml index a3f86e0..08aea2e 100755 --- a/_config.yml +++ b/_config.yml @@ -339,18 +339,17 @@ style: code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif' text-align: left color: - common: - theme: 'hsl(192 98% 55%)' # 主题色 - accent: 'hsl(14 100% 57%)' # 强调色 - link: 'hsl(207 90% 54%)' # 超链接颜色 - button: 'hsl(192 98% 55%)' # 按钮颜色 - hover: 'hsl(14 100% 57%)' # 按钮高亮颜色 # 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可) - dynamic: - background: 'hsl(212 16% 98%)' # 浅色背景颜色 - block: 'hsl(212 8% 95%)' # 块背景颜色 - code: 'hsl(14 100% 48%)' # 行内代码颜色 - text: 'hsl(0 0% 20%)' # 文本颜色 + background: 'hsl(212 16% 98%)' # 浅色背景颜色 + block: 'hsl(212 8% 95%)' # 块背景颜色 + code: 'hsl(14 100% 48%)' # 行内代码颜色 + text: 'hsl(0 0% 20%)' # 文本颜色 + # 主题色配置(不会根据明暗动态调整,请设置为通用的颜色) + theme: 'hsl(192 98% 55%)' # 主题色 + accent: 'hsl(14 100% 57%)' # 强调色 + link: 'hsl(207 90% 54%)' # 超链接颜色 + button: 'hsl(192 98% 55%)' # 按钮颜色 + hover: 'hsl(14 100% 57%)' # 按钮高亮颜色 animated_avatar: animate: auto # auto, always background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp diff --git a/scripts/tags/poetry.js b/scripts/tags/poetry.js index 8cb3e01..61979b9 100644 --- a/scripts/tags/poetry.js +++ b/scripts/tags/poetry.js @@ -3,7 +3,7 @@ * 格式与官方标签插件一致使用空格分隔,中括号内的是可选参数(中括号不需要写出来) * * poetry: - * {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %} + * {% poetry [title] [author:作者] [date:日期] [footer:footer] %} * body * {% endpoetry %} * @@ -13,13 +13,11 @@ hexo.extend.tag.register('poetry', function(args, content) { var el = ''; - args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']); + args = hexo.args.map(args, ['author', 'date', 'footer'], ['title']); el += '
'; + el += '' + el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>'; el += ''; el += content(); el += ''; + el += '
' } else { - el += '<' + args.el + ' class="tag-plugin quot"' + type + '>'; + el += '' + el += '<' + args.el + ' class="content"' + type + '>'; el += content(); el += ''; + el += '' } return el; }); diff --git a/scripts/tags/tag.js b/scripts/tags/tag.js new file mode 100644 index 0000000..f080178 --- /dev/null +++ b/scripts/tags/tag.js @@ -0,0 +1,35 @@ +/** + * tag.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/ + * 格式与官方标签插件一致使用空格分隔,中括号内的是可选参数(中括号不需要写出来) + * + * {% tag text href [color:color] %} + * + */ + +'use strict'; + +const tag_colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'] +var tag_index = 0; + +hexo.extend.tag.register('tag', function(args) { + args = hexo.args.map(args, ['color'], ['text', 'href']); + if (args.color == null) { + const default_color = hexo.theme.config.tag_plugins.tag?.default_color + if (default_color) { + args.color = default_color + } else { + args.color = tag_colors[tag_index] + tag_index += 1 + if (tag_index >= tag_colors.length) { + tag_index = 0 + } + } + } + var el = ''; + el += 'code:not([class]),li>code:not([class]) border-radius: $border-block overflow: hidden background: var(--block) - border: 1px solid var(--block-border) line-height: 1.5 font-family: $ff-code box-sizing: border-box @@ -35,7 +34,6 @@ p>code:not([class]),li>code:not([class]) background: var(--block-hover) border-top-left-radius: "calc(%s - 1px)" % $border-block border-top-right-radius: "calc(%s - 1px)" % $border-block - border-bottom: 1px solid var(--block-border) span margin-right: 4px >table @@ -102,7 +100,6 @@ table:not([class]) >.hljs padding: 1rem border-radius: $border-block - border: 1px solid var(--block-border) line-height: 1.5 box-sizing: border-box diff --git a/source/css/_custom.styl b/source/css/_custom.styl index ad7e762..df4fe5b 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -1,17 +1,17 @@ @require('_defines/const') // 通用主题色 -$color-theme = convert(hexo-config('style.color.common.theme')) -$color-accent = convert(hexo-config('style.color.common.accent')) -$color-link = convert(hexo-config('style.color.common.link')) -$color-button = convert(hexo-config('style.color.common.button')) -$color-hover = convert(hexo-config('style.color.common.hover')) +$color-theme = convert(hexo-config('style.color.theme')) +$color-accent = convert(hexo-config('style.color.accent')) +$color-link = convert(hexo-config('style.color.link')) +$color-button = convert(hexo-config('style.color.button')) +$color-hover = convert(hexo-config('style.color.hover')) // 动态颜色 -$dynamic-background = convert(hexo-config('style.color.dynamic.background')) -$dynamic-block = convert(hexo-config('style.color.dynamic.block')) -$dynamic-code = convert(hexo-config('style.color.dynamic.code')) -$dynamic-text = convert(hexo-config('style.color.dynamic.text')) +$color-background = convert(hexo-config('style.color.background')) +$color-block = convert(hexo-config('style.color.block')) +$color-code = convert(hexo-config('style.color.code')) +$color-text = convert(hexo-config('style.color.text')) // @font-face // font-family: 'Dosis' @@ -41,7 +41,7 @@ $fs-13 = .8125rem $fs-12 = .75rem $fs-h1 = 1.75rem // 32px -$fs-h2 = 1.5rem // 24px +$fs-h2 = 1.5rem // 24px $fs-h3 = 1.375rem // 22px $fs-h4 = 1.125rem // 18px $fs-h5 = $fs-15 diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl index d2e65eb..8f4e4d0 100644 --- a/source/css/_defines/theme.styl +++ b/source/css/_defines/theme.styl @@ -1,56 +1,56 @@ -$dynamic-background-h = hue($dynamic-background) -$dynamic-background-s = saturation($dynamic-background) -$dynamic-background-l = lightness($dynamic-background) +$color-background-h = hue($color-background) +$color-background-s = saturation($color-background) +$color-background-l = lightness($color-background) -$dynamic-block-h = hue($dynamic-block) -$dynamic-block-s = saturation($dynamic-block) -$dynamic-block-l = lightness($dynamic-block) +$color-block-h = hue($color-block) +$color-block-s = saturation($color-block) +$color-block-l = lightness($color-block) -$dynamic-code-h = hue($dynamic-code) -$dynamic-code-s = saturation($dynamic-code) -$dynamic-code-l = lightness($dynamic-code) +$color-code-h = hue($color-code) +$color-code-s = saturation($color-code) +$color-code-l = lightness($color-code) -$dynamic-text-h = hue($dynamic-text) -$dynamic-text-s = saturation($dynamic-text) -$dynamic-text-l = lightness($dynamic-text) +$color-text-h = hue($color-text) +$color-text-s = saturation($color-text) +$color-text-l = lightness($color-text) set_text_dark() - --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0) - --text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l) - --text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75) - --text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25) - --text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5) - --text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2) - --text-code: hsl($dynamic-code-h, $dynamic-code-s, $dynamic-code-l * 1) + --text-p0: hsl($color-text-h, $color-text-s, 0) + --text-p1: hsl($color-text-h, $color-text-s, $color-text-l) + --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75) + --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25) + --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5) + --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2) + --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1) set_text_light() - --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 100) - --text-p1: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.25) - --text-p2: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.5) - --text-p3: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1) - --text-p4: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.25) - --text-meta: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.5) - --text-code: hsl($dynamic-code-h, $dynamic-code-s, 48) + --text-p0: hsl($color-text-h, $color-text-s, 100) + --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5) + --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75) + --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2) + --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4) + --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75) + --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1.25) :root - --site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98) - --card: hsl($dynamic-block-h, $dynamic-block-s, 100) - --block: hsl($dynamic-block-h, $dynamic-block-s, 95) - --block-border: hsl($dynamic-block-h, $dynamic-block-s, 90) - --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92) - --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100) + --site-bg: hsl($color-background-h, $color-background-s, 98) + --card: hsl($color-block-h, $color-block-s, 100) + --block: hsl($color-block-h, $color-block-s, 95) + --block-border: hsl($color-block-h, $color-block-s, 90) + --block-hover: hsl($color-block-h, $color-block-s, 92) + --block-lighten: hsl($color-block-h, $color-block-s, 100) set_text_dark() - --theme-bg: $color-theme + --theme-bg2: $color-theme --theme-link: $color-link set_darkmode() :root - --site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16) - --card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25) - --block: hsl($dynamic-block-h, $dynamic-block-s, 12) - --block-border: hsl($dynamic-block-h, $dynamic-block-s, 24) - --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9) - --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30) + --site-bg: hsl($color-background-h, $color-background-s / 2, 16) + --card: hsl($color-block-h, $color-block-s * 1.5, 25) + --block: hsl($color-block-h, $color-block-s, 12) + --block-border: hsl($color-block-h, $color-block-s, 24) + --block-hover: hsl($color-block-h, $color-block-s, 9) + --block-lighten: hsl($color-block-h, $color-block-s, 30) set_text_light() @media screen and (max-width: $device-mobile-max) --site-bg: black diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index a428000..3f357f9 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -22,8 +22,8 @@ h1.article-title .md-text.content position: relative margin-bottom: 2rem - display: flex - flex-direction: column + // display: flex + // flex-direction: column &.indent >p:not([class]) text-indent: 'calc(%s * 2)' % $fs-p diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl index 7fa0a84..b15a29a 100644 --- a/source/css/_layout/tag-plugins/common.styl +++ b/source/css/_layout/tag-plugins/common.styl @@ -13,13 +13,20 @@ set_text_black() set_dynamic_color($theme) --theme: $theme - --theme-bg: hsl(hue($theme), 100, 95) - --theme-border: hsl(hue($theme), 90, 50) + --theme-bg1: hsl(hue($theme), 90, 90) + --theme-bg2: hsl(hue($theme), 80, 95) + --theme-border: hsl(hue($theme), 50, 80) + --text-p0: hsl(hue($theme), 50, 24) + --text-p1: hsl(hue($theme), 40, 24) + --text-p2: hsl(hue($theme), 90, 24) .tag-plugin --theme: var(--text-p1) --theme-border: var(--block-border) - --theme-bg: var(--block) + --theme-bg1: hsl(hue($color-theme), 90, 90) + --theme-bg2: var(--block) + &.tag + --text-p2: hsl(hue($color-theme), 90, 24) .tag-plugin[color='red'] set_dynamic_color($c-red) @@ -37,30 +44,36 @@ set_dynamic_color($theme) set_dynamic_color($c-purple) .tag-plugin[color='light'] - --theme-bg: white + --theme-bg2: white .tag-plugin[color='dark'] - --theme-bg: #333 + --theme-bg2: #333 set_text_white() .tag-plugin[color='warning'] --theme: $c-yellow --theme-border: #ffe659 - --theme-bg: #ffe659 + --theme-bg2: #ffe659 --theme-link: #ff453a .tag-plugin[color='error'] --theme: $c-yellow --theme-border: #ff453a - --theme-bg: #ff453a + --theme-bg2: #ff453a --theme-link: #ffe659 set_text_white() set_darkmode_tags() set_dynamic_color($theme) --theme: $theme - --theme-bg: hsl(hue($theme), 30, 20) - --theme-border: hsl(hue($theme), 90, 40) + --theme-bg1: hsl(hue($theme), 80, 20) + --theme-bg2: hsl(hue($theme), 16, 16) + --theme-border: hsl(hue($theme), 50, 24) + --text-p0: hsl(hue($theme), 80, 80) + --text-p1: hsl(hue($theme), 64, 90) + --text-p2: hsl(hue($theme), 80, 72) + .tag-plugin.tag + set_dynamic_color($color-theme) .tag-plugin[color='red'] set_dynamic_color($c-red) .tag-plugin[color='orange'] @@ -77,11 +90,11 @@ set_darkmode_tags() set_dynamic_color($c-purple) .tag-plugin[color='light'] --theme-border: white - --theme-bg: #fff + --theme-bg2: #fff .tag-plugin[color='dark'] --theme-border: black - --theme-bg: #111 + --theme-bg2: #111 set_text_white() .tag-plugin[color='warning'],.tag-plugin[color='light'] diff --git a/source/css/_layout/tag-plugins/folding.styl b/source/css/_layout/tag-plugins/folding.styl index 812e2e1..9bad5b3 100644 --- a/source/css/_layout/tag-plugins/folding.styl +++ b/source/css/_layout/tag-plugins/folding.styl @@ -4,7 +4,7 @@ details.folding margin: 1rem 0 border-radius: $border-block font-size: $fs-14 - background: var(--theme-bg) + background: var(--theme-bg2) border: 1px solid var(--theme-border) summary cursor: pointer diff --git a/source/css/_layout/tag-plugins/link.styl b/source/css/_layout/tag-plugins/link.styl index 31a2602..da02782 100644 --- a/source/css/_layout/tag-plugins/link.styl +++ b/source/css/_layout/tag-plugins/link.styl @@ -69,7 +69,7 @@ >.bottom margin: 0 1rem 1rem .title - font-size: $fs-15 + font-size: 1rem margin-bottom: 0.5rem .md-text .link-card diff --git a/source/css/_layout/tag-plugins/mark.styl b/source/css/_layout/tag-plugins/mark.styl index fbc1488..bfdd90d 100644 --- a/source/css/_layout/tag-plugins/mark.styl +++ b/source/css/_layout/tag-plugins/mark.styl @@ -1,8 +1,8 @@ .md-text .tag-plugin.mark padding: 0 1px border-radius: 2px - background: var(--theme-bg) + background: var(--theme-bg2) border: 1px solid var(--theme-border) color: var(--text-p0) &[color=dark] - border-color: var(--theme-bg) + border-color: var(--theme-bg2) diff --git a/source/css/_layout/tag-plugins/note.styl b/source/css/_layout/tag-plugins/note.styl index 77c7fd2..a3bcf50 100644 --- a/source/css/_layout/tag-plugins/note.styl +++ b/source/css/_layout/tag-plugins/note.styl @@ -4,7 +4,7 @@ margin-bottom: 1rem padding: 0 1rem border-radius: $border-block - background: var(--theme-bg) + background: var(--theme-bg2) border: 1px solid var(--theme-border) color: var(--text-p1) >.title diff --git a/source/css/_layout/tag-plugins/poetry.styl b/source/css/_layout/tag-plugins/poetry.styl index 0f6e8b8..edff033 100644 --- a/source/css/_layout/tag-plugins/poetry.styl +++ b/source/css/_layout/tag-plugins/poetry.styl @@ -1,31 +1,32 @@ .md-text .tag-plugin.poetry - align-self: center - &[align=center] - align-items: center - >.title - font-weight: 500 - font-size: 1rem - margin-top: var(--gap-p) - >.meta - color: var(--text-p2) - font-size: $fs-12 - font-weight: 500 - span+span - margin-left: 4px - >.body - margin: var(--gap-p) 0 - border-top: 1px dashed var(--block-border) - border-bottom: 1px dashed var(--block-border) - p - font-size: $fs-14 - >.footer - font-style: italic - color: var(--text-p4) - margin: var(--gap-p) 0 - font-size: $fs-12 + display: flex + flex-direction: column + align-items: center + .content + >.title + font-weight: 500 + font-size: 1rem + margin-top: var(--gap-p) + >.meta + color: var(--text-p2) + font-size: $fs-12 + font-weight: 500 + span+span + margin-left: 4px + >.body + margin: var(--gap-p) 0 + border-top: 1px dashed var(--block-border) + border-bottom: 1px dashed var(--block-border) + p + font-size: $fs-14 + >.footer + font-style: italic + color: var(--text-p4) + margin: var(--gap-p) 0 + font-size: $fs-12 // 描边修饰 -.md-text .tag-plugin.poetry +.md-text .tag-plugin.poetry .content padding-left: 1rem position: relative &:before diff --git a/source/css/_layout/tag-plugins/quot.styl b/source/css/_layout/tag-plugins/quot.styl index 6a889de..7f6c259 100644 --- a/source/css/_layout/tag-plugins/quot.styl +++ b/source/css/_layout/tag-plugins/quot.styl @@ -1,62 +1,66 @@ .md-text .tag-plugin.quot text-align: center - position: relative align-items: center - max-width 400px -.md-text .tag-plugin.quot:not(span) - display: inline-flex - align-self: center - border-bottom: none - font-weight: 700 - &:first-child - margin-top: 1.5rem - a.headerlink:before - content: '' - padding: 16px 24px 8px 24px - @media screen and (max-width: $device-mobile) - padding: 16px 20px 8px - line-height: 1.2 + display: flex + flex-direction: column + + .content:not(span) + display: flex + align-items: center + border-bottom: none + font-weight: 700 + &:first-child + margin-top: 1.5rem + a.headerlink:before + content: '' + padding: 16px 24px 8px 24px + @media screen and (max-width: $device-mobile) + padding: 16px 20px 8px + line-height: 1.2 +.md-text .tag-plugin.quot .content + max-width 400px + position: relative // override -.md-text.content - .quot:not(span) - color: var(--text-p0) - h1.quot +.tag-plugin.quot + h1 font-size: $fs-h1 font-weight: 900 padding: 20px 32px 12px 32px @media screen and (max-width: $device-mobile) padding: 20px 24px 12px - h2.quot,h3.quot,h4.quot,h5.quot,h6.quot + h2,h3,h4,h5,h6 font-size: $fs-h3 - p.quot + p font-size: $fs-h4 + color: var(--text-p0) // type=text -.md-text .tag-plugin.quot[type=text]:not(span) - &:before,&:after - content: "" - position: absolute - width: 8px - height: 14px - &:before - top: 8px - left: 0 - border-top: 6px solid $color-accent - border-left: 6px solid $color-accent - &:after - right: 0 - bottom: 0 - border-right: 6px solid $color-accent - border-bottom: 6px solid $color-accent -.md-text.content h1.quot[type=text] - &:before,&:after - width: 12px - height: 20px - border-width: 8px +.md-text .tag-plugin.quot + .content[type=text]:not(span) + &:before,&:after + content: "" + position: absolute + width: 8px + height: 14px + &:before + top: 8px + left: 0 + border-top: 6px solid $color-accent + border-left: 6px solid $color-accent + &:after + right: 0 + bottom: 0 + border-right: 6px solid $color-accent + border-bottom: 6px solid $color-accent + h1.content[type=text] + &:before,&:after + width: 12px + height: 20px + border-width: 8px // type=icon -.md-text .tag-plugin.quot[type=icon]:not(span) +.md-text .tag-plugin.quot .content[type=icon]:not(span) .icon height: 1.5em display: inline-block @@ -69,7 +73,7 @@ margin-left: .5rem // inline quot -.md-text span.tag-plugin.quot +.md-text span.tag-plugin.quot .content font-weight: 500 &:before,&:after color: $color-accent diff --git a/source/css/_layout/tag-plugins/tag.styl b/source/css/_layout/tag-plugins/tag.styl new file mode 100644 index 0000000..91ab053 --- /dev/null +++ b/source/css/_layout/tag-plugins/tag.styl @@ -0,0 +1,13 @@ +.md-text .tag-plugin.tag + padding: 0px 4px + border-radius: 4px + background: var(--theme-bg1) + color: var(--text-p2) + margin: 2px 0 + display: inline-block + font-size: $fs-14 + trans2 background color + &:hover + background: var(--text-p2) + color: var(--theme-bg1) + \ No newline at end of file diff --git a/source/css/_layout/widgets/ghuser.styl b/source/css/_layout/widgets/ghuser.styl index eeb7c6c..b0b010b 100644 --- a/source/css/_layout/widgets/ghuser.styl +++ b/source/css/_layout/widgets/ghuser.styl @@ -55,12 +55,10 @@ border: 0 a margin: 0 - &:hover - box-shadow: none - background: var(--block) &.active box-shadow: none position: relative + background: none &:after content: '' position: absolute @@ -70,6 +68,9 @@ left: 'calc(50% - 0.5 * %s)' % @width border-radius: 4px background: $color-theme + &:hover + box-shadow: none + background: var(--block) .buttons margin: 1rem 0