hexo-theme-stellar 1.17.1 → 1.18.0

package/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 += '<a class="tag-plugin tag"';
+  el += ' ' + hexo.args.joinTags(args, ['color', 'href']).join(' ');
+  el += '>';
+  el += args.text;
+  el += '</a>';
+  return el;
+});

package/scripts/tags/toc.js

@@ -2,7 +2,7 @@
  * toc.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% toc wiki:xxx [open:true] [display:mobile] title %}
+ * {% toc wiki:xxx [title] [open:true] [display:mobile] %}
  */
 
 'use strict';
@@ -33,7 +33,7 @@ hexo.extend.tag.register('toc', function(args) {
   el += '>';
 
   el += '<details class="toc"';
-  if (args.open !== false) {
+  if (args.open != 'false') {
     el += ' open';
   }
   el += '>';

package/source/css/_common/highlight.styl

@@ -15,7 +15,6 @@ p>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
 

package/source/css/_custom.styl

@@ -1,31 +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'))
-
-// 浅色
-$light-background = convert(hexo-config('style.color.light.background'))
-$light-block = convert(hexo-config('style.color.light.block'))
-$light-card = convert(hexo-config('style.color.light.card'))
-$light-title = convert(hexo-config('style.color.light.title'))
-$light-text = convert(hexo-config('style.color.light.text'))
-$light-code = convert(hexo-config('style.color.light.code'))
-
-// 深色
-$dark-background = convert(hexo-config('style.color.dark.background'))
-$dark-block = convert(hexo-config('style.color.dark.block'))
-$dark-card = convert(hexo-config('style.color.dark.card'))
-$dark-title = convert(hexo-config('style.color.dark.title'))
-$dark-text = convert(hexo-config('style.color.dark.text'))
-$dark-code = convert(hexo-config('style.color.dark.code'))
-
-// 移动端深色背景（OLED调成纯黑可以省电）
-$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
-
+$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'))
+
+// 动态颜色
+$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'
@@ -55,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
@@ -64,7 +50,7 @@ $fs-p    = $fs-15
 $fs-code = $fs-13
 
 $border-card = 12px
-$border-block = 8px
+$border-block = 6px
 $border-image = 6px
 
 // 可以动态变化的属性

package/source/css/_defines/theme.styl

@@ -1,46 +1,59 @@
-set_text_light()
-  --text-p0: $dark-title
-  --text-p1: mix($dark-text, $dark-background, 85)
-  --text-p2: mix($dark-text, $dark-background, 70)
-  --text-p3: mix($dark-text, $dark-background, 45)
-  --text-p4: mix($dark-text, $dark-background, 35)
-  --text-meta: mix($dark-text, $dark-background, 30)
-  --text-code: $dark-code
+$color-background-h = hue($color-background)
+$color-background-s = saturation($color-background)
+$color-background-l = lightness($color-background)
+
+$color-block-h = hue($color-block)
+$color-block-s = saturation($color-block)
+$color-block-l = lightness($color-block)
+
+$color-code-h = hue($color-code)
+$color-code-s = saturation($color-code)
+$color-code-l = lightness($color-code)
+
+$color-text-h = hue($color-text)
+$color-text-s = saturation($color-text)
+$color-text-l = lightness($color-text)
+
 set_text_dark()
-  --text-p0: $light-title
-  --text-p1: $light-text
-  --text-p2: mix($light-text, $light-background, 80)
-  --text-p3: mix($light-text, $light-background, 60)
-  --text-p4: mix($light-text, $light-background, 35)
-  --text-meta: mix($light-text, $light-background, 20)
-  --text-code: $light-code
+  --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($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: $light-background
-  --card: $light-card
-  --block: $light-block
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+  --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-highlight: darken($color-theme, 5)
-  --theme-bg: mix($color-theme, $light-card, 10)
+  --theme-bg2: $color-theme
   --theme-link: $color-link
 
 set_darkmode()
   :root
-    --site-bg: $dark-background
-    --card: $dark-card
-    --block: $dark-block
-    --block-border: lighten($dark-block, 6)
-    --block-hover: darken($dark-block, 4)
+    --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()
-    --theme-highlight: $color-theme
-    --theme-bg: mix($color-theme, $dark-card, 10)
     @media screen and (max-width: $device-mobile-max)
-      --site-bg: $dark-background-mobile
-      --card: darken($dark-card, 6)
-      --block: darken($dark-block, 4)
-      --block-border: lighten($dark-block, 2)
-      --block-hover: darken($dark-block,8)
+      --site-bg: black
 
 if hexo-config('style.darkmode') == 'auto'
   // 系统的dark模式

package/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
@@ -129,7 +129,7 @@ h1.article-title
       padding: 2px 0
       text-decoration: none
       line-height: 1.2
-      &:after
+      &:before
         content: ''
         position: absolute
         border-radius: 2px
@@ -143,9 +143,11 @@ h1.article-title
       &:hover
         border-bottom: none
         color: var(--theme-link)
-        &:after
+        z-index 0
+        &:before
           height: 100%
           opacity: 0.2
+          z-index -1
           bottom: 0
           left: -2px
           right: -2px

package/source/css/_layout/partial/paginator.styl

@@ -9,10 +9,11 @@
   border-radius: $border-card
   overflow: hidden
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
-  .page-number 
+  .page-number
     padding: 4px 8px
     border-radius: 8px
     background: var(--block)
+    margin: 2px
   .extend
     text-align: center
     background-size: contain

package/source/css/_layout/partial/related.styl

@@ -91,7 +91,7 @@
         text-decoration: underline
         &:hover
           color: $color-hover
-        &:after
+        &:before
           display: none
   div.cmt-body
     min-height: 150px

package/source/css/_layout/sidebar/header.styl

@@ -5,9 +5,9 @@
 nav.menu
   margin: 1rem 0
   background: var(--block)
+  border: 1px solid var(--block-border)
   border-radius: 6px
   display: flex
-  padding: 1px
   flex-wrap: wrap
   &::-webkit-scrollbar
     display: none
@@ -28,7 +28,7 @@ nav.menu
     text-align: center
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--card)
+      background: var(--block-lighten)
       box-shadow: $boxshadow-button
 
 .l_left .menu a.nav-item

package/source/css/_layout/tag-plugins/common.styl

@@ -1,120 +1,106 @@
 set_text_white()
   --text-p0: white
   --text-p1: white
-  --text-p2: #eee
+  --text-p2: hsl(0 0 88%)
   --text-p3: #ddd
   --text-code: white
-  --card: $dark-card
-  --block: $dark-block
-  --block-border: lighten($dark-block, 6)
-  --block-hover: darken($dark-block, 4)
 set_text_black()
   --text-p0: black
   --text-p1: #111
-  --text-p2: #333
+  --text-p2: hsl(0 0 12%)
   --text-p3: #555
   --text-code: white
-  --card: $light-card
-  --block: $light-block
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+
+set_dynamic_color($theme)
+  --theme: $theme
+  --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), 60, 16)
+  --text-p1: hsl(hue($theme), 50, 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']
-  --theme: $c-red
-  --theme-border: mix($c-red, white, 60)
-  --theme-bg: mix($c-red, white, 15)
-
+  set_dynamic_color($c-red)
 .tag-plugin[color='orange']
-  --theme: $c-orange
-  --theme-border: mix($c-orange, white, 60)
-  --theme-bg: mix($c-orange, white, 15)
-
+  set_dynamic_color($c-orange)
 .tag-plugin[color='yellow']
-  --theme: $c-yellow
-  --theme-border: mix($c-yellow, white, 60)
-  --theme-bg: mix($c-yellow, white, 20)
-
+  set_dynamic_color($c-yellow)
 .tag-plugin[color='green']
-  --theme: $c-green
-  --theme-border: mix($c-green, white, 60)
-  --theme-bg: mix($c-green, white, 15)
-
+  set_dynamic_color($c-green)
 .tag-plugin[color='cyan']
-  --theme: $c-cyan
-  --theme-border: mix($c-cyan, white, 60)
-  --theme-bg: mix($c-cyan, white, 15)
-
+  set_dynamic_color($c-cyan)
 .tag-plugin[color='blue']
-  --theme: $c-blue
-  --theme-border: mix($c-blue, white, 60)
-  --theme-bg: mix($c-blue, white, 15)
-
+  set_dynamic_color($c-blue)
 .tag-plugin[color='purple']
-  --theme: $c-purple
-  --theme-border: mix($c-purple, white, 60)
-  --theme-bg: mix($c-purple, white, 15)
+  set_dynamic_color($c-purple)
 
 .tag-plugin[color='light']
-  --theme-bg: white
+  --theme-bg1: hsl(0 0 88%)
+  --theme-bg2: white
+  set_text_black()
 
 .tag-plugin[color='dark']
-  --theme-bg: #333
+  --theme-bg1: hsl(0 0 12%)
+  --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-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, 80)
+    --text-p2: hsl(hue($theme), 80, 72)
+  .tag-plugin.tag
+    set_dynamic_color($color-theme)
   .tag-plugin[color='red']
-    --theme-border: mix($c-red, black, 70)
-    --theme-bg: mix($c-red, black, 35)
-
+    set_dynamic_color($c-red)
   .tag-plugin[color='orange']
-    --theme-border: mix($c-orange, black, 70)
-    --theme-bg: mix($c-orange, black, 35)
-
+    set_dynamic_color($c-orange)
   .tag-plugin[color='yellow']
-    --theme-border: mix($c-yellow, black, 70)
-    --theme-bg: mix($c-yellow, black, 30)
-
+    set_dynamic_color($c-yellow)
   .tag-plugin[color='green']
-    --theme-border: mix($c-green, black, 70)
-    --theme-bg: mix($c-green, black, 30)
-
+    set_dynamic_color($c-green)
   .tag-plugin[color='cyan']
-    --theme-border: mix($c-cyan, black, 70)
-    --theme-bg: mix($c-cyan, black, 30)
-
+    set_dynamic_color($c-cyan)
   .tag-plugin[color='blue']
-    --theme-border: mix($c-blue, black, 70)
-    --theme-bg: mix($c-blue, black, 35)
-
+    set_dynamic_color($c-blue)
   .tag-plugin[color='purple']
-    --theme-border: mix($c-purple, black, 70)
-    --theme-bg: mix($c-purple, black, 40)
-
+    set_dynamic_color($c-purple)
   .tag-plugin[color='light']
     --theme-border: white
-    --theme-bg: #fff
+    --theme-bg1: hsl(0 0 88%)
+    --theme-bg2: #fff
+    set_text_black()
 
   .tag-plugin[color='dark']
     --theme-border: black
-    --theme-bg: #111
+    --theme-bg1: hsl(0 0 12%)
+    --theme-bg2: #111
     set_text_white()
 
   .tag-plugin[color='warning'],.tag-plugin[color='light']

package/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
@@ -22,13 +22,13 @@ details.folding
         border-bottom: none !important
     &:hover
       color: var(--text-p0)
-      &:after
-        position: absolute
-        content: '+'
-        text-align: center
-        top: 50%
-        transform: translateY(-50%)
-        right: 1rem
+    &:after
+      position: absolute
+      content: '+'
+      text-align: center
+      top: 50%
+      transform: translateY(-50%)
+      right: 1rem
 
 
 details.folding[open]
@@ -38,9 +38,8 @@ details.folding[open]
     border-bottom-right-radius: 0
     color: var(--text-p1)
     margin-bottom: 0
-    &:hover
-      &:after
-        content: '-'
+    &:after
+      content: '-'
   >div.body
     display: flex;
     flex-direction: column;

package/source/css/_layout/tag-plugins/{split.styl → grid.styl}

@@ -1,11 +1,11 @@
-.tag-plugin.split
+.tag-plugin.grid
   display: grid
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
   >.cell
     margin: 1rem 0
     p:first-child>strong:only-child
-      font-size: $fs-h4
+      font-size: 1rem
   >.cell>
     p   
       line-height: 1.5
@@ -19,11 +19,11 @@
       margin-bottom: -0.25em
     
 
-.tag-plugin.split
+.tag-plugin.grid
   @media screen and (max-width: $device-tablet)
     display: block
 
-.tag-plugin.split
+.tag-plugin.grid
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card

package/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

package/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)

package/source/css/_layout/tag-plugins/navbar.styl

@@ -16,7 +16,7 @@
         display: none
       &:hover
         background: var(--block)
-      &.active 
+      &.active
         background: var(--block)
         box-shadow: none
         color: var(--text-p1)

package/source/css/_layout/tag-plugins/note.styl

@@ -4,13 +4,15 @@
   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
     font-size: $fs-15
     line-height: 1.2
     margin-top: 1rem
+    font-weight: 500
+    color: var(--text-p0)
   >.body
     &,p
       font-size: $fs-14

package/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