hexo-theme-stellar 1.30.0 → 1.30.2

package/source/css/_components/md.styl

@@ -19,26 +19,6 @@
   padding-bottom: 2rem
   overflow: hidden
 
-.l_body[text-indent] .md-text.content
-  // 应用缩进效果
-  p:not([class])
-    text-indent: 'calc(%s * 2)' % var(--fsp)
-    text-align: justify
-    a
-      text-indent: 0
-  ol,ul
-    margin-left: 0.5em
-  h1,h2,h3,h4,h5,h6
-    text-align: center
-    >a:first-child
-      display: none
-  h2
-    margin: 2em 0 1.5em
-  // 取消缩进效果
-  blockquote, .poetry, .okr, .timeline, li, .article-footer
-    p:not([class])
-      text-indent: 0
-      text-align: convert(hexo-config('style.text-align'))
 
 .md-text
   ul:not(:last-child),
@@ -68,27 +48,6 @@
 
 // titles
 .md-text.content
-  h1,h2,h3,h4,h5,h6
-    color: var(--text)
-    line-height: 1.8
-    >a:first-child
-      background: $color-theme
-      border-radius: 2px
-      margin-right: 8px
-      trans1 background
-      &:hover
-        background: $color-hover
-      &:before
-        content: ''
-        color: white
-        font-weight: 700
-        padding: 0 2px
-        font-size: $fs-12
-  h2
-    font-weight: 500
-    >a:first-child:before
-      content: ':'
-    
   blockquote, .tag-plugin
     h2,h3,h4,h5,h6
       margin-top: 0.25em
@@ -114,22 +73,21 @@
 .md-text>div
   margin: var(--gap-p) 0
 
-
+// 图片样式
 .md-text img
   border-radius: $border-image
   margin: auto
   display: block
 
+// 链接样式
 li:not([class]) a:not([class])
 p:not([class]) a:not([class])
 table a:not([class])
   position: relative
   text-decoration: none
   trans1 all
-  padding: 0 2px
   border-radius: 0
-  color: inherit
-  background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
+  background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
   &:hover
     text-decoration: none
     color: var(--theme-link)
@@ -137,6 +95,5 @@ table a:not([class])
     background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
   &:has(img)
     background: none
-    padding: 0
     &:hover
       background: none

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

@@ -0,0 +1,6 @@
+.l_body[text-indent] article.content
+  p:not([class])
+    text-indent: 'calc(%s * 2)' % var(--fsp)
+    text-align: justify
+    a
+      text-indent: 0

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

@@ -0,0 +1,120 @@
+.l_body[type=story] .md-text.content
+  --fsp: 'calc(%s + 1px)' % $fs-body
+  // 段落标题
+  h1,h2,h3,h4,h5,h6
+    color: var(--text)
+    line-height: 1.2
+    >a:first-child
+      background: $color-theme
+      border-radius: 2px
+      margin-right: 8px
+      padding: 0 2px
+      trans1 all
+      &:hover
+        background: $color-hover
+      &:before,&:after
+        color: white
+        font-weight: 700
+      &:before
+        content: ''
+        font-size: 0.5em
+      &:after
+        font-size: 0.25em
+  h2:not([class])
+    &:before,&:after
+      content: ''
+      display: inline-block
+      width: 12px
+      height: 1.2em
+      background: $cDeepOrange
+      transform: skewX(-20deg)
+      margin: 0 0.5em
+      vertical-align: top
+      position: relative
+
+  h3:not([class])
+    &:before,&:after
+      color: hsla($color-theme, 0.5)
+      margin: 0 8px
+      trans1 all
+    &:before 
+      content: '⏵'
+    &:after
+      content: '⏴'
+    &:hover
+      &:before,&:after
+        color: hsla($color-theme, 1)
+
+  h4:not([class])
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 32px
+      height: 32px
+      margin-left: -16px
+      margin-top: -12px
+      background: hsla($color-theme, 0.3)
+      border-radius: 50%
+      filter: blur(12px)
+      pointer-events: none
+      z-index: -1
+      trans1 all
+    &:hover:before
+      background: hsla($color-theme, 0.6)
+
+  ol,ul
+    margin-left: 'calc(%s * 2)' % var(--fsp)
+  h1,h2,h3,h4,h5,h6
+    text-align: center
+    margin: 2em 0 1.5em
+    >a:first-child
+      display: none
+  // 修正缩进效果
+  >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)
+  // 取消缩进效果
+  .poetry, .okr, .timeline, li, .article-footer
+    p:not([class])
+      text-indent: 0
+      text-align: convert(hexo-config('style.text-align'))
+
+
+
+.l_body[type=story] .article.banner .content .bottom.only-title
+  justify-content: center
+
+
+.l_body[text-indent] .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/pages/article-tech.styl

@@ -0,0 +1,35 @@
+.l_body[type='tech'] .md-text
+  h1,h2,h3,h4,h5,h6
+    color: var(--text)
+    line-height: 1.8
+    >a:first-child
+      background: $color-theme
+      border-radius: 2px
+      margin-right: 8px
+      padding: 0 2px
+      trans1 all
+      &:hover
+        background: $color-hover
+      &:before,&:after
+        color: white
+        font-weight: 700
+      &:before
+        content: ''
+        font-size: 0.5em
+      &:after
+        font-size: 0.25em
+  h2
+    font-weight: 500
+    >a:first-child
+      &:before
+        content: '⌘'
+  h3
+    >a:first-child:before
+      content: '='
+  h4
+    >a:first-child:before
+      content: '|'
+  h5
+    >a:first-child:before
+      content: ':'
+    

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,27 +25,45 @@
 .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
-    trans1 all
     --blur-bg: rgba(black, 0)
-    --blur-px: 0px
+    --blur-px: 1em
     --blur-sat: 100%
-    background: var(--blur-bg)
-    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-      background: var(--blur-bg)
-      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-  &:hover
-    .bg+.content
+    --blur-height-top: 6rem
+    --blur-height-bottom: 7rem
+    --blur-opacity: 0
+    &:hover
       --blur-bg: rgba(black, 0.1)
-      --blur-px: 20px
       --blur-sat: 150%
+      --blur-height-top: 6rem
+      --blur-height-bottom: 7rem
+      --blur-opacity: 1
+    background: var(--blur-bg)
+    trans1 all
+    &:before,&:after
+      content: ''
+      position: absolute
+      z-index 0
+      left: 0
+      width: 100%
+      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)
+    &:after
+      bottom: 0
+      height: var(--blur-height-bottom)
+      mask: linear-gradient(transparent, rgba(black, 0.75), black)
+    .top,.bottom
+      z-index 1
+  
 
 .article.banner
   --button-hover-bg: rgba(black, 0.05)

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.styl

@@ -39,8 +39,7 @@
     font-size: 10px
     padding: 1px 4px
     border-radius: 16px
-    font-weight: 60
-    border: 1px solid white
+    font-weight: 500
 
 // transform
 .users-wrap .user-card .card-link

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

@@ -0,0 +1,160 @@
+.users-posts-wrap .grid-box
+  display: grid
+  grid-template-columns: 1fr
+  grid-gap: 2px
+  overflow: hidden
+  border-radius: $border-card
+
+.users-posts-wrap .user-post-card
+  display: grid
+  grid-template-columns: 1fr 2fr
+  grid-gap: 16px
+  font-weight: 500
+  border-radius: 4px
+  background: var(--block)
+  padding: 1rem
+  div,span
+    line-height: 1.2
+  .labels
+    margin-top: 4px
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    justify-content: center
+    pointer-events: none
+    user-select: none
+    .label
+      color: white
+      font-size: 12px
+      padding: 2px 6px
+      margin: 4px 2px 0 2px
+      line-height: 1
+      border-radius: 16px
+  .avatar-box
+    display: flex
+    justify-content: center
+    flex-direction: column
+    align-items: center
+    padding: 1rem
+  .card-link
+    color: var(--text-p1)
+    display: flex
+    justify-content: flex-start
+    flex-direction: column
+    align-items: center
+    text-align: center
+    border-radius: 4px
+    position: relative
+    flex-shrink: 0
+    trans1 width 
+    span
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+      position: relative
+    .title
+      font-size: $fs-14
+      font-weight: 500
+      margin-top: 1rem
+      max-width: 100%
+    img
+      object-fit: cover
+      display: block
+      width: 64px
+      height: 64px
+      background: var(--card)
+      border-radius: 64px
+      floatable-trans()
+    
+  .previews
+    display: flex
+    justify-content: space-between
+    flex-direction: column
+    height: 100%
+    position: relative
+    .empty
+      min-height: 1rem
+    .desc
+      font-size: 1.2rem
+      color: var(--text-p3)
+      font-weight: 400
+      margin: 1rem 0
+      margin-right: auto
+      position: relative
+      &:before
+        position: absolute
+        font-weight: 900
+        font-size: 32px
+        color: var(--block-border)
+        top: 0
+        content: '“'
+        left: -16px
+        trans1 all
+    .spacer
+      height: 100%
+    .posts
+      margin: 0.5rem 0 1rem 0
+      display: flex
+      flex-direction: column
+      align-items: flex-start
+    .post-link
+      display: flex
+      flex-direction: column
+      color: var(--text-p1)
+      position: relative
+      trans1 color
+      &+.post-link
+        margin-top: 1rem
+      &:before
+        content: ''
+        position: absolute
+        left: -12px
+        top: 2px
+        height: 'calc(%s - 2px)' % $fs-14
+        width: 4px
+        border-radius: 4px
+        background: var(--block-border)
+        trans1 all
+      &:hover:before
+        background: $color-hover
+        // height: calc(100% - 4px)
+        height: 100%
+        top: 0
+      span 
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 1
+        position: relative
+     .title
+        font-size: $fs-14
+        font-weight: 500
+        max-width: 100%
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 2
+        position: relative
+      .date
+        font-size: $fs-12
+        color: var(--text-p3)
+        margin-top: 0.25rem
+      .no-post
+        font-size: $fs-13
+        color: var(--text-p4)
+
+
+// transform
+.users-posts-wrap .user-post-card
+  &:hover
+    .desc
+      &:before
+        color: $color-hover
+        transform: scale(1.2) translateX(-4px)
+  .card-link:hover
+    img
+      transform: scale(1.2) rotate(8deg)
+      box-shadow: $boxshadow-card-float
+  .post-link:hover
+    color: $color-hover

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)