hexo-theme-stellar 1.32.1 → 1.32.2

package/scripts/tags/lib/posters.js

@@ -23,15 +23,16 @@ module.exports = ctx => function(args) {
   var el = ''
   el += `<div class="tag-plugin posters-wrap">`
   if (api) {
-    el += `<div class="ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
+    el += `<div class="data-service ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += `<div class="tag-plugin gallery grid-box" layout="grid" ratio="portrait" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell poster-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = '<div class="tag-plugin sites-wrap">'
   if (api) {
-    el += '<div class="ds-sites"'
+    el += '<div class="data-service ds-sites"'
     el += ' api="' + api + '"'
     el += '>'
     el += '<div class="grid-box"></div>'
@@ -31,9 +31,15 @@ module.exports = ctx => function(args) {
       if (item?.url && item?.title) {
         el += `<div class="grid-cell site-card">`
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<div class="lazy-box snapshot">`
         el += `<img src="${item.cover || item.snapshot || item.screenshot || ('https://image.thum.io/get/width/1280/crop/720/' + item.url)}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `</div>`
         el += `<div class="info">`
+        el += `<div class="lazy-box icon">`
         el += `<img src="${item.icon || item.avatar || ctx.theme.config.default.link}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.theme.config.default.link}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `</div>`
         el += `<span class="title">${item.title}</span>`
         el += `<span class="desc">${item.description || item.url}</span>`
         el += `</div>`

package/scripts/tags/lib/timeline.js

@@ -41,7 +41,7 @@ module.exports = ctx => function(args, content = '') {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
-    el += `<div class="tag-plugin timeline ds-${args.type}"`
+    el += `<div class="tag-plugin timeline data-service ds-${args.type}"`
     el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {

package/source/css/_common/base.styl

@@ -8,9 +8,9 @@ pre
 
 a
   text-decoration: none
-  color: var(--theme-link)
+  color: var(--link)
   &:hover
-    color: $color-hover
+    color: var(--accent)
 
 .md-text p:not([class]) 
   text-align: convert(hexo-config('style.text-align'))
@@ -64,6 +64,3 @@ table:not([class])
       word-break: keep-all
       white-space:nowrap
 
-
-*[ff=title]
-  font-family: $ff-logo

package/source/css/_common/blockquote.styl

@@ -18,4 +18,4 @@ blockquote
     opacity: 0.5
     background: var(--text-meta)
   &:hover:before
-    background: $color-theme
+    background: var(--theme)

package/source/css/_common/blur.styl

@@ -1,15 +1,15 @@
 :root
   --blur-px: 12px
-  --blur-bg: var(--alpha50)
-
+  --blur-bg: var(--bg-a50)
+  --blur-sat: 300%
 blur-effect()
-  background: var(--blur-bg)
+  background-color: var(--blur-bg)
   @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-    background: var(--blur-bg) !important
-    backdrop-filter: saturate(300%) blur(var(--blur-px))
-    -webkit-backdrop-filter: saturate(300%) blur(var(--blur-px))
+    background-color: var(--blur-bg) !important
+    backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
   &:hover
-    background: var(--card)
+    background-color: var(--card)
 
 .blur
   blur-effect()

package/source/css/_common/button.styl

@@ -13,10 +13,10 @@ a.button
   font-size: $fs-15
   user-select: none
   &.theme
-    background: $color-theme
+    background: var(--theme)
     color: var(--card)
     &:hover
-      background: $color-hover
+      background: var(--accent)
   &.start
     border-radius: 100px
     background: var(--text-p1)

package/source/css/_common/cap.styl

@@ -8,4 +8,4 @@
   &.cyan
     color: darken($color-mac-cyan, 6)
   &.theme
-    color: darken($color-theme, 5)
+    color: var(--theme)

package/source/css/_common/device.styl

@@ -50,12 +50,12 @@
 
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
-  box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
+  box-shadow: 0 0 4px -1px var(--theme), 0 0 16px -4px var(--theme), 0 0 32px -12px var(--theme), 0 0 128px -32px var(--theme)
   &:before
-    background: var(--alpha50)
+    background: var(--bg-a50)
 
 .l_body[leftbar] .float-panel button.leftbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -68,7 +68,7 @@
   display: none !important
 
 .l_body[rightbar] .float-panel button.rightbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3

package/source/css/_common/highlight.styl

@@ -11,6 +11,7 @@ p>code:not([class]),li>code:not([class])
   color: var(--text-code)
 
 .md-text .highlight, pre:not([class]):has(>code)
+  --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
   overflow: hidden
@@ -81,6 +82,7 @@ p>code:not([class]),li>code:not([class])
     border-radius: $border-card
     overflow: hidden
   .gist-data
+    --bgColor-default: var(--block)
     border-bottom: 1px solid var(--block-border)
   .highlight
     display: inherit

package/source/css/_common/html.styl

@@ -9,7 +9,7 @@ html
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body
-  background: var(--site-bg)
+  background: var(--background)
   margin: 0
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale

package/source/css/_common/svg.styl

@@ -6,4 +6,4 @@ svg.icon
   overflow: hidden
 
 svg.active-icon
-  color: $color-theme
+  color: var(--theme)

package/source/css/_common/title.styl

@@ -40,4 +40,4 @@ h6
       color: inherit
       font-weight: 500
       &:hover
-        color: $color-hover
+        color: var(--accent)

package/source/css/_components/layout.styl

@@ -45,10 +45,10 @@
       max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $rightbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
-      background: var(--site-bg)
+      background: var(--background)
       overflow: auto
       scrollbar(0, 0)
-      --blur-bg: var(--alpha60)
+      --blur-bg: var(--bg-a60)
       --blur-px: 50px
   .l_body[rightbar]
     .l_right

package/source/css/_components/list.styl

@@ -187,8 +187,7 @@
     width: 96px
     max-height: 96px
     object-fit: contain
-    &:not(.lazy)
-      trans1: transform 0.75s
+    trans1: all 0.75s
 .post-list .post-card.wiki article .excerpt
   margin: 1rem .5rem
   @media screen and (min-width: 950px)

package/source/css/_components/main.styl

@@ -20,13 +20,17 @@ body>.sitebg
   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'))
+  if $site-background
+    background-image: convert($site-background)
   .siteblur
     width: 100%
     height: 100%
+    --blur-px: 0
+    --blur-sat: 200%
     blur-effect()
-    if hexo-config('style.site') && hexo-config('style.site.blur-px')
+    if hexo-config('style.site.blur-sat') 
+      --blur-sat: convert(hexo-config('style.site.blur-sat'))
+    if 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')
+    if hexo-config('style.site.blur-bg')
       --blur-bg: convert(hexo-config('style.site.blur-bg'))

package/source/css/_components/md.styl

@@ -92,9 +92,9 @@ table a:not([class])
   background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
   &:hover
     text-decoration: none
-    color: var(--theme-link)
+    color: var(--link)
     border-radius: 4px
-    background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
+    background: linear-gradient(0deg,var(--link-a20),var(--link-a20)) no-repeat left 100%/100% 100%
   &:has(img)
     background: none
     &:hover

package/source/css/_components/pages/archives.styl

@@ -18,7 +18,7 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: $color-theme
+      background: var(--theme)
   a.post
     display: inline-flex
     align-items: baseline
@@ -33,10 +33,10 @@
       flex-shrink: 0
       color: var(--text-p4)
     &:hover
-      border-bottom: 1px solid $color-theme
+      border-bottom: 1px solid var(--theme)
       color: var(--text)
       time
-        color: $color-theme
+        color: var(--theme)
 
 
 
@@ -71,7 +71,7 @@
       color: var(--text)
       .badge
         opacity: 1
-        color: $color-theme
+        color: var(--theme)
 
 .post-list #tags
   display: flex
@@ -96,7 +96,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)

package/source/css/_components/pages/article-story.styl

@@ -9,13 +9,13 @@
     color: var(--text)
     line-height: 1.2
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700
@@ -30,7 +30,7 @@
       display: inline-block
       width: 12px
       height: 1.2em
-      background: $cDeepOrange
+      background: $c-accent
       transform: skewX(-20deg)
       margin: 0 0.5em
       vertical-align: top
@@ -41,7 +41,7 @@
     &:before,&:after
       position absolute
       font-size: 1.2em
-      background-color: hsla($color-theme, 0.5)
+      background-color: x-theme-alpha(0.5)
       width: 1em
       height: 1em
       content: ''
@@ -51,9 +51,9 @@
       vertical-align: middle
     &:before
       margin-left: -1em
-      svg-mask-icon($h3Left)
+      svg-mask-icon($iH3Left)
     &:after
-      svg-mask-icon($h3Right)
+      svg-mask-icon($iH3Right)
 
   h4:not([class])
     position: relative
@@ -64,7 +64,7 @@
       height: 32px
       margin-left: -16px
       margin-top: -12px
-      background: hsla($color-theme, 0.3)
+      background: x-theme-alpha(0.3)
       border-radius: 50%
       --blur-px: 8px
       filter: blur(var(--blur-px))
@@ -73,7 +73,7 @@
       trans1 all 0.5s
     &:hover:before
       --blur-px: 24px
-      background: hsla($color-theme, 1)
+      background: x-theme-alpha(1)
 
   ol,ul
     margin-left: 'calc(%s * 2)' % var(--fsp)
@@ -104,7 +104,7 @@
   &:before,&:after
     position: absolute
     font-size: 2rem
-    background-color: hsla($color-theme, 0.25)
+    background-color: x-theme-alpha(0.25)
     top: -0.3em
     width: 1em
     height: 1em
@@ -123,7 +123,7 @@
     text-indent: 2em
   &:hover
     &:before,&:after
-      background-color: hsla($color-theme, 0.5)
+      background-color: x-theme-alpha(0.5)
 
 
 .l_body[type=story] .article.banner .content .bottom.only-title

package/source/css/_components/pages/article-tech.styl

@@ -3,13 +3,13 @@
     color: var(--text)
     line-height: 1.8
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700

package/source/css/_components/pages/notebook.styl

@@ -21,7 +21,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)
@@ -40,7 +40,7 @@
   justify-content: end
   align-items: center
   &:hover
-    color: $color-theme
+    color: var(--theme)
 
 .widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
   display: inline-block

package/source/css/_components/partial/footer.styl

@@ -10,24 +10,19 @@
       background: var(--block-border)
 
 .page-footer .sitemap
-  margin: .5rem -4px 2rem
-  display: grid
-  scrollbar-width: none
+  margin: .5rem -4px
   grid-gap: 1rem 1rem
-  grid-auto-flow: column dense
-  // grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
-  grid-template-columns: repeat(4, 1fr)
-  overflow: scroll
   scrollbar(0, 0)
-
+  column-count: 4
 
 .page-footer .sitemap .sitemap-group
+  break-inside: avoid
   display: flex
   flex-direction: column
   align-items: flex-start
+  padding-bottom: 1rem
   >span,>a
     text-decoration: none
-    txt-ellipsis()
     padding: 4px
   >span
     font-weight: 500
@@ -36,6 +31,7 @@
 
 
 .page-footer .text
+  margin-top: .5rem
   p
     margin: 4px 0
     line-height: 1.5

package/source/css/_components/partial/navbar.styl

@@ -35,11 +35,11 @@
     z-index: 1
     trans1 all
     &:hover
-      background: var(--alpha100)
+      background: var(--bg-a100)
     &.active, &:hover
       color: var(--text)
     &.active
-      background: var(--alpha60)
+      background: var(--bg-a60)
       @media (prefers-color-scheme: dark)
         background: rgba(white, 0.25)
       box-shadow: $boxshadow-button

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

@@ -49,11 +49,11 @@ article.md-text.content+.related-wrap
       -webkit-line-clamp: 2
     &.active
       .title
-        border-bottom: 1px dashed $color-theme
+        border-bottom: 1px dashed var(--theme)
     &:hover
       .title
-        color: $color-hover
-        border-bottom: 1px solid $color-hover
+        color: var(--accent)
+        border-bottom: 1px solid var(--accent)
 
 
 .related-wrap#read-next
@@ -76,7 +76,7 @@ article.md-text.content+.related-wrap
       color: var(--text-p1)
       font-size: $fsh5
       &:hover
-        color: $color-hover !important
+        color: var(--accent) !important
     #next
       text-align: right
 .wiki+.related-wrap#read-next
@@ -94,8 +94,8 @@ article.md-text.content+.related-wrap
       margin: 0
       font-size: inherit
       a
-        --theme-link: $color-theme
-        --theme-link-opa: rgba($color-theme, 0.2)
+        --link: var(--theme)
+        --link-a20: x-theme-alpha(0.2)
   .cmt-body
     min-height: 150px
     position: relative

package/source/css/_components/sidebar/footer.styl

@@ -18,6 +18,6 @@
     &:hover
       z-index: 1
       filter: unset
-      background: var(--alpha100)
+      background: var(--bg-a100)
     img
       border-radius: 2px

package/source/css/_components/sidebar/menu.styl

@@ -20,7 +20,7 @@
     font-weight: 500
     color: var(--text-p3)
     text-align: center
-    background: var(--alpha50)
+    background: var(--bg-a50)
     trans1 background
     position: relative
     display: flex
@@ -30,14 +30,14 @@
     img,svg
       height: 28px
       object-fit: contain
-      filter: grayscale(100%) brightness(0.8) opacity(0.8)
+      filter: grayscale(50%) brightness(0.8) opacity(0.5)
       trans1 all
     span
       text-overflow: ellipsis
       word-break: keep-all
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--alpha100)
+      background: var(--bg-a100)
       img,svg
         filter: unset
     &.active:after

package/source/css/_components/sidebar/search.styl

@@ -24,14 +24,14 @@
       left: 1rem
       right: 1rem
       border-radius: $border-bar
-      background: var(--alpha100)
+      background: var(--bg-a100)
       @media screen and (prefers-color-scheme: dark)
-        background: var(--alpha20)
+        background: var(--bg-a20)
       z-index 0
       trans1 all
     &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
       &:before
-        background: var(--alpha100)
+        background: var(--bg-a100)
         height: 100%
         left: 0
         right: 0
@@ -57,7 +57,7 @@
       color: var(--text-p2)
       fill: currentColor
       path[p-id="1562"]
-        color: $color-theme
+        color: var(--theme)
     
   &[searching='true']
     .search-button
@@ -75,7 +75,7 @@
     font-size: $fs-14
     padding: 2rem
     margin: 8px 0
-    background: var(--alpha20)
+    background: var(--bg-a20)
     border-radius: $border-card-s
 
 
@@ -93,13 +93,13 @@
       list-style-type: none
     li a
       display: block
-      background: var(--alpha20)
+      background: var(--bg-a20)
       line-height: 1.2
       padding: 0.75rem 1rem
       border-radius: $border-card-s
       trans1 background
       &:hover
-        background: var(--alpha100)
+        background: var(--bg-a100)
     li+li
       margin-top: 8px
     .search-result-title

package/source/css/_components/sidebar/sidebar.styl

@@ -25,23 +25,23 @@
     bottom: var(--inset)
     left: var(--inset)
     right: var(--inset)
-    background-position: center
-    background-size: cover
     border-radius: $border-card-l
-    --saturate: 300%
+    --saturate: 400%
     --blur-px: convert(hexo-config('style.leftbar.blur-px'))
-    --brightness: 100%
-    if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
+    --background-opacity: 1
+    if $leftbar-background-image
+      background-position: center
+      background-size: cover
       if hexo-config('style.leftbar.blur-px')
         --inset: 32px
+      if hexo-config('style.leftbar.background-opacity')
+        --background-opacity: hexo-config('style.leftbar.background-opacity')
       background-image: convert(hexo-config('style.leftbar.background-image'))
-      filter: saturate(var(--saturate)) brightness(var(--brightness)) blur(var(--blur-px))
+      filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
       @media screen and (prefers-color-scheme: dark)
-        --blur-px: 'calc(%s * 0.75)' % convert(hexo-config('style.leftbar.blur-px'))
-        --saturate: 200%
-        --brightness: 75%
-    else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
-      background: convert(hexo-config('style.leftbar.background'))
+        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
+    else if $leftbar-background-color
+      background-color: convert($leftbar-background-color)
     
   .leftbar-container
     height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
@@ -67,24 +67,24 @@
       right: 0
       border-radius: $border-card-l
     &:before
-      @media screen and (min-width: $device-mobile-max)
-        background: rgba(white, 0.5)
-        box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
-        backdrop-filter: saturate(300%)
-        -webkit-backdrop-filter: saturate(300%)
-        mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
-        -webkit-mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
-
-      @media screen and (prefers-color-scheme: dark)
-        background: rgba(white, 0.05)
-        box-shadow: inset 0 0 32px 1px rgba(white, 0.2)
+      if $leftbar-background-image
+        @media screen and (min-width: $device-mobile-max)
+          background: rgba(white, 0.5)
+          box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
+          backdrop-filter: saturate(300%)
+          -webkit-backdrop-filter: saturate(300%)
+          mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
+          -webkit-mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
+        @media screen and (prefers-color-scheme: dark)
+          background: rgba(white, 0.05)
+          box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
 
 @media screen and (max-width: $device-mobile-max)
   .l_left
     overflow: hidden
-    background: var(--alpha100)
+    background: var(--bg-a100)
     .sidebg
       --inset: 0
       --saturate: 300%
     .leftbar-container:after
-      background: var(--alpha20)
+      background: var(--bg-a20)