hexo-theme-stellar 1.31.0 → 1.32.1

package/scripts/tags/lib/navbar.js

@@ -18,7 +18,7 @@ module.exports = ctx => function(args) {
   if (args.links) {
     args.links = args.links.split(' ')
   }
-  var el = `<div class="tag-plugin navbar"><nav>`
+  var el = `<div class="tag-plugin navbar">`
   for (let link of args.links) {
     const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
     if (matches?.length > 2) {
@@ -33,6 +33,6 @@ module.exports = ctx => function(args) {
       el += `<a class="link" href="#${link}">${link}</a>`
     }
   }
-  el += `</nav></div>`
+  el += `</div>`
   return el
 }

package/scripts/tags/lib/timeline.js

@@ -18,7 +18,7 @@ function layoutNodeTitle(ctx, content) {
   var el = ''
   el += '<div class="header">'
   if (content && content.length > 0) {
-    el += content
+    el += `<span>${content}</span>`
   }
   el += '</div>'
   return el

package/scripts/tags/lib/video.js

@@ -14,7 +14,7 @@ module.exports = ctx => function (args) {
     args.width = '100%'
   }
   if (args.bilibili) {
-    return `<div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16 / 9};max-width:${args.width};">
+    return `<div class="tag-plugin video-player" style="aspect-ratio:${args.ratio || 16 / 9};max-width:${args.width};">
     <iframe src="https://player.bilibili.com/player.html?bvid=${args.bilibili}&autoplay=${args.autoplay || 'false'}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
     </iframe>
     </div>
@@ -26,7 +26,7 @@ module.exports = ctx => function (args) {
     } else {
       args.autoplay = '0'
     }
-    return `<div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16 / 9};max-width:${args.width};">
+    return `<div class="tag-plugin video-player" style="aspect-ratio:${args.ratio || 16 / 9};max-width:${args.width};">
     <iframe style="border:none" src="https://www.youtube.com/embed/${args.youtube}?rel=0&disablekb=1&playsinline=1&autoplay=${args.autoplay}" picture-in-picture="true" allowfullscreen="true" >
     </iframe>
     </div>

package/source/css/_common/base.styl

@@ -23,7 +23,6 @@ hr
 img
   max-width: 100%
 
-
 li
   font-size: 'calc(%s - 1px)' % var(--fsp)
 
@@ -36,24 +35,35 @@ ul,ol
 table:not([class])
   border-collapse: collapse
   overflow: auto
-  display: block
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
   --fsp: $fsp2
   font-size: var(--fsp)
+  scrollbar(0,0)
+  display: table
   th
     background: var(--block)
+    border-top: 1px solid var(--block-border)
+    border-bottom: 1px solid var(--block-border)
   td,th
-    padding: 0.5em 1em
-    border: 1px solid var(--block-hover)
+    padding: 4px 1em
     line-height: 1.5
   tr
-    word-break: keep-all
-    white-space:nowrap
+    border-bottom: 1px dashed var(--block-border)
     trans()
     &:hover
       background: var(--block)
 
+  @media screen and (min-width: $device-mobile-max)
+    width 100%
+
+  @media screen and (max-width: $device-mobile-max)
+    display: block
+    tr
+      word-break: keep-all
+      white-space:nowrap
+
+
 *[ff=title]
   font-family: $ff-logo

package/source/css/_common/canonical.styl

@@ -5,7 +5,7 @@
   left: 50%
   transform: translateX(-50%)
   max-width: 90%
-  background-color: var(--block-hover)
+  background-color: var(--card)
   color: var(--text-p1)
   font-size: 1rem
   font-family: #fff8e1

package/source/css/_common/highlight.styl

@@ -36,7 +36,7 @@ p>code:not([class]),li>code:not([class])
       display: block
       border-bottom-left-radius: $border-button
       border-bottom-right-radius: $border-button
-      background: var(--block-hover)
+      background: var(--block)
   >table
     overflow: auto
     display: block
@@ -50,6 +50,7 @@ p>code:not([class]),li>code:not([class])
     scrollbar-codeblock(convert(hexo-config('style.codeblock.scrollbar')))
     tr
       background: transparent
+      border: none
       &:hover
         background: transparent
 
@@ -88,11 +89,13 @@ p>code:not([class]),li>code:not([class])
     background: var(--block)
     margin: 0
     padding: 1em 0
+    pre
+      background: none
   .blob-code-inner
     color: var(--text-p1)
     font-family: $ff-codeblock
   .gist-meta
-    background: var(--block-border)
+    background: var(--block)
 
 
 table:not([class])

package/source/css/_components/layout.styl

@@ -1,7 +1,9 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
-  grid-gap: var(--gap-margin)
+  grid-gap: calc(var(--gap-margin) * 4)
+  @media screen and (max-width: $device-desktop)
+    grid-gap: calc(var(--gap-margin) * 2)
   margin: auto
   font-size: var(--fsp)
 
@@ -16,11 +18,10 @@
 
 .l_body .l_left
   justify-self: right
-  top: 8px
+  top: calc(var(--gap-margin) * 2)
 .l_body .l_right
   justify-self: left
-  --gap-margin: 0px
-  max-height: calc(100% - 8px * 2)
+  max-height: calc(100% - calc(var(--gap-margin) * 2) * 2)
   .widgets
     height: 100%
     overflow visible
@@ -32,16 +33,16 @@
   .laptop-only
     display: block !important
   .l_body
+    grid-gap: calc(var(--gap-margin) * 1)
     .l_right
-      top: 8px
       position: fixed
       transform: translateX(320px)
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px
       right: var(--inset)
-      top: var(--inset)
-      max-height: 'calc(%s - %s)' % (100vh $rightbar-bottom-margin)
+      top: calc(var(--gap-margin) * 2)
+      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)
@@ -70,11 +71,11 @@
       margin: 0
       --inset: 8px
       left: var(--inset)
-      top: var(--inset)
-      max-height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
+      top: calc(var(--gap-margin) * 2)
+      max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
       .leftbar-container
         --inset: 8px
-        height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
+        height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
     .l_main

package/source/css/_components/list.styl

@@ -120,13 +120,16 @@
       right: 0
       height: var(--blur-height)
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
     &[position=top]:before
       top: 0
       mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
     &[position=bottom]:before
       bottom: 0
       mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .cover-info
       padding: 1.5rem 1rem
       position: absolute

package/source/css/_components/main.styl

@@ -2,7 +2,7 @@
   position: relative
   padding-bottom: var(--gap-max)
   @media screen and (min-width: $device-mobile-max)
-    padding-top: 8px
+    padding-top: calc(var(--gap-margin) * 2)
   header
     margin: 2rem 1rem 1rem
     .logo-wrap

package/source/css/_components/md.styl

@@ -24,7 +24,7 @@
   ul:not(:last-child),
   ol:not(:last-child)
     padding-bottom: .5rem
-    margin: 0
+    margin: 0 .25rem
   blockquote,ul,ol
     p,ul,ol
       --fsp: $fsp1
@@ -75,9 +75,11 @@
 
 // 图片样式
 .md-text img
-  border-radius: $border-image
   margin: auto
   display: block
+.md-text.content 
+  p>img, .tag-plugin.image .image-bg
+    border-radius: $border-image
 
 // 链接样式
 li:not([class]) a:not([class])

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

@@ -67,7 +67,7 @@
       opacity: .5
       font-size: $fs-12
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)
       color: var(--text)
       .badge
         opacity: 1
@@ -99,7 +99,7 @@
         color $color-theme
         opacity: 1
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 @media screen and (min-width: $device-mobile)
   .post-list.author #archive

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

@@ -1,5 +1,9 @@
 .l_body[type=story] .md-text.content
   --fsp: 'calc(%s + 1px)' % $fs-body
+  --gap-p: 2rem
+  div.tag-plugin,p>img
+    margin-top: 2.4rem
+    margin-bottom: 2.4rem
   // 段落标题
   h1,h2,h3,h4,h5,h6
     color: var(--text)
@@ -78,44 +82,48 @@
     margin: 2em 0 1.5em
     >a:first-child
       display: none
-  // 修正缩进效果
-  >blockquote,.tag-plugin.quote
-    text-align: center
-    --inset: calc(var(--fsp) * 2)
-    margin-left: var(--inset)
-    margin-right: var(--inset)
-    background: var(--block)
-    padding: 1rem 2rem
-    border-radius: $border-card
-    &:before,&:after
-      position: absolute
-      font-size: 2rem
-      background-color: hsla($color-theme, 0.25)
-      top: -0.3em
-      width: 1em
-      height: 1em
-      content: ''
-      opacity 1
-      trans1 all
-    &:before
-      left: -0.3em
-      svg-mask-icon($iQuoteLeft)
-    &:after
-      right: -0.3em
-      svg-mask-icon($iQuoteRight)
-    p:not([class])
-      color: var(--text-p2)
-      font-size: $fs-body
-      text-indent: 2em
-    &:hover
-      &:before,&:after
-        background-color: hsla($color-theme, 0.5)
+
   // 取消缩进效果
   .poetry, .okr, .timeline, li, .article-footer
     p:not([class])
       text-indent: 0
       text-align: convert(hexo-config('style.text-align'))
 
+  p>img, .tag-plugin.image .image-bg
+    border-radius: $border-image-l
+
+
+.l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
+  text-align: center
+  --inset: calc(var(--fsp) * 2)
+  margin-left: var(--inset)
+  margin-right: var(--inset)
+  background: var(--block)
+  padding: 1rem 2rem
+  border-radius: $border-card
+  &:before,&:after
+    position: absolute
+    font-size: 2rem
+    background-color: hsla($color-theme, 0.25)
+    top: -0.3em
+    width: 1em
+    height: 1em
+    content: ''
+    opacity 1
+    trans1 all
+  &:before
+    left: -0.3em
+    svg-mask-icon($iQuoteLeft)
+  &:after
+    right: -0.3em
+    svg-mask-icon($iQuoteRight)
+  p:not([class])
+    color: var(--text-p2)
+    font-size: $fs-body
+    text-indent: 2em
+  &:hover
+    &:before,&:after
+      background-color: hsla($color-theme, 0.5)
 
 
 .l_body[type=story] .article.banner .content .bottom.only-title

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

@@ -1,4 +1,4 @@
-.l_body[type='tech'] .md-text
+.l_body[type='tech'] article.content
   h1,h2,h3,h4,h5,h6
     color: var(--text)
     line-height: 1.8

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

@@ -24,7 +24,7 @@
         color $color-theme
         opacity: 1
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 .post-list .post-card .meta.cap .tag
   &:before

package/source/css/_components/partial/article-banner.styl

@@ -49,18 +49,21 @@
       position: absolute
       z-index 0
       left: 0
-      width: 100%
+      right: 0
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
       opacity var(--blur-opacity)
     &:before
       top: 0
       height: var(--blur-height-top)
       mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
     &:after
       bottom: 0
       height: var(--blur-height-bottom)
       mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .top,.bottom
       z-index 1
   

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

@@ -7,7 +7,7 @@
     transition: background 0.2s ease-out
     &:hover
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 .page-footer .sitemap
   margin: .5rem -4px 2rem

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

@@ -1,6 +1,6 @@
 .navbar
   z-index: 8
-  top: 8px
+  top: calc(var(--gap-margin) * 2)
   position: sticky
   position: -webkit-sticky
 
@@ -46,6 +46,7 @@
       cursor default
       pointer-events: none
       backdrop-filter: saturate(300%)
+      -webkit-backdrop-filter: saturate(300%)
     &.active:after
       content: ''
   a+a

package/source/css/_components/sidebar/nav-area.styl

@@ -1,2 +1,2 @@
 .nav-area
-  margin: 32px var(--gap-margin) 0
+  margin: 1rem var(--gap-margin) 0

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

@@ -1,21 +1,40 @@
 
 .search-wrapper
+  padding-bottom: 32px
   width: 100%
+  border-radius: $border-card-s
   >.search-form
     position: sticky
-    margin-bottom: 8px
-    top: 1rem
+    top: 0
     height: 40px
     display: flex
     flex-direction: row
     align-items: center
     transition: 0.38s ease-out
-    z-index: 0
-    border-radius: $border-bar
+    z-index: 1
+    border-radius: $border-card-s
     color: var(--text)
-    background: var(--alpha50)
-    &:has(input:focus)
+    >*
+      z-index: 1
+    &:before
+      position: absolute
+      content: ''
+      height: 2px
+      bottom: 0
+      left: 1rem
+      right: 1rem
+      border-radius: $border-bar
       background: var(--alpha100)
+      @media screen and (prefers-color-scheme: dark)
+        background: var(--alpha20)
+      z-index 0
+      trans1 all
+    &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
+      &:before
+        background: var(--alpha100)
+        height: 100%
+        left: 0
+        right: 0
   .search-input
     width: 100%
     box-sizing: border-box
@@ -23,6 +42,10 @@
     font-size: $fs-14
     padding: 12px 0
     color: var(--text)
+    &::placeholder
+      color: var(--text-p3)
+      @media screen and (prefers-color-scheme: dark)
+        color: var(--text-p2)
   .search-button 
     border-radius: $border-bar
     display: flex
@@ -30,8 +53,7 @@
     height: 40px
     svg
       height: 1rem
-      width: 40px
-      margin-left: 4px
+      width: calc((var(--side-content-width) + var(--gap-padding) * 2 - 3 * 8px) * 0.25)
       color: var(--text-p2)
       fill: currentColor
       path[p-id="1562"]
@@ -52,33 +74,34 @@
     text-align: center
     font-size: $fs-14
     padding: 2rem
+    margin: 8px 0
     background: var(--alpha20)
-    border-radius: $border-card
+    border-radius: $border-card-s
 
 
   #search-result
     max-height: 60vh
-    overflow: scroll
+    overflow: auto
     scrollbar-width: none
     scrollbar(0, 0)
-    border-radius: $border-card
+    border-radius: $border-bar
     &:empty
       display: none
     .search-result-list
       padding: 0
-      margin: 0
+      margin: 8px 0
       list-style-type: none
     li a
-        display: block
-        background: var(--alpha20)
-        line-height: 1.2
-        padding: 0.75rem 1rem
-        border-radius: $border-card
-        trans1 background
-        &:hover
-          background: var(--alpha100)
+      display: block
+      background: var(--alpha20)
+      line-height: 1.2
+      padding: 0.75rem 1rem
+      border-radius: $border-card-s
+      trans1 background
+      &:hover
+        background: var(--alpha100)
     li+li
-        margin-top: 8px
+      margin-top: 8px
     .search-result-title
       color: var(--text-p1)
       font-weight: 700

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

@@ -1,12 +1,12 @@
 .l_left
-  margin: 8px
-  max-height: 'calc(%s - 16px)' % 100vh
+  margin: calc(var(--gap-margin) * 2) var(--gap-margin)
+  max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
   border-radius: $border-card-l
   .header
     margin: var(--gap-max) var(--gap-margin) 0
 
 .l_right
-  margin: 8px
+  margin: calc(var(--gap-margin) * 2) 0
   border-radius: $border-card-l
 @media screen and (min-width: $device-2k)
   .l_left
@@ -44,7 +44,7 @@
       background: convert(hexo-config('style.leftbar.background'))
     
   .leftbar-container
-    height: 'calc(%s - 80px)' % 100vh
+    height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
     display: flex
     flex-direction: column
     word-break: break-all
@@ -52,7 +52,9 @@
     border-radius: $border-card-l
     overflow: hidden
     >.widgets
-      mask: linear-gradient(transparent, white, 10%, white, 90%, transparent)
+      border-radius: $border-bar
+      mask: linear-gradient(white, 90%, transparent)
+      -webkit-mask: linear-gradient(white, 90%, transparent)
     >*
       z-index 1
     &:before,&:after
@@ -69,7 +71,9 @@
         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)

package/source/css/_components/tag-plugins/banner.styl

@@ -1,5 +1,5 @@
 .banner
-  border-radius: $border-card
+  border-radius: $border-image
   &.top
     border-radius: $border-card-l
   position: relative

package/source/css/_components/tag-plugins/button.styl

@@ -4,7 +4,7 @@ a.tag-plugin.button
   display: inline-flex
   align-items: baseline
   justify-content: center
-  padding: 0 4px
+  padding: 0 .5rem
   trans1 background
   margin: .5em 0
   font-size: 1em
@@ -23,10 +23,9 @@ a.tag-plugin.button
 a.tag-plugin.button[size='xs']
   margin: 0
   border-radius: 4px
-  svg,img
+  padding: 0 4px
+  svg,img,span
     margin: 0 2px
-  span
-    margin: 2px
 
 a.tag-plugin.button:hover
   --theme: $color-hover

package/source/css/_components/tag-plugins/copy.styl

@@ -9,11 +9,12 @@
   width: 100%
   min-width: 200px
   span
-    line-height: 3
-    padding: 0 1rem
-    background: var(--block)
-    border-right: 1px solid var(--block-border)
-    color: var(--text-p3)
+    padding: .25rem .5rem
+    margin: auto .5rem
+    line-height: 1
+    border-radius: 4px
+    background: hsla($color-theme, 0.2)
+    color: $color-theme
     font-family: $ff-code
     font-size: $fs-13
     font-weight: 700
@@ -25,14 +26,17 @@
     color: var(--text-p2)
     line-height: 3
     text-indent: 1rem
+  span+input.copy-area
+    text-indent: 0
   button.copy-btn
-    margin: 2px
+    margin: 2px 2px 2px 0
     border-radius: 'calc(%s - 2px)' % $border-bar
     display: inline-block
-    background: none
+    background: var(--block)
+    trans1 all
     line-height: 0
     font-size: 1rem
     padding: 0 .75rem
     color: var(--text-p2)
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)

package/source/css/_components/tag-plugins/friends.styl

@@ -46,7 +46,7 @@
   >img
     floatable-trans()
   &:hover
-    background: var(--block-hover)
+    background: var(--block-border)
     img
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float