hexo-theme-stellar 1.30.1 → 1.30.3

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: hexo-config('style.header_prefix.h2')
+  h3
+    >a:first-child:before
+      content: hexo-config('style.header_prefix.h3')
+  h4
+    >a:first-child:before
+      content: hexo-config('style.header_prefix.h4')
+  h5
+    >a:first-child:before
+      content: hexo-config('style.header_prefix.h5')
+    

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
-  margin-top: 4rem
+.article-footer
+  margin: 2rem 1rem 1rem
   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: 1rem 0 0.5rem
+  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/navbar.styl

@@ -1,76 +1,57 @@
 .navbar
-  padding: 0 1rem
   z-index: 8
-  top: 0
-  background: var(--site-bg)
-  if hexo-config('style.site') && hexo-config('style.site.background-image')
-    position inherit
-    background: none
-  else 
-    position: sticky
-    position: -webkit-sticky
-    margin-bottom: 1px
-    margin-top: -8px
-  &:after
-    content: ''
-    height: 2px
-    border-radius: 2px
-    position: absolute
-    bottom: 0
-    left: 1rem
-    right: 1rem
-    background: var(--block-hover)
+  top: 8px
+  position: sticky
+  position: -webkit-sticky
 
-.navbar nav
-  display: flex
+.navbar-blur 
+  margin: 0 1rem
+  border-radius: 64px
+  position: relative
+  newblur()
+
+.navbar-container 
+  max-width: 100%
+  margin: 1px
+  border-radius: 64px
   overflow: scroll visible
   scrollbar(0, 0)
+  
+.navbar nav
+  display: inline-flex
   font-size: $fs-14
+  z-index: 1
   >p
     margin: 0
   a
-    padding: 2px 0.75rem
-    if hexo-config('style.site') && hexo-config('style.site.background-image')
-      margin: 10px 0.25rem 8px 0
-    else
-      margin: 10px 0.25rem 8px 0.25rem
+    padding: .25rem 0.75rem
+    margin: 0.25rem
     line-height: 2
-    color: var(--text-p3)
-    border-radius: $border-button
+    color: var(--text-p1)
+    border-radius: 32px
     font-weight: 500
     white-space: nowrap
     position: relative
     z-index: 1
-    &:after
-      height: 2px
-      position: absolute
-      bottom: -8px
-      left: 0.75rem
-      right: 0.75rem
-      background: $color-theme
-      border-radius: 2px
-      pointer-events: none
+    trans1 all
     &:hover
-      background: var(--block-hover)
+      background: var(--alpha100)
     &.active, &:hover
-      color: var(--text-p1)
+      color: var(--text)
     &.active
-      background: var(--card)
+      background: var(--alpha60)
+      @media (prefers-color-scheme: dark)
+        background: rgba(white, 0.25)
       box-shadow: $boxshadow-button
       cursor default
       pointer-events: none
+      backdrop-filter: saturate(300%)
     &.active:after
       content: ''
   a+a
     margin-left: 4px
 
-@media screen and (max-width: $device-mobile-max)
+@media screen and (max-width: $device-mobile-iphone-max)
   .navbar.top
-    margin-top: 0
-    padding-left: 0
-    padding-right: 0
-    nav
-      a:first-child
-        margin-left: 1rem
-      a:last-child
-        margin-right: 1rem
+    top: 36px
+    

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

@@ -1,6 +1,6 @@
 .l_left
   margin: 8px
-  height: 'calc(%s - 16px)' % 100vh
+  max-height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
   overflow: hidden
   overflow: clip
@@ -20,13 +20,14 @@
     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'))
   else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
     background: convert(hexo-config('style.leftbar.background'))
   .leftbar-container
-    height: 100%
+    height: 'calc(%s - 16px)' % 100vh
     display: flex
     flex-direction: column
     word-break: break-all

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