hexo-theme-stellar 1.33.1 → 1.34.0

package/source/css/_common/highlight.styl

@@ -14,9 +14,9 @@ p>code:not([class]),li>code:not([class])
   --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   overflow: hidden
   background: var(--block)
-  line-height: 1.5
   font-family: $ff-codeblock
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
@@ -80,6 +80,7 @@ p>code:not([class]),li>code:not([class])
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-card
+    corner-shape: superellipse(1.2)
     overflow: hidden
   .gist-data
     --bgColor-default: var(--block)
@@ -182,6 +183,8 @@ table:not([class])
     content: "TS"
   &.matlab .code:before
     content: "MATLAB"
+  &.nginx .code:before
+    content: "Nginx"
 
 
 

package/source/css/_common/html.styl

@@ -1,6 +1,10 @@
 *
   outline: none
 html
+  height: 100%
+  width: 100%
+  scrollbar(8px,8px)
+  overflow-y: scroll
   font-family: $ff-body
   font-size: $fs-root
   -webkit-text-size-adjust: 100%

package/source/css/_common/loading.styl

@@ -31,4 +31,8 @@ svg.loading
     font-size: 14px
   &.error
     &:after
-      content: hexo-config('style.loading.error')
+      content: hexo-config('style.loading.error')
+
+.article-footer
+  .loading-wrap
+    background: none

package/source/css/_components/md.styl

@@ -82,6 +82,7 @@
 .md-text.content 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
 
 // 链接样式
 li:not([class]) a:not([class])

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

@@ -91,8 +91,10 @@
 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image-l
+    corner-shape: superellipse(1.2)
     >img
       border-radius: $border-image-l
+      corner-shape: superellipse(1.2)
 
 
 .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote

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

@@ -3,6 +3,7 @@
   padding: 1rem
   background: var(--block)
   border-radius: $border-card-l
+  corner-shape: superellipse(1.2)
   border: 1px solid var(--block-border)
   font-size: $fs-15
   line-height: 1.6

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

@@ -40,6 +40,8 @@
       color: var(--text)
     &.active
       background: var(--bg-a60)
+      :root[data-theme="dark"] &
+        background: rgba(white, 0.25)
       @media (prefers-color-scheme: dark)
         background: rgba(white, 0.25)
       box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.08)

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

@@ -16,6 +16,7 @@
     width: 100%
     min-height: 40px
     border-radius: $border-bar
+    corner-shape: superellipse(1.2)
     font-size: $fs-15
     font-weight: 500
     color: var(--text-p3)

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

@@ -25,6 +25,8 @@
       right: 1rem
       border-radius: $border-bar
       background: var(--bg-a100)
+      :root[data-theme="dark"] &
+        background: var(--bg-a20)
       @media screen and (prefers-color-scheme: dark)
         background: var(--bg-a20)
       z-index 0
@@ -44,6 +46,8 @@
     color: var(--text)
     &::placeholder
       color: var(--text-p3)
+      :root[data-theme="dark"] &
+        color: var(--text-p2)
       @media screen and (prefers-color-scheme: dark)
         color: var(--text-p2)
   .search-button 

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

@@ -38,11 +38,15 @@
         --background-opacity: hexo-config('style.leftbar.background-opacity')
       background-image: convert(hexo-config('style.leftbar.background-image'))
       filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
+      :root[data-theme="dark"] &
+        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
       @media screen and (prefers-color-scheme: dark)
         --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
-    else if $leftbar-background-color
-      background-color: convert($leftbar-background-color)
-    
+    else if $leftbar-background-color-light || $leftbar-background-color-dark
+      background-color: convert($leftbar-background-color-light)
+      @media screen and (prefers-color-scheme: dark)
+        background-color: convert($leftbar-background-color-dark)
+
   .leftbar-container
     height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
     display: flex
@@ -69,12 +73,15 @@
     &:before
       if $leftbar-background-image
         @media screen and (min-width: $device-mobile-max)
-          background: rgba(white, 0.5)
+          background: rgba(white, 0.05)
           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)
+        :root[data-theme="dark"] &
+          background: rgba(white, 0.05)
+          box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
         @media screen and (prefers-color-scheme: dark)
           background: rgba(white, 0.05)
           box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
@@ -87,4 +94,4 @@
       --inset: 0
       --saturate: 300%
     .leftbar-container:after
-      background: var(--bg-a20)
+      background: var(--bg-a20)

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

@@ -39,8 +39,6 @@ chat_dark()
         font-size: $fs-12
     .cap
         color: var(--text-p3)
-    *
-        word-break: break-all
     box-sizing: border-box
     -webkit-box-sizing: border-box
     -moz-box-sizing: border-box
@@ -62,7 +60,7 @@ chat_dark()
         position: relative
         box-shadow: unset
         >.device-image
-            background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/frame/iphone11.svg)
+            background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/frame/iphone11.svg)
             width: 100%
             height: 100%
             position: absolute
@@ -274,7 +272,7 @@ chat_dark()
                     &.emoji,
                     &.link,
                     &.video,
-                    &.file
+                    &.chat-file
                         background: unset !important
                         padding: 0 !important
                     &.link
@@ -394,7 +392,7 @@ chat_dark()
                         video
                             width: 100%
                             border-radius: 6px
-                    &.file
+                    &.chat-file
                         background: transparent !important
                         display: flex
                         padding: unset !important
@@ -458,7 +456,7 @@ chat_dark()
                         flex-basis: 100%
                         justify-content: flex-end
                     .talk
-                        &.file
+                        &.chat-file
                             flex-direction: row-reverse
                         &.voice
                             .voice-btns
@@ -524,11 +522,11 @@ chat_dark()
                             display: none
                         &.link>.link-card,
                         &.video>video,
-                        &.file>.content,
+                        &.chat-file>.content,
                         &.image>img,
                         &.emoji>img
                             border-radius: 4px
-                        &.file .download-btn
+                        &.chat-file .download-btn
                             display: none
                         &.voice
                             padding: 8px .5em

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

@@ -3,6 +3,7 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary

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

@@ -49,6 +49,8 @@
 // 网格布局
 .tag-plugin.gallery.grid-box
   display: grid
+  .grid-cell
+    corner-shape: superellipse(1.2)
   &[size='xs']
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
     grid-gap: 2px

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

@@ -17,6 +17,7 @@
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
+    corner-shape: superellipse(1.2)
   &[bg='box']>.cell
     background: var(--block)
   &[bg='card']>.cell

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

@@ -5,6 +5,7 @@
   .image-bg
     text-align: center
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
     position: relative
     overflow: hidden
     display: flex
@@ -23,7 +24,9 @@
       display: block
       object-fit: cover
       border-radius: $border-image
+      corner-shape: superellipse(1.2)
     .image-download
+      z-index: 2
       position: absolute
       bottom: 8px
       right: 8px

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

@@ -13,6 +13,7 @@
   width: 300px
   max-width: 100%
   border-radius: $border-card-s
+  corner-shape: superellipse(1.2)
   hoverable-card()
 
 .md-text .link-card.plain

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

@@ -1,19 +1,21 @@
 .tag-plugin.navbar
   display: inline-flex
-  background: var(--card)
-  border-radius: $border-button
-  z-index inherit
-  box-shadow: 0 0 8px hsla(black, 0.04)
   a
     box-sizing: border-box
-    padding: .25rem 1rem
-    margin: 2px
+    padding: .25rem 0
     color: inherit
-    border-radius: 'calc(%s - 1px)' % $border-button
-    trans1 all
+    position: relative
     &+a
-      margin-left: 0
-    &.active
-      background: var(--block)
-    &:hover
-      background: var(--block)
+      margin-left: 1rem
+    &:after
+      content: ''
+      position: absolute
+      border-radius: 2px
+      width: 100%
+      height: 2px
+      left: 0
+      bottom: 0
+      trans1 all
+    &.active,&:hover
+      &:after
+        background: var(--theme)

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

@@ -2,6 +2,7 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true

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

@@ -1,6 +1,7 @@
 .md-text .tag-plugin.okr
   position: relative
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   if hexo-config('tag_plugins.okr.border') == true
     border: 1px solid var(--theme-border)

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

@@ -12,6 +12,7 @@
   position: relative
   .lazy-box
     border-radius: $border-card-s
+    corner-shape: superellipse(1.2)
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
     overflow hidden
     >img
@@ -28,6 +29,7 @@
       margin-right: 8px
       margin-top: 2px
       border-radius: @width
+      corner-shape: superellipse(1)
       >img
         width: 28px
         height: @width

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

@@ -1,6 +1,9 @@
 .tag-plugin.timeline
   position: relative
   padding-left: 16px
+  p>img
+    border-radius: $border-image-s
+    corner-shape: superellipse(1.2)
   &:before
     content: ''
     position: absolute
@@ -19,6 +22,9 @@
   .tag-plugin.timeline
     ol,ul
       margin-left: 0
+    p>img
+      border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -87,6 +93,7 @@
 .tag-plugin.timeline .body
   background: var(--card)
   border-radius: 16px
+  corner-shape: superellipse(1.2)
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -143,6 +150,7 @@
   .lazy-box
     margin: .5rem 0
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
     >img
       margin: 0 auto
 
@@ -151,6 +159,7 @@
 
 aside .tag-plugin.timeline[data-api] .body .lazy-box
   border-radius: $border-image-s
+  corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline[data-api] .body .footer
   margin: 0 0 -0.5rem

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

@@ -33,6 +33,8 @@
     trans1 all
     color: var(--theme)
     background: var(--theme-a10)
+    :root[data-theme="dark"] &
+      background: var(--theme-a20)
     @media (prefers-color-scheme: dark)
       background: var(--theme-a20)
     &.vote-up

package/source/css/_components/widgets/components.styl

@@ -4,6 +4,7 @@
 
 .linklist .link
   border-radius: $border-bar
+  corner-shape: superellipse(1.2)
   color: var(--text-p2)
   min-height: 32px
   padding: 0 4px

package/source/css/_components/widgets/ghuser.styl

@@ -1,6 +1,19 @@
 .widget-wrapper.user-card
   .widget-header+.widget-body
     margin: 0.75rem 0
+.widget-wrapper.user-card .widget-header
+  a
+    display: flex
+    align-items: center
+    color: var(--text-p2)
+    trans1 all
+    svg
+      margin-right: 4px
+      width 1em
+      height: 1em
+    &:hover
+      color: var(--text)
+
 .widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
@@ -33,7 +46,7 @@
   .follow 
     font-weight: 500
     border-radius: 64px
-    margin: 1rem 0 0
+    margin-top: 1rem
     padding: 0.5rem 1rem
     background: var(--theme)
     color: white
@@ -53,7 +66,7 @@
       background: var(--accent)
 
   .buttons
-    margin: 1rem 0
+    margin-top: 1rem
     align-self: stretch
     display: grid
     grid-gap: 2px
@@ -76,4 +89,7 @@
     .desc
       font-size: $fs-12
       color: var(--text-p3)
-      font-weight: 500
+      font-weight: 500
+
+.widget-wrapper.user-card .widget-header+.widget-body
+  margin-top: 4px

package/source/css/_components/widgets/list.styl

@@ -4,6 +4,7 @@
     padding: 6px 16px
     display: block
     border-radius: $border-bar
+    corner-shape: superellipse(1.2)
     color: var(--text-p1)
     trans1 background
     &.active,&:hover

package/source/css/_components/widgets/toc.styl

@@ -16,6 +16,9 @@
     @media screen and (min-width: $device-laptop)
       background: var(--background)
 
+.l_left .widget-wrapper.toc
+  @media screen and (min-width: $device-laptop)
+    background: none
 
 // 目录基本样式
 .widget-wrapper.toc .toc

package/source/css/_components/widgets/widgets.styl

@@ -77,3 +77,7 @@
   @media screen and (min-width: $device-laptop)
     .widget-wrapper.markdown .widget-body
       background: var(--block)
+
+.leftbar-container
+  .header+.widgets
+    margin-top: 1rem

package/source/css/_custom.styl

@@ -31,7 +31,8 @@ $fsp3 = 'calc(%s - 3px)' % $fs-body
 // site main
 $site-background-image = hexo-config('style.site.background-image')
 $leftbar-background-image = hexo-config('style.leftbar.background-image')
-$leftbar-background-color = hexo-config('style.leftbar.background-color')
+$leftbar-background-color-light = hexo-config('style.leftbar.background-color-light')
+$leftbar-background-color-dark = hexo-config('style.leftbar.background-color-dark')
 
 
 // colors

package/source/css/_defines/func.styl

@@ -137,10 +137,14 @@ newblur()
   box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
   trans1: all
   text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
+  :root[data-theme="dark"] &
+    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
   @media (prefers-color-scheme: dark)
     text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
   nav a:not(.active,:hover)
     filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
+    :root[data-theme="dark"] &
+      filter: none
     @media (prefers-color-scheme: dark)
       filter: none
   &:before,&:after
@@ -158,6 +162,8 @@ newblur()
     -webkit-backdrop-filter: blur(8px)
     background: rgba(white, 0.3)
     margin: 1px
+    :root[data-theme="dark"] &
+      background: rgba(white, 0.2)
     @media (prefers-color-scheme: dark)
       background: rgba(white, 0.2)
   &:after
@@ -169,5 +175,7 @@ newblur()
     -webkit-mask-image: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
     box-shadow: inset 0 0 4px 1px rgba(white, 0.5)
     trans1 all
+    :root[data-theme="dark"] &
+      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
     @media (prefers-color-scheme: dark)
       box-shadow: inset 0 0 2px 1px rgba(white, 0.2)

package/source/css/_plugins/comments/artalk.styl

@@ -158,6 +158,7 @@
     >img
       margin: var(--gap-p) auto
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
   a>img
     display: inline
   img[atk-emoticon]
@@ -175,5 +176,8 @@
     padding: 0.25rem 1rem
     p
       color: var(--text-p3)
-  .atk-content a
-    --at-color-main: var(--link)
+  .atk-content
+    a
+      --at-color-main: var(--link)
+    pre>code
+      padding: 0

package/source/css/_plugins/comments/twikoo.styl

@@ -6,6 +6,7 @@
     .vemoji, .tk-owo-emotion
       width: unset
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
       max-height: 24px
       max-width: 100px
       display: inline
@@ -14,6 +15,7 @@
       max-width: 400px
       max-height: 400px
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
 
 .OwO
   .OwO-body

package/source/css/_plugins/index.styl

@@ -14,6 +14,8 @@ if hexo-config('plugins.copycode.enable')
   @import 'copycode'
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
+if hexo-config('plugins.pjax.enable')
+  @import 'pjax'
 
 if hexo-config('plugins.katex.enable')
   @import 'katex'

package/source/css/_plugins/pjax.styl

@@ -0,0 +1,61 @@
+// PJAX - Seamless page transitions
+
+// Custom easing for smooth, natural animations
+$pjax-easing = cubic-bezier(0.4, 0, 0.2, 1)
+$pjax-easing-out = cubic-bezier(0.16, 1, 0.3, 1)  // Expo out - more elegant deceleration
+$pjax-duration = 0.4s
+$pjax-translate-distance = convert(hexo-config('plugins.pjax.translate-distance'))
+
+.page-loading-bar
+  position: fixed
+  top: 0
+  left: calc(50% - 16px)
+  width: 32px
+  height: 32px
+  display: none
+  flex-direction: column
+  align-items: center
+  img
+    height: 100%
+body.pjax-loading 
+  .page-loading-bar
+    display: flex
+
+// Main content transition base
+.l_body .l_main, #l_cover
+  transition: opacity $pjax-duration $pjax-easing, transform $pjax-duration $pjax-easing
+
+// Fade-in animation keyframes
+@keyframes pjax-fade-in
+  0%
+    opacity: 0
+    transform: translateY($pjax-translate-distance)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+// Loading state - content fades out and moves down slightly
+body.pjax-loading
+  .l_body .l_main, #l_cover
+    opacity: 0.4
+    transform: translateY($pjax-translate-distance)
+    pointer-events: none
+
+// Loaded state - content fades in with upward motion
+body.pjax-loaded
+  .l_body .l_main, #l_cover
+    animation: pjax-fade-in $pjax-duration $pjax-easing-out forwards
+
+// Respect reduced motion preferences
+@media (prefers-reduced-motion: reduce)
+  .l_body .l_main, #l_cover
+    transition: opacity $pjax-duration ease
+  body.pjax-loading .l_body .l_main, body.pjax-loading #l_cover
+    transform: none
+  body.pjax-loaded .l_body .l_main, body.pjax-loaded #l_cover
+    animation: pjax-fade-simple $pjax-duration ease forwards
+  @keyframes pjax-fade-simple
+    0%
+      opacity: 0
+    100%
+      opacity: 1