hexo-theme-stellar 1.26.3 → 1.26.5

package/scripts/tags/lib/quot.js

@@ -3,7 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * quot:
- * {% quot [el:h2] [icon:default] text %}
+ * {% quot [el:h2] [icon:default] [prefix:icon] text [suffix:icon] %}
  *
  */
 
@@ -11,29 +11,32 @@
 
 module.exports = ctx => function(args) {
   var el = ''
-  args = ctx.args.map(args, ['el', 'icon'], ['text'])
+  args = ctx.args.map(args, ['el', 'icon', 'prefix', 'suffix'], ['text'])
   if (!args.el) {
     args.el = 'p'
   }
 
   var type = ''
-  if (args.icon && args.icon != 'square' && args.icon != 'quotes') {
+  if (args.icon || args.prefix || args.suffix) {
     type = ' type="icon"'
   } else {
     type = ' type="text"'
   }
   function content() {
-    if (!args.icon) {
-      return args.text
-    }
-    var el = ''
     const cfg = ctx.theme.config.tag_plugins.quot[args.icon]
-    if (cfg && cfg.prefix) {
-      el += '<img class="icon prefix" src="' + cfg.prefix + '" />'
+    var el = ''
+    var prefix = args.prefix || cfg?.prefix
+    var suffix = args.suffix || cfg?.suffix
+    if (prefix) {
+      el += ctx.utils.icon(prefix, 'class="icon prefix"')
+    } else {
+      el += `<span class="empty"></span>`
     }
-    el += args.text
-    if (cfg && cfg.suffix) {
-      el += '<img class="icon suffix" src="' + cfg.suffix + '" />'
+    el += `<span class="text">${args.text}</span>`
+    if (suffix) {
+      el += ctx.utils.icon(suffix, 'class="icon prefix"')
+    } else {
+      el += `<span class="empty"></span>`
     }
     return el
   }

package/source/css/_common/base.styl

@@ -25,7 +25,7 @@ img
 
 
 li
-  font-size: $fs-15
+  font-size: 'calc(%s - 1px)' % var(--fsp)
 
 
 ul,ol
@@ -40,7 +40,8 @@ table:not([class])
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
-  font-size: $fs-14
+  --fsp: $fsp2
+  font-size: var(--fsp)
   th
     background: var(--block)
   td,th

package/source/css/_common/button.styl

@@ -26,34 +26,36 @@ a[onclick]:hover
   cursor: pointer
 
 a.button.start.gradient
-  transition: 0.38s ease-out
   position relative
-  z-index: 0
-  background: convert(hexo-config('style.gradient.start'))
-  background-size: 1000%
-  color: white
-  text-shadow: 0 0 1px rgba(0,0,0,0.12)
-  animation: glow 60s linear infinite
-  @keyframes glow {
-    from {
-      background-position: 0%
-    }
-    to {
-      background-position: 1000%
-    }
-  }
-  &:after
-    content: ''
-    position absolute
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-    border-radius: 100px
-    background: inherit
-    z-index -1
-    filter: blur(36px)
+  @media (prefers-color-scheme: dark)
     transition: 0.38s ease-out
-    opacity 0
-  &:hover:after
-    opacity 1
+    z-index: 0
+    background: convert(hexo-config('style.gradient.start'))
+    background-size: 1000%
+    color: white
+    text-shadow: 0 0 1px rgba(0,0,0,0.12)
+    animation: glow 60s linear infinite
+    @keyframes glow {
+      from {
+        background-position: 0%
+      }
+      to {
+        background-position: 1000%
+      }
+    }
+    &:after
+      content: ''
+      position absolute
+      left: 0
+      right: 0
+      top: 0
+      bottom: 0
+      border-radius: 100px
+      background: inherit
+      z-index -1
+      filter: blur(12px)
+      opacity: 0.5
+      transition: 0.38s ease-out
+    &:hover:after
+      filter: blur(36px)
+      opacity 1

package/source/css/_common/cap.styl

@@ -1,6 +1,6 @@
 .cap
   font-weight: 500
-  font-size: $fs-12
+  font-size: $fs-13
   scrollbar-width: none
   color: var(--text-p2)
   &.blue

package/source/css/_common/device.styl

@@ -26,20 +26,31 @@
   if hexo-config('style.darkmode') == 'always'
     --blur-bg: alpha(#000, .4)
 
+// 侧边栏弹出按钮
 .sidebar-toggle.mobile
   cursor: pointer
-  color: var(--text-p0)
+  color: var(--text)
   background: none
   padding: 8px
   line-height: 0
-  font-size: 24px
+  font-size: 28px
   margin: 0
+  display: flex
+  >*
+    path#sep
+      trans1 transform
+    width: auto
+    height: 28px
+// 侧边栏弹出后
+.l_body.mobile.sidebar .sidebar-toggle.mobile
+  svg g
+    fill: currentColor
+    fill-opacity: 0.3
+    path#sep
+      transform: translateX(2px)
 
 
 .l_body.mobile.sidebar
-  .float-panel
-    box-shadow: $boxshadow-float
-    transform: translateY(-2px)
   .sidebar-toggle.mobile
     background: var(--card)
     color: $color-hover

package/source/css/_common/html.styl

@@ -5,6 +5,7 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
+  scroll-padding-top: 8px
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body

package/source/css/_common/input.styl

@@ -5,6 +5,6 @@ input
 input.copy-area
   display: block
   font-family: $ff-code
-  font-size: $fs-12
+  font-size: $fs-13
   font-weight: 700
   color: var(--text-p3)

package/source/css/_common/title.styl

@@ -1,29 +1,31 @@
 h1,.h1
-  font-size: $fs-h1
+  font-size: var(--fsh2)
   font-weight: 700
   @media screen and (max-width: $device-mobile)
-    font-size: $fs-h1
+    font-size: var(--fsh2)
 h2,.h2
-  font-size: $fs-h2
+  font-size: var(--fsh2)
+  margin-top: 1.5em
 h3,.h3
-  font-size: $fs-h3
+  font-size: var(--fsh3)
 h4,.h4
-  font-size: $fs-h4
+  font-size: var(--fsh4)
 h5
-  font-size: $fs-h5
+  font-size: 'calc(%s + 1px)' % var(--fsp)
 h6
-  font-size: $fs-h6
+  font-size: 'calc(%s + 0px)' % var(--fsp)
 
 // 次级段落字号
+.fs15
+  --fsp: $fs-15
+  font-size: var(--fsp)
 .fs14
-  font-size: $fs-14
-  p
-    font-size: $fs-14 !important
-  li
-    font-size: $fs-14 !important
-// 脚标字号
-.fs12
-  font-size: $fs-12
+  --fsp: $fs-14
+  font-size: var(--fsp)
+
+.footnote
+  --fsp: $fs-13
+  font-size: var(--fsp)
 
 .widgets
   .post-title

package/source/css/_common/toast.styl

@@ -20,6 +20,7 @@ div.toast
     visibility: visible
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2s
     animation: fadein 0.5s, fadeout 0.5s 2s
+    animation-fill-mode: forwards
 
   @-webkit-keyframes fadein 
     from {top: -64px; opacity: 0;}

package/source/css/_custom.styl

@@ -44,16 +44,20 @@ $fs-14 = .875rem
 $fs-13 = .8125rem
 $fs-12 = .75rem
 
-$fs-h1   = 2rem   // 32px
-$fs-h2   = 1.75rem    // 28px
-$fs-h3   = 1.375rem  // 22px
-$fs-h4   = 1.125rem  // 18px
-$fs-h5   = $fs-15
-$fs-h6   = $fs-12
 $fs-body = convert(hexo-config('style.font-size.body'))
 $fs-code = convert(hexo-config('style.font-size.code'))
 $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
 
+$fsh1 = 'calc(%s + 11px)' % $fs-body
+$fsh2 = 'calc(%s + 11px)' % $fs-body
+$fsh3 = 'calc(%s + 7px)' % $fs-body
+$fsh4 = 'calc(%s + 4px)' % $fs-body
+$fsh5 = 'calc(%s + 2px)' % $fs-body
+
+$fsp0 = 'calc(%s - 0px)' % $fs-body
+$fsp1 = 'calc(%s - 1px)' % $fs-body
+$fsp2 = 'calc(%s - 2px)' % $fs-body
+$fsp3 = 'calc(%s - 3px)' % $fs-body
 
 $border-card = convert(hexo-config('style.border-radius.card'))
 $border-block = convert(hexo-config('style.border-radius.block'))
@@ -65,10 +69,14 @@ $border-button = 4px
 :root
   --width-left: 288px
   --width-main: 720px
-  --fs-p: $fs-body
+  --fsp: $fs-body
+  --fsh2: 'calc(%s + 11px)' % var(--fsp)
+  --fsh3: 'calc(%s + 7px)' % var(--fsp)
+  --fsh4: 'calc(%s + 4px)' % var(--fsp)
+  
   --gap-l: 16px
-  --gap-p: 1rem // gap for paragraph
-  --gap-p-compact: 0.75rem
+  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
+  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
@@ -87,7 +95,7 @@ $border-button = 4px
 
 // 文章布局风格
 .l_body.story
-  --fs-p: 'calc(%s + 2px)' % $fs-body
+  --fsp: 'calc(%s + 2px)' % $fs-body
   --gap-p: 1.5rem
   .tag-plugin,p>img
     margin-top: 2.4rem

package/source/css/_defines/const.styl

@@ -42,7 +42,8 @@ $color-google-red = #E8453C
 
 $c-red = #F44336
 $c-orange = #FA6400
-$c-yellow = #FFBD2B
+$c-amber = #FFBD2B
+$c-yellow = #f2e03d
 $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3

package/source/css/_defines/theme.styl

@@ -15,7 +15,7 @@ $color-text-s = saturation($color-text)
 $color-text-l = lightness($color-text)
 
 set_text_dark()
-  --text-p0: hsl($color-text-h, $color-text-s, 0)
+  --text: 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)
@@ -24,7 +24,7 @@ set_text_dark()
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
 set_text_light()
-  --text-p0: hsl($color-text-h, $color-text-s, 100)
+  --text: 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)
@@ -38,8 +38,9 @@ set_text_light()
   --alpha20: rgba(white, 0.2)
   --alpha50: rgba(white, 0.5)
   --alpha60: rgba(white, 0.6)
+  --alpha75: rgba(white, 0.75)
   --alpha100: white
-  --sidebar-bg: rgba(white, 0.5)
+  --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
   --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)
@@ -56,8 +57,9 @@ set_darkmode()
     --alpha20: rgba(black, 0.2)
     --alpha50: rgba(black, 0.5)
     --alpha60: rgba(black, 0.6)
+    --alpha75: rgba(black, 0.75)
     --alpha100: black
-    --sidebar-bg: rgba(black, 0.64)
+    --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

package/source/css/_layout/layout.styl

@@ -3,6 +3,7 @@
   margin: auto
   padding: 0 var(--gap-l)
   justify-content: center
+  font-size: var(--fsp)
 
 .l_body .l_left
   z-index: 8
@@ -27,7 +28,7 @@
   left: 0
   width: 100%
   height: 100%
-  background: rgba(black, 0.5)
+  background: rgba(black, 0.2)
   z-index: 9
   opacity 0
   trans1 opacity
@@ -47,7 +48,7 @@
       max-width: 100%
   .l_body.mobile
     .l_left
-      transition: transform .3s ease-out
+      transition: transform .38s ease-out
   .l_body.mobile.sidebar
     .l_left
       transform: translateX(0px)

package/source/css/_layout/list.styl

@@ -9,12 +9,12 @@
     font-weight: 500
     margin: 1.25rem 0 .75rem 0
     line-height: 1.2
-    font-size: $fs-h3
+    font-size: $fsh4
     border-bottom: none
-    color: var(--text-p0)
+    color: var(--text)
     trans1 color
     @media screen and (max-width: $device-mobile)
-      font-size: $fs-h4
+      font-size: $fsh5
       margin: 0.5rem 0
   .wiki .post-title
     margin-top: 0.5rem
@@ -24,11 +24,17 @@
   display: block
   margin: 1rem 0
   border-radius: $border-card
-  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
+  background: var(--card)
+  @media (prefers-color-scheme: dark)
+    &:hover
+      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+  @media (prefers-color-scheme: light)
+    box-shadow: $boxshadow-card
+    hover-float()
   trans1 all
   overflow: hidden
   z-index: 0
-  background: var(--card)
+  
   position: relative
   .excerpt
     margin: 1rem 0
@@ -40,27 +46,31 @@
         margin: 0.5rem 0
       line-height: 1.5
   .meta.cap
-    display: flex
+    &,span
+      display: flex
+      align-items: center
     flex-wrap: wrap
-    align-items: center
-    margin: 0.25rem 0
-    line-height: 1.5
-    span+span
-      margin-left: 0.5rem
-    span.pin
+    margin: 0
+    line-height: 2
+    --fsp: $fsp1
+    font-size: var(--fsp)
+    svg
+      height: 1em
+      width: auto
       line-height: 0
+      transform: scale(1.2)
+      margin-right: 8px
+    >span+span
+      margin-left: 1.5rem
+    span.pin
       img
         object-fit: contain
-        height: 1.5em
       svg
-        height: 1.5rem
         color: $c-red
 
-.post-list .post-card:hover
-  img 
-    transform: scale(1.02)
-    filter: brightness(80%)
-
+.post-list.post .post-card:hover
+  img
+    filter: brightness(50%)
 
 // common article
 .post-list .md-text
@@ -102,7 +112,8 @@
       position: absolute
       line-height: 1.2
       width: 'calc(100% - %s * 2)' % 1rem
-      color: var(--text-p0)
+      --text-banner: white
+      color: var(--text-banner)
       &[position=top]
         top: 0
         background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))
@@ -116,18 +127,18 @@
         color: unset
       .title
         font-weight: 500
-        font-size: $fs-h3
+        font-size: $fsh3
       @media screen and (max-width: $device-mobile)
         padding: 1rem
         div+div
           margin-top: 2px
         .title
-          font-size: $fs-h4
+          font-size: $fsh4
         .cap
           font-size: $fs-12
   h2
     margin: .25rem 0
-    font-size: $fs-h4
+    font-size: $fsh4
 
 
 // wiki

package/source/css/_layout/main.styl

@@ -6,8 +6,6 @@
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: 1rem
   header
     margin: 2rem 1rem 1rem
     .logo-wrap
@@ -16,4 +14,22 @@
 .l_body.index
   .l_main
     @media screen and (max-width: $device-mobile-max)
-      padding-top: 0
+      padding-top: 0
+
+body>.sitebg
+  position fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-size: cover
+  if hexo-config('style.site') && hexo-config('style.site.background-image')
+    background-image: convert(hexo-config('style.site.background-image'))
+  .siteblur
+    width: 100%
+    height: 100%
+    blur-effect()
+    if hexo-config('style.site') && hexo-config('style.site.blur-px')
+      --blur-px: convert(hexo-config('style.site.blur-px'))
+    if hexo-config('style.site') && hexo-config('style.site.blur-bg')
+      --blur-bg: convert(hexo-config('style.site.blur-bg'))