hexo-theme-stellar 1.17.2 → 1.18.1

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, $color-background-l)
+  --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 * 0.5, (100 - $color-background-l) * 2 + 8)
+    --card: hsl($color-block-h, $color-block-s * 1.5, 24)
+    --block: hsl($color-block-h, $color-block-s, 16)
+    --block-border: hsl($color-block-h, $color-block-s, 24)
+    --block-hover: hsl($color-block-h, $color-block-s, 20)
+    --block-lighten: hsl($color-block-h, $color-block-s, 32)
     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

@@ -1,7 +1,6 @@
 .md-text
   max-width: 100%
-  padding: 0 1rem
-  margin-top: 1rem
+  padding: 1rem
   &:first-child
     margin-top: 0
   color: var(--text-p1)
@@ -21,9 +20,8 @@ h1.article-title
 
 .md-text.content
   position: relative
-  margin-bottom: 2rem
-  display: flex
-  flex-direction: column
+  padding-bottom: 2rem
+  overflow: hidden
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
@@ -33,25 +31,27 @@ h1.article-title
     h1,h2,h3,h4,h5,h6
       text-align: center
     >h2:not([class])
-      align-self: center
-      border-bottom-style: dashed
-      border-bottom-color: $color-accent
+      border-bottom: none
   >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
     margin-top: 0
+  h2
+    margin-bottom: 1rem
+  h3,h4,h5,h6
+    margin-bottom: .5rem
   h2,h3,h4,h5,h6
     color: var(--text-p0)
     padding-top: 1rem
-    margin-bottom: .5rem
     line-height: 1.8
     &:hover
       a.headerlink:before
         opacity: 1
 
-
+.md-text.content:first-child
+  padding-top: 0
 
 .md-text
   ul:not(:last-child),
@@ -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

@@ -1,6 +1,6 @@
 .related-wrap
-  padding: 1rem
-  margin: 2rem 0
+  padding: 0 1rem
+  margin: 4rem 0
   &:empty
     display: none
   section.header
@@ -17,7 +17,8 @@
     border-radius: $border-block
     color: var(--text-p1)
 
-
+article.md-text.content+.related-wrap
+  margin-top: 0
 
 .related-posts
   max-width: 100%
@@ -82,7 +83,8 @@
 
 
 .related-wrap#comments
-  div.cmt-title
+  padding: 0 1rem
+  .cmt-title
     p
       margin: 0
       font-size: inherit
@@ -91,9 +93,9 @@
         text-decoration: underline
         &:hover
           color: $color-hover
-        &:after
+        &:before
           display: none
-  div.cmt-body
+  .cmt-body
     min-height: 150px
     position: relative
     svg.loading

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/folders.styl

@@ -30,13 +30,13 @@
     &:hover
       color: var(--text-p0)
       background: var(--block-hover)
-      &: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
 
 
 .tag-plugin.folders details[open]
@@ -49,7 +49,7 @@
   >summary
     color: var(--text-p1)
     background: var(--block-hover)
-    &:hover:after
+    &:after
       content: '-'
       
   >div.body

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