hexo-theme-stellar 1.30.1 → 1.30.2

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

@@ -6,7 +6,8 @@
 
 .article.banner
   .bg+.content
-    min-height: 224px
+    min-height: 200px
+    aspect-ratio: hexo-config('article.banner_ratio')
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
 
@@ -24,20 +25,23 @@
 .l_body .article.banner .content .bottom.only-title .title
   padding: 0.75rem 0
 
-.l_body[text-indent] .article.banner .content .bottom.only-title
-  justify-content: center
 
 
 // 动画配置
 .article.banner
   .bg+.content
     --blur-bg: rgba(black, 0)
-    --blur-px: 0px
+    --blur-px: 1em
     --blur-sat: 100%
+    --blur-height-top: 6rem
+    --blur-height-bottom: 7rem
+    --blur-opacity: 0
     &:hover
       --blur-bg: rgba(black, 0.1)
-      --blur-px: 1em
       --blur-sat: 150%
+      --blur-height-top: 6rem
+      --blur-height-bottom: 7rem
+      --blur-opacity: 1
     background: var(--blur-bg)
     trans1 all
     &:before,&:after
@@ -48,13 +52,14 @@
       width: 100%
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
+      opacity var(--blur-opacity)
     &:before
       top: 0
-      height: 4rem
+      height: var(--blur-height-top)
       mask: linear-gradient(black, rgba(black, 0.75), transparent)
     &:after
       bottom: 0
-      height: 5rem
+      height: var(--blur-height-bottom)
       mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .top,.bottom
       z-index 1

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

@@ -1,31 +1,36 @@
-.md-text .article-footer
+.article-footer
   margin-top: 4rem
   padding: 1rem
   background: var(--block)
-  border-radius: $border-card
+  border-radius: $border-card-l
   border: 1px solid var(--block-border)
+  font-size: $fs-15
+  line-height: 1.6
+  color: var(--text-p1)
   &:empty
     display: none
   .header
     font-weight: 500
-    color: var(--text-p2)
     font-size: $fsh5
   .body
     --fsp: $fsp2
-    input.copy-area
-      margin: 0.75rem 0
-      padding: 0
-      width: 100%
+    >.link
+      margin: 0
+      height: 0
+      opacity 0
     p
       color: var(--text-p2)
-      margin: 0.5em 0
+      margin: 0.5rem 0
       a
         font-weight: unset
     ul
       margin: 0
       overflow: hidden
+      padding-left: 1rem
+      li
+        font-size: var(--fsp)
     .post-title
-      margin: 2px 0
+      margin: 0
       line-height: 1.2
       word-break: break-all
       p
@@ -35,11 +40,16 @@
     padding-top: 1rem
     border-top: 1px solid var(--block-border)
 
-.md-text .article-footer .social-wrap
-  grid-gap: 0.5rem 1rem
-  margin: 0
+.article-footer .social-wrap
+  grid-gap: 0.5rem 2rem
+  margin: 0.75rem 0
+  grid-template-columns: repeat(auto-fill, 20px);
+  a.social
+    background: none
+    border-radius: 4px
+    padding: 0
 
-.md-text .article-footer .qrcode
+.article-footer .qrcode
   width: 128px
   padding: 4px
   background: white
@@ -53,7 +63,7 @@
   img
     object-fit: contain
 
-.md-text .article-footer .qrcode.display
+.article-footer .qrcode.display
   margin: 2rem auto 1rem
   height: 128px !important
   opacity: 1 !important

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

@@ -102,6 +102,6 @@ article.md-text.content+.related-wrap
     svg.loading
       top: 60px
     iframe
-      border-radius: $border-card
+      border-radius: 4px
       border: none
       width: 100%

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

@@ -20,6 +20,7 @@
     margin-right: auto
 
 .l_left
+  background-position: center
   background-size: cover
   if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
     background-image: convert(hexo-config('style.leftbar.background-image'))

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

@@ -2,31 +2,31 @@ a.tag-plugin.button
   background: var(--theme)
   color: var(--alpha100)
   display: inline-flex
-  align-items: center
+  align-items: baseline
   justify-content: center
   padding: 0 4px
   trans1 background
-  margin-top: 8px
-  margin-bottom: 8px
+  margin: .5em 0
+  font-size: 1em
+  line-height: 1.5
   svg,img
-    height: 24px
+    height: 1.2em
     width: auto
-    margin: 0 -0.5em 0 1em
+    margin: 0 -0.25em 0 .5em
     flex-shrink: 0
+    align-self: center
   span 
     text-indent: 0
-    line-height: 24px
-    margin: 8px 1em
+    margin: .5em
   
 
 a.tag-plugin.button[size='xs']
   margin: 0
-  border-radius: 2px
+  border-radius: 4px
   svg,img
-    margin: 0 2px 0 0
-    height: 1em
+    margin: 0 2px
   span
-    margin: 0
+    margin: 2px
 
 a.tag-plugin.button:hover
   --theme: $color-hover

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

@@ -15,6 +15,7 @@ set_dynamic_color($theme)
   --theme: $theme
   --theme-border: hsl(hue($theme), 50, 80)
   --theme-block: hsl(hue($theme), 90, 92)
+  --theme-mark: hsl(hue($theme), 95, 80)
   --theme-codeblock: hsl(hue($theme), 50, 95)
   --text: hsl(hue($theme), 55, 16)
   --text-p1: hsl(hue($theme), 55, 20)
@@ -24,6 +25,7 @@ set_dynamic_color($theme)
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
   --theme-block: var(--block)
+  --theme-mark: var(--theme-block)
   --theme-codeblock: var(--block)
 
 .colorful[color='red']
@@ -72,11 +74,12 @@ _dark_tags()
   set_dynamic_color($theme)
     --theme: $theme
     --theme-border: hsl(hue($theme), 50, 24)
-    --theme-block: hsl(hue($theme), 16, 16)
+    --theme-block: hsl(hue($theme), 24, 24)
+    --theme-mark: hsl(hue($theme), 24, 24)
     --theme-codeblock: hsl(hue($theme), 12, 18)
-    --text: hsl(hue($theme), 100, 85)
-    --text-p1: hsl(hue($theme), 50, 75)
-    --text-p2: hsl(hue($theme), 80, 72)
+    --text: hsl(hue($theme), 100, 80)
+    --text-p1: hsl(hue($theme), 50, 72)
+    --text-p2: hsl(hue($theme), 80, 64)
   .tag-plugin.tag
     set_dynamic_color($color-theme)
   .colorful[color='red']

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

@@ -26,7 +26,7 @@
     .label
       color: white
       font-size: 12px
-      padding: 3px 6px 2px 6px
+      padding: 2px 6px
       margin: 4px 2px 0 2px
       line-height: 1
       border-radius: 16px
@@ -89,7 +89,7 @@
         color: var(--block-border)
         top: 0
         content: '“'
-        left: -20px
+        left: -16px
         trans1 all
     .spacer
       height: 100%

package/source/css/_components/tag-plugins/inline-labels.styl

@@ -28,6 +28,11 @@
     &:hover
       color: inherit
       background: none
+  blur
+    filter: blur(4px)
+    trans1 all
+    &:hover
+      filter: blur(0)
   sup,sub
     color: var(--theme)
     line-height: 1

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

@@ -2,6 +2,7 @@
   margin: 1em auto
   display: flex
   justify-content: center
+  text-align: left
 
 .md-text .link-card
   background: var(--card)
@@ -11,7 +12,7 @@
   cursor: pointer
   width: 300px
   max-width: 100%
-  border-radius: $border-card
+  border-radius: $border-card-s
   hoverable-card()
 
 .md-text .link-card.plain

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

@@ -1,5 +1,5 @@
 .md-text .tag-plugin.mark
   padding: 1px 2px
   border-radius: 2px
-  background: var(--theme-block)
+  background: var(--theme-mark)
   color: var(--text)

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

@@ -0,0 +1,15 @@
+.ds-mdrender
+  p strong
+    font-size: $fs-body
+    font-weight: 500
+    color: var(--text)
+
+.l_body[text-indent] article.content .ds-mdrender
+  p:not([class])
+    text-indent: 0
+
+
+.l_body[type=story] .md-text.content 
+  .ds-mdrender
+    ol,ul
+      margin-left: .5rem

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

@@ -29,7 +29,7 @@
   code
     background: none
 .md-text .tag-plugin.note:not([color])
-  .highlight
+  .highlight, pre
     background: var(--block-hover)
 .md-text .tag-plugin.note[child=codeblock]
   padding: 0
@@ -66,3 +66,6 @@
 
 .md-text .tag-plugin .tag-plugin.note
   --gap-p: 1rem
+
+.l_body[type=story] .tag-plugin.note .title p:not([class])
+  text-indent: 0

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

@@ -2,6 +2,8 @@
   display: flex
   flex-direction: column
   align-items: center
+  text-align: left
+  --fsp: $fs-body
   .content
     >.title
       font-weight: 500

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

@@ -31,32 +31,32 @@
     font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
-// type=text
-.md-text .tag-plugin.quot
-  .content[type=text]
-    &:before,&:after
-      content: ""
-      position: absolute
-      width: 8px
-      height: 14px
-    &:before
-      top: -8px
-      left: 0
-      border-top: 6px solid $color-accent
-      border-left: 6px solid $color-accent
-    &:after
-      right: 0
-      bottom: -8px
-      border-right: 6px solid $color-accent
-      border-bottom: 6px solid $color-accent
-  h1.content[type=text]
-    &:before,&:after
-      width: 12px
-      height: 20px
-      border-width: 8px
+// // type=text
+// .md-text .tag-plugin.quot
+//   .content[type=text]
+//     &:before,&:after
+//       content: ""
+//       position: absolute
+//       width: 8px
+//       height: 14px
+//     &:before
+//       top: -8px
+//       left: 0
+//       border-top: 6px solid $color-accent
+//       border-left: 6px solid $color-accent
+//     &:after
+//       right: 0
+//       bottom: -8px
+//       border-right: 6px solid $color-accent
+//       border-bottom: 6px solid $color-accent
+//   h1.content[type=text]
+//     &:before,&:after
+//       width: 12px
+//       height: 20px
+//       border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot .content[type=icon]
+.md-text .tag-plugin.quot
   img,svg
     height: 1.5em
     display: inline-block
@@ -68,4 +68,30 @@
     padding-top: 1px
   span.empty
     padding: 0 8px
-  
+
+.md-text .tag-plugin.quot.p
+  .content
+    trans1 all
+  .content .text
+    position: relative
+  .content .text:after
+    content: ""
+    position: absolute
+    --width: 90%
+    width: var(--width)
+    height: 4px
+    left: calc(50% - var(--width) / 2)
+    bottom: -8px
+    border-radius: 100%
+    background: var(--text)
+    opacity: 0.2
+    filter: blur(2px)
+    trans1 all
+  &:hover
+    .content
+      transform: translateY(-4px) scale(1.05)
+      .text:after
+        opacity: 0.3
+        filter: blur(8px)
+        transform: translateY(4px) scale(1.2, 1.5)
+

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

@@ -15,6 +15,7 @@
     aspect-ratio: 1.5
     width: 100%
     height: 100%
+    border-radius: $border-card-s
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
   .info
     margin-top: 0.5rem

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

@@ -6,13 +6,15 @@
   flex-direction: column
   &[align=left]
     align-items: flex-start
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-start
   &[align=center]
     align-items: center
+    .nav-tabs,.tab-content
+      align-items: center
   &[align=right]
     align-items: flex-end
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-end
 
 .tag-plugin.tabs
@@ -75,18 +77,14 @@
     max-width: 100%
     text-align: justify
     margin-top: .5rem
+    display: flex
+    flex-direction: column
     .tab-pane
       display: block
+      overflow: hidden
       &:not(.active)
-        visibility: hidden
         height: 0
       &.active
-        visibility: visible
         height: auto
-  .tab-content:has(.grid-box)
+  .tab-content:has(.grid-box),.tab-pane:has(.grid-box)
     width: 100%
-
-.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
-  text-indent: 'calc(%s * 2)' % var(--fsp)
-  a
-    text-indent: 0

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

@@ -15,6 +15,10 @@
     padding-left: 0
     &:before
       display: none
+.l_body[type=story] .md-text.content 
+  .tag-plugin.timeline
+    ol,ul
+      margin-left: 0
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -82,7 +86,7 @@
 
 .tag-plugin.timeline .body
   background: var(--card)
-  border-radius: $border-card
+  border-radius: 16px
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -113,32 +117,21 @@
     font-weight: 700
     margin: 0.5rem 0 0.75rem
     line-height: 1.25
+    border-bottom: 1px solid var(--block-border)
     &:only-child 
       margin-bottom: 0.5rem
       font-weight: 500
     a 
       color: inherit
       text-decoration: none
-      border-bottom: 2px solid $color-theme
+      padding-bottom: 0.75rem
+      display: inline-block
       trans1 all
-      background: none
       &:hover
-        background: none
-        border-radius: 0
-        border-bottom: 2px solid $color-hover
-  >p:first-child:not([class]) a:not([class])
-    padding: 0
-    margin: 0
-    color: inherit
-    text-decoration: none
-    border-bottom: 2px solid $color-theme
-    trans1 all
-    background: none
-    &:hover
-      background: none
-      border-radius: 0
-      border-bottom: 2px solid $color-hover
-    
+        color: $color-hover
+  >p:first-child:not([class])
+    font-size: 1rem
+    margin: .25rem 0 .5rem
   
   a
     &:has(img):after
@@ -159,7 +152,6 @@
   flex-wrap: wrap
   justify-content: space-between
   align-items: stretch
-  background: var(--card)
   span
     line-height: 1.8
   &:empty

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

@@ -4,7 +4,7 @@
 .widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 1rem
   box-shadow: $boxshadow-card
 

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

@@ -1,9 +1,10 @@
 .widget-wrapper.markdown
   .widget-body
-    border-radius: $border-card
-    padding: 4px 16px
+    border-radius: $border-card-s
+    padding: .25rem 1rem
     background: var(--alpha50)
-
+    >*:first-child
+      margin-top: .75rem
     a:not([class])
       trans1 all
       border-bottom: 1px solid var(--text)

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

@@ -7,7 +7,7 @@
     line-height: 1.2
     background: var(--alpha20)
     padding: 10px 16px
-    border-radius: $border-card
+    border-radius: $border-card-s
     display: block
     border-left: 0
     box-sizing: border-box

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

@@ -1,5 +1,5 @@
 .widget-wrapper.tagcloud .widget-body
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 12px 16px
   background: var(--alpha50)
   a  

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

@@ -24,7 +24,7 @@
     .header:before
       left: calc(6px - var(--gap-padding))
     .body
-      border-radius: $border-card
+      border-radius: $border-card-s
       padding: 0.5rem 1rem
       p,li
         --fsp: $fsp3

package/source/css/_custom.styl

@@ -18,6 +18,9 @@ $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sa
 $ff-code = $ff-codeblock
 $ff-logo = $ff-body
 
+$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
+$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
+
 if hexo-config('style.font-family.body')
   $ff-body = convert(hexo-config('style.font-family.body'))
 
@@ -55,9 +58,10 @@ $fsp3 = 'calc(%s - 3px)' % $fs-body
 
 $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
+$border-card-s = convert(hexo-config('style.border-radius.card-s'))
 $border-bar = convert(hexo-config('style.border-radius.bar'))
 $border-image = convert(hexo-config('style.border-radius.image'))
-$border-button = 4px
+$border-button = 8px
 
 // 可以动态变化的属性
 :root
@@ -94,7 +98,7 @@ $border-button = 4px
   --gap-max: calc(var(--gap-margin) + var(--gap-padding))
 
 // 文章布局风格
-.l_body.story
+.l_body[type=story]
   --gap-p: 2rem
   div.tag-plugin,p>img
     margin-top: 2.4rem

package/source/css/_defines/const.styl

@@ -48,3 +48,6 @@ $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3
 $c-purple = #9c27b0
+
+$hue-yellow = 50
+$cDeepOrange = hsl(14 100% 57%)

package/source/css/_defines/func.styl

@@ -1,3 +1,13 @@
+svg-mask-icon($svg)
+  -webkit-mask-image: url($svg)
+  -webkit-mask-repeat: no-repeat
+  -webkit-mask-position: center
+  -webkit-mask-size: contain
+  mask-image: url($svg)
+  mask-repeat: no-repeat
+  mask-position: center
+  mask-size: contain
+
 
 // // 可替代 transition 使用
 // transition($op = all, $time = 0.28s, $ease = ease-out)

package/source/css/_defines/theme.styl

@@ -1,3 +1,7 @@
+// 通用 hsla 函数
+hsla-var(h = var(--hue), s = var(--sat), l = var(--light), a = 1)
+  return unquote('hsla(%s, %s, %s, %s)' % (h s l a))
+
 // Deprecated function. Keep for compatibility.
 theme($t)
   convert(hexo-config('style.prefers_theme')) == $t
@@ -43,6 +47,11 @@ _common_root()
     --theme-link: $color-link
     --theme-color: $color-theme
     --theme-color-opa: $color-theme-opa
+    // new
+    --hue: 50
+    --sat: 90%
+    --light: 80%
+    --dynamic-color: hsla-var()
 
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)

package/source/js/services/artalk_latest_comment.js

@@ -9,7 +9,8 @@ utils.jq(() => {
         if (api == null) {
           continue;
         }
-        utils.request(el, api, function (data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           data = data.data || [];
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';