hexo-theme-stellar 1.26.2 → 1.26.4

package/source/css/_defines/const.styl

@@ -42,7 +42,8 @@ $color-google-red = #E8453C
 
 $c-red = #F44336
 $c-orange = #FA6400
-$c-yellow = #FFBD2B
+$c-amber = #FFBD2B
+$c-yellow = #f2e03d
 $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3

package/source/css/_defines/theme.styl

@@ -15,7 +15,7 @@ $color-text-s = saturation($color-text)
 $color-text-l = lightness($color-text)
 
 set_text_dark()
-  --text-p0: hsl($color-text-h, $color-text-s, 0)
+  --text: hsl($color-text-h, $color-text-s, 0)
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
@@ -24,7 +24,7 @@ set_text_dark()
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
 set_text_light()
-  --text-p0: hsl($color-text-h, $color-text-s, 100)
+  --text: hsl($color-text-h, $color-text-s, 100)
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
@@ -38,8 +38,9 @@ set_text_light()
   --alpha20: rgba(white, 0.2)
   --alpha50: rgba(white, 0.5)
   --alpha60: rgba(white, 0.6)
+  --alpha75: rgba(white, 0.75)
   --alpha100: white
-  --sidebar-bg: rgba(white, 0.5)
+  --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
   --block: hsl($color-block-h, $color-block-s, 95)
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
@@ -56,8 +57,9 @@ set_darkmode()
     --alpha20: rgba(black, 0.2)
     --alpha50: rgba(black, 0.5)
     --alpha60: rgba(black, 0.6)
+    --alpha75: rgba(black, 0.75)
     --alpha100: black
-    --sidebar-bg: rgba(black, 0.64)
+    --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

package/source/css/_layout/layout.styl

@@ -3,6 +3,7 @@
   margin: auto
   padding: 0 var(--gap-l)
   justify-content: center
+  font-size: var(--fsp)
 
 .l_body .l_left
   z-index: 8
@@ -27,7 +28,7 @@
   left: 0
   width: 100%
   height: 100%
-  background: rgba(black, 0.5)
+  background: rgba(black, 0.2)
   z-index: 9
   opacity 0
   trans1 opacity
@@ -47,7 +48,7 @@
       max-width: 100%
   .l_body.mobile
     .l_left
-      transition: transform .3s ease-out
+      transition: transform .38s ease-out
   .l_body.mobile.sidebar
     .l_left
       transform: translateX(0px)

package/source/css/_layout/list.styl

@@ -11,7 +11,7 @@
     line-height: 1.2
     font-size: $fs-h3
     border-bottom: none
-    color: var(--text-p0)
+    color: var(--text)
     trans1 color
     @media screen and (max-width: $device-mobile)
       font-size: $fs-h4
@@ -24,11 +24,17 @@
   display: block
   margin: 1rem 0
   border-radius: $border-card
-  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
+  background: var(--card)
+  @media (prefers-color-scheme: dark)
+    &:hover
+      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+  @media (prefers-color-scheme: light)
+    box-shadow: $boxshadow-card
+    hover-float()
   trans1 all
   overflow: hidden
   z-index: 0
-  background: var(--card)
+  
   position: relative
   .excerpt
     margin: 1rem 0
@@ -56,11 +62,9 @@
         height: 1.5rem
         color: $c-red
 
-.post-list .post-card:hover
-  img 
-    transform: scale(1.02)
-    filter: brightness(80%)
-
+.post-list.post .post-card:hover
+  img
+    filter: brightness(50%)
 
 // common article
 .post-list .md-text
@@ -102,7 +106,8 @@
       position: absolute
       line-height: 1.2
       width: 'calc(100% - %s * 2)' % 1rem
-      color: var(--text-p0)
+      --text-banner: white
+      color: var(--text-banner)
       &[position=top]
         top: 0
         background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))

package/source/css/_layout/main.styl

@@ -6,8 +6,6 @@
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: 1rem
   header
     margin: 2rem 1rem 1rem
     .logo-wrap
@@ -16,4 +14,22 @@
 .l_body.index
   .l_main
     @media screen and (max-width: $device-mobile-max)
-      padding-top: 0
+      padding-top: 0
+
+body>.sitebg
+  position fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-size: cover
+  if hexo-config('style.site') && hexo-config('style.site.background-image')
+    background-image: convert(hexo-config('style.site.background-image'))
+  .siteblur
+    width: 100%
+    height: 100%
+    blur-effect()
+    if hexo-config('style.site') && hexo-config('style.site.blur-px')
+      --blur-px: convert(hexo-config('style.site.blur-px'))
+    if hexo-config('style.site') && hexo-config('style.site.blur-bg')
+      --blur-bg: convert(hexo-config('style.site.blur-bg'))

package/source/css/_layout/md.styl

@@ -1,62 +1,35 @@
+// 文本区域
 .md-text
   max-width: 100%
   padding: 1rem
-  &:first-child
-    margin-top: 0
   color: var(--text-p1)
-  line-height: 1.7
+  line-height: 1.6
   word-break: break-word
 
+// 摘要
 .md-text.excerpt
   p
     font-size: $fs-14
     margin: 1em 0
 
-h1.article-title
-  margin-top: .5em
-  margin-bottom: 1em
-  line-height: 1.2
-  color: var(--text-p0)
-
+// 正文区域
 .md-text.content
   position: relative
+  padding-top: 0
   padding-bottom: 2rem
   overflow: hidden
-  >:first-child:not(h1)
-    margin-top: 0
-  h1:not(:first-child)
-    margin-top: 1em
-  h2
-    margin-bottom: 1rem
-  h3,h4,h5,h6
-    margin-bottom: .5rem
-  h2,h3,h4,h5,h6
-    color: var(--text-p0)
-    padding-top: 1rem
-    line-height: 1.8
-    &:hover
-      a.headerlink:before
-        opacity: 1
-  blockquote, .tag-plugin
-    h2,h3,h4,h5,h6
-      margin-top: 0.25em
-      margin-bottom: 0.25em
-      padding-top: 0
 
 .l_body[text-indent] .md-text.content
-  >p:not([class])
-    text-indent: 'calc(%s * 2)' % var(--fs-p)
+  >p
+    text-indent: 'calc(%s * 2)' % var(--fsp)
     text-align: convert(hexo-config('style.text-align'))
-    a
-      text-indent: 0
   h1,h2,h3,h4,h5,h6
     text-align: center
+    a.headerlink
+      display: none
   >h2:not([class])
     border-bottom: none
 
-.md-text.content:first-child
-  padding-top: 0
-
 .md-text
   ul:not(:last-child),
   ol:not(:last-child)
@@ -64,7 +37,8 @@ h1.article-title
     margin: 0
   blockquote,ul,ol
     p,ul,ol
-      font-size: $fs-14
+      --fsp: var(--fsp1)
+      font-size: var(--fsp)
       line-height: 1.5
       code 
         font-size: inherit
@@ -84,33 +58,45 @@ h1.article-title
 
 // titles
 .md-text.content
+  h1,h2,h3,h4,h5,h6
+    margin-bottom: var(--gap-p)
+    color: var(--text)
+    line-height: 1.8
+  blockquote, .tag-plugin
+    h2,h3,h4,h5,h6
+      margin-top: 0.25em
+      margin-bottom: 0.25em
+      
+  a.headerlink 
+    background: $color-theme
+    border-radius: 2px
+    margin-right: 8px
+    trans1 background
+  a.headerlink:hover
+    background: $color-hover
   a.headerlink:before
-    opacity: 0
-    content: '#'
-    position: absolute
-    margin-left: -0.6em
+    content: ''
+    color: white
+    font-weight: 700
+    padding: 0 2px
+    font-size: $fs-12
   h2
-    margin-top: 2rem
-    border-bottom: 1px solid var(--block-border)
+    margin-top: 'calc(%s + 1rem)' % var(--gap-p)
     font-weight: 400
+    a.headerlink:before
+      content: ':'
   h3
-    margin-top: 1.5rem
+    margin-top: 'calc(%s + 0.75rem)' % var(--gap-p)
     font-weight: 400
   h4,h5,h6
+    margin-top: 'calc(%s + 0.5rem)' % var(--gap-p)
     font-weight: 500
-  h1+h2
-    margin-top: -0.5rem
-  h2+h3
-    margin-top: -0.5rem
-  h3+h4
-    margin-top: -0.5rem
-  h4+h5
-    margin-top: -0.5rem
-  h5+h6
-    margin-top: -0.5rem
+
+.md-text.content:first-child .tag-plugin:first-child
+  margin-top: 0
 
 .md-text p
-  font-size: var(--fs-p)
+  font-size: var(--fsp)
 
 .md-text pre
   -webkit-font-smoothing: auto
@@ -133,35 +119,13 @@ h1.article-title
 .md-text 
   p:not([class]), li:not([class])
     a:not([class])
-      position: relative
-      padding: 2px 0
-      text-decoration: none
-      line-height: 1.2
-      &:before
-        content: ''
-        position: absolute
-        border-radius: 2px
-        bottom: 0
-        left: 0
-        right: 0
-        height: 1px
-        if hexo-config('style.link.underline') == true
-          opacity: 0.8
-        else
-          opacity: 0
-        background: var(--theme-link)
-        trans1: all
+      padding: 0 2px
+      margin: 0 -2px
+      border-radius: 2px
+      trans1 all
+      text-decoration: underline
       &:hover
-        border-bottom: none
-        color: var(--theme-link)
-        z-index 0
-        &:before
-          height: 100%
-          opacity: 0.2
-          z-index -1
-          bottom: 0
-          left: -2px
-          right: -2px
+        color: $color-hover
       &:has(img)
-        &:before
-          content: none
+        text-decoration: none
+        padding: 0

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

@@ -34,7 +34,7 @@
       color: var(--text-p4)
     &:hover
       border-bottom: 1px solid $color-theme
-      color: var(--text-p0)
+      color: var(--text)
       time
         color: $color-theme
 
@@ -60,7 +60,7 @@
       font-size: $fs-12
     &:hover
       background: var(--block-hover)
-      color: var(--text-p0)
+      color: var(--text)
       .badge
         opacity: 1
         color: $color-theme
@@ -90,5 +90,5 @@
       &:before
         color $color-theme
         opacity: 1
-      color: var(--text-p0)
+      color: var(--text)
       background: var(--block-hover)

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

@@ -0,0 +1,57 @@
+.article.banner
+  --text-banner: var(--text)
+  background: var(--block)
+  margin: 0
+  height: unset
+
+.article.banner
+  .bg+.content
+    min-height: 240px
+    --text-banner: white
+    --button-hover-bg: rgba(white, 0.25)
+
+.article.banner .content
+  .top
+    align-items: flex-start
+    margin: 1rem 'calc(1rem - 4px)'
+  .title
+    font-size: $fs-h1
+    color: var(--text-banner)
+  .bottom
+    padding: 1.5rem 1rem
+  h1
+    line-height: 1.2
+    margin: 0
+  
+  
+  
+
+// 动画配置
+.article.banner
+  .bg+.content
+    trans1 all
+    --blur-bg: rgba(black, 0.1)
+    --blur-px: 0px
+    --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-bg: rgba(black, 0.1)
+      --blur-px: 20px
+      --blur-sat: 150%
+
+.article.banner
+  --button-hover-bg: rgba(black, 0.05)
+set_darkmode()
+  .article.banner
+    --button-hover-bg: rgba(white, 0.15)
+
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    set_darkmode()
+if hexo-config('style.darkmode') == 'always'
+  set_darkmode()

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

@@ -11,6 +11,7 @@
     color: var(--text-p2)
     font-size: $fs-h4
   .body
+    --fsp: var(--fsp2)
     input.copy-area
       margin: 0.75rem 0
       padding: 0
@@ -24,9 +25,16 @@
       margin: 0
       overflow: hidden
     .post-title
-      margin: 0.5rem 0
+      margin: 2px 0
       line-height: 1.2
       word-break: break-all
+      p
+        --fsp: var(--fsp2)
+      a
+        text-decoration: none
+        color: unset
+        &:hover
+          text-decoration: underline
   section+section
     margin-top: 1rem
     padding-top: 1rem
@@ -43,11 +51,15 @@
   border-radius: 4px
   box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 0 32px 0px rgba(0, 0, 0, 0.1)
   overflow: hidden
-  trans1 height
+  trans1 all
+  height: 0
+  margin: 0 auto
+  transform: scale(0.01)
   img
     object-fit: contain
 
 .md-text .article-footer .qrcode.display
   margin: 2rem auto 1rem
   height: 128px !important
-  visibility: visible !important
+  opacity: 1 !important
+  transform: scale(1)

package/source/css/_layout/partial/bread-nav.styl

@@ -1,24 +1,30 @@
 // 面包屑导航
 .bread-nav
-  padding: 0.25rem 1rem 0
-  color: var(--text-p3)
   font-weight: 500
   display: flex
   justify-content: space-between
-  div#breadcrumb
+  color: var(--text-banner)
+  .flex-row
     display: flex
-    align-items: center
+    align-items: baseline
     flex-direction: row
-    &:not([style]) a
-      color: var(--theme-link)
-    &[style] a
-      color: inherit
-    span.sep
-      color: var(--text-p3)
-    a.cap:hover
-      color: $color-hover
+  a
+    color: var(--text-banner)
+    padding: 4px
+    border-radius: 2px
+    &:hover
+      background: var(--button-hover-bg)
+  span 
+    color: var(--text-banner)
+  span.sep
+    opacity 0.5
+    margin: 0
+  span.text
+    padding: 4px
+
   div#post-meta
-    margin-top: 2px
+    span.sep:before
+      content: '|'
     span.updated
       visibility: hidden
   &:hover
@@ -35,15 +41,13 @@
   a  
     display: flex
     align-items: center
-    color: var(--text-p2)
+    color: var(--text-banner)
     svg
       margin-right: 4px
     &.bold 
       font-weight: 600
-      color: var(--text-p1)
+      color: var(--text-banner)
     span 
       margin-left: 4px
     &:hover
-      color: var(--theme-link)
-  a+a   
-    margin-top: 8px
+      opacity 1

package/source/css/_layout/partial/cover.styl

@@ -16,12 +16,13 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  font-size: var(--fsp)
   .cover-title
     font-weight: 700
     font-size: 1.5rem
     margin: 1rem 0
     line-height: 1.2
-    color: var(--text-p0)
+    color: var(--text)
   .description
     margin: 1rem 0
   .start-wrap
@@ -48,16 +49,6 @@
         border-radius: 2rem
 
 
-.l_cover.post .cover-wrap
-  z-index: 1
-  .article-title
-    text-align: center
-    padding: 1rem
-    margin: 1em 0 0 0
-    @media screen and (min-width: $device-2k)
-      font-size: 3rem
-
-
 .l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview

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

@@ -1,8 +1,8 @@
 .page-footer
   margin: 4rem 1rem 3rem
-  color: var(--text-p3)
+  color: var(--text-p2)
   a
-    color: var(--text-p3)
+    color: var(--text-p2)
     &:hover
       color: $color-hover
 

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

@@ -1,12 +1,16 @@
 .nav-wrap
-  position: sticky
-  position: -webkit-sticky
-  margin-top: -0.5rem
-  top: -2px
-  background: var(--site-bg)
   padding: 0 1rem
   z-index: 8
-  margin-bottom: 1px
+  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: ''
     width: 'calc(100% - 2 * %s)' % 1rem
@@ -17,15 +21,19 @@
     left: 1rem
     background: var(--block-hover)
 
-nav.cap
+nav.sub
   display: flex
   overflow: scroll visible
   scrollbar(0, 0)
+  font-size: $fs-14
   >p
     margin: 0
   a
     padding: .25rem 0.75rem
-    margin: 10px 0.25rem 8px 0.25rem
+    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
     line-height: 2
     color: var(--text-p3)
     border-radius: $border-button

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

@@ -31,7 +31,8 @@ article.md-text.content+.related-wrap
     .title
       color: var(--text-p1)
       font-weight: 500
-      font-size: 1rem
+      --fsp: var(--fsp1)
+      font-size: var(--fsp)
       trans2 color border
       position: relative
       padding-bottom: 2px
@@ -39,7 +40,8 @@ article.md-text.content+.related-wrap
       line-height: 1.6
     .excerpt
       color: var(--text-p3)
-      font-size: $fs-12
+      --fsp: var(--fsp3)
+      font-size: var(--fsp)
       margin-top: 0.5rem
       display: -webkit-box
       -webkit-box-orient: vertical
@@ -65,7 +67,7 @@ article.md-text.content+.related-wrap
       padding: 1rem 0
     .note
       margin-bottom: 0.75rem
-      font-size: $fs-12
+      font-size: $fs-13
       color: var(--text-p4)
       font-weight: 500
     a

package/source/css/_layout/sidebar/footer.styl

@@ -5,6 +5,7 @@
   display: grid
   grid-gap: 0.25rem 0.25rem
   grid-template-columns: repeat(auto-fill, 32px)
+  text-align: center
   .social
     line-height: 0
     display: inline-block

package/source/css/_layout/sidebar/logo.styl

@@ -10,6 +10,7 @@
     height: 48px
     margin-right: 1rem
     border-radius: 4px
+    flex-shrink: 0
   a
     color: inherit
     display: flex
@@ -56,14 +57,14 @@
           animation-timing-function: linear
 
   a.title
-    font-size: 1.75rem
+    font-size: 1.5rem
     font-weight: 900
     color: inherit
     line-height: 1.2
     display: block
     position: relative
     .main
-      color: var(--text-p0)
+      color: var(--text)
     .sub
       color: var(--text-p1)
       trans2 opacity transform