hexo-theme-stellar 1.44.0 → 2.0.0-rc.2

package/source/css/_components/list.styl

@@ -1,31 +1,26 @@
 // list
-.l_main .post-list
+.site-main .post-list
   margin: 1rem
   .post-title:first-child
     margin-top: .5rem
 
-// 白底文章卡片（含置顶轮播卡片）hover 时：标题底部主题色下划线高度从 0 生长到 12px 并淡入，层级在文字下层
+// 文章列表标题使用逐行主题色粗下划线，换行时按每行文字绘制。
 .post-list .post-card .post-title
-  position: relative
   width: fit-content
-  &::after
-    content: ''
-    position: absolute
-    left: 0
-    bottom: -2px
-    border-radius: 2px
-    z-index: -1
-    width: 100%
-    height: 0
-    opacity: 0
-    background: var(--theme)
-    transition: height .25s ease, opacity .25s ease
+  text-decoration-line: underline
+  text-decoration-style: solid
+  text-decoration-thickness: 8px
+  text-decoration-color: transparent
+  text-underline-offset: -2px
+  text-decoration-skip-ink: none
+  transition: text-decoration-color .25s ease
 
-.post-list .post-card:hover .post-title::after
-  height: 12px
-  opacity: 0.5
+.post-list .post-card:hover .post-title,
+.post-list .post-card:focus-visible .post-title,
+.post-list .post-card:focus-within .post-title
+  text-decoration-color: unquote('color-mix(in srgb, var(--theme) 50%, transparent)')
 
-.l_main .post-list
+.site-main .post-list
   .post-title
     font-weight: 500
     margin: 1.25rem auto .75rem 0
@@ -33,13 +28,17 @@
     font-size: $fsh4
     border-bottom: none
     color: var(--text)
-    trans1 color
+    trans2 color, text-decoration-color, .25s
     @media screen and (max-width: $device-mobile)
       font-size: $fsh5
       margin: 0.5rem 0
   .wiki .post-title
     margin-top: 0.5rem
 
+@media (prefers-reduced-motion: reduce)
+  .post-list .post-card .post-title
+    transition: none
+
 // card
 .post-list .post-card-wrap
   display: block
@@ -156,7 +155,7 @@
     object-fit: cover
     width: 100%
     border-radius: 0
-    aspect-ratio: hexo-config('article.cover_ratio')
+    aspect-ratio: hexo-config('article.listing.cover_ratio')
     
 // 封面渐变模糊卡片：文章 photo 卡片与专栏最新文章卡片共用（接入 cover-overlay 统一覆盖层）
 .post-list .post-card .cover
@@ -203,10 +202,23 @@
         font-size: $fsh4
       .caption
         font-size: $fs-13
+  &.no-cover
+    background: var(--card)
+    &:before
+      display: none
+    &:after
+      background-image: none
+    .cover-info
+      position: relative
+      color: var(--text)
+      .text
+        text-shadow: none
+      .topic, .caption
+        color: var(--text-p2)
 
 .post-list .post-card.post.photo
   .cover img
-    aspect-ratio: hexo-config('article.cover_ratio')
+    aspect-ratio: hexo-config('article.listing.cover_ratio')
   // hover 放大覆盖：基规则的 `transform: translateZ(0)` 特异性高于上方 `.post-card:hover` 的 scale，
   // 需用更高特异性选择器在基规则之后覆盖，保持 hover 缩放动画（叠加恒等变换）
   &:hover
@@ -254,6 +266,8 @@
       flex: none
       width: 100%
       aspect-ratio: 2 / 1
+      &.no-cover
+        aspect-ratio: auto
       border-radius: $border-card-l
       overflow: hidden
       // 背景图由 .cover 自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜

package/source/css/_components/main.styl

@@ -1,19 +1,16 @@
-.l_main
+.site-main
   position: relative
   padding-bottom: var(--gap-page)
-  @media screen and (min-width: $device-mobile-max)
-    padding-top: var(--gap-page)
-  header
+  padding-top: var(--shell-content-top-gap)
+  > .brand-header
+    display: none
     margin: 2rem 1rem 1rem
-    .logo-wrap
+    @media screen and (max-width: $device-tablet)
+      display: flex !important
+    .brand-wrap
       margin: 0
 
-.l_body.index
-  .l_main
-    @media screen and (max-width: $device-mobile-max)
-      padding-top: 0
-
-body>.sitebg
+body > .site-background
   position fixed
   top: 0
   left: 0
@@ -21,16 +18,16 @@ body>.sitebg
   bottom: 0
   background-size: cover
   if $site-background-image
-    background-image: convert($site-background-image)
-  .siteblur
+    background-image: url($site-background-image)
+  .site-background__blur
     width: 100%
     height: 100%
     --blur-px: 0
     --blur-sat: 200%
     blur-effect()
-    if hexo-config('style.site.blur-sat') 
-      --blur-sat: convert(hexo-config('style.site.blur-sat'))
-    if hexo-config('style.site.blur-px')
-      --blur-px: convert(hexo-config('style.site.blur-px'))
-    if hexo-config('style.site.blur-bg')
-      --blur-bg: convert(hexo-config('style.site.blur-bg'))
+    if hexo-config('appearance.backgrounds.page.backdrop.saturation')
+      --blur-sat: convert(hexo-config('appearance.backgrounds.page.backdrop.saturation'))
+    if hexo-config('appearance.backgrounds.page.backdrop.radius')
+      --blur-px: convert(hexo-config('appearance.backgrounds.page.backdrop.radius'))
+    if hexo-config('appearance.backgrounds.page.backdrop.overlay')
+      --blur-bg: convert(hexo-config('appearance.backgrounds.page.backdrop.overlay'))

package/source/css/_components/md.styl

@@ -87,17 +87,12 @@
 li:not([class]) a:not([class])
 p:not([class]) a:not([class])
 table a:not([class])
-  position: relative
-  text-decoration: none
-  trans1 all
-  border-radius: 0
-  background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
-  &:hover
-    text-decoration: none
-    color: var(--link)
-    border-radius: 4px
-    background: linear-gradient(0deg,var(--link-a20),var(--link-a20)) no-repeat left 100%/100% 100%
+  text-decoration-line: underline
+  text-decoration-color: var(--block-border)
+  text-decoration-thickness: 1px
+  text-underline-offset: 2px
+  transition: text-decoration-color .2s ease-out
+  &:hover, &:focus-visible
+    text-decoration-color: var(--link)
   &:has(img)
-    background: none
-    &:hover
-      background: none
+    text-decoration: none

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

@@ -1,4 +1,4 @@
-.l_body[text-indent] article.content
+body[data-text-indent] article.content
   p:not([class])
     text-indent: 'calc(%s * 2)' % var(--fs-content)
     text-align: justify

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

@@ -1,4 +1,4 @@
-.l_body[type=story] .md-text.content
+body[data-article-style='story'] .md-text.content
   --fs-content-base: 'calc(%s + 2px)' % var(--fs-root)
   --fs-content: var(--fs-content-base)
   --fsh2: 'calc(%s + 11px)' % var(--fs-content)
@@ -45,9 +45,10 @@
       trans1 all
       vertical-align: middle
     &:before
-      margin-left: -1em
+      margin-left: -1.2em
       svg-mask-icon(var(--icon-h3-left))
     &:after
+      margin-left: .2em
       svg-mask-icon(var(--icon-h3-right))
 
   h4:not([class])
@@ -82,7 +83,7 @@
   .poetry, .okr, .timeline, li, .article-footer
     p:not([class])
       text-indent: 0
-      text-align: convert(hexo-config('style.text-align'))
+      text-align: convert(hexo-config('appearance.typography.content_align'))
 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image-l
@@ -90,7 +91,7 @@
       border-radius: $border-image-l
 
 
-.l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
+body[data-article-style='story'] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
   text-align: center
   --inset: calc(var(--fs-content) * 2)
   margin-left: var(--inset)
@@ -123,11 +124,11 @@
       background-color: x-theme-alpha(0.5)
 
 
-.l_body[type=story] .article.banner .content .bottom.only-title
+body[data-article-style='story'] .article.banner .content .bottom.only-title
   justify-content: center
 
 
-.l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
+body[data-text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
   text-indent: 'calc(%s * 2)' % var(--fs-content)
   a
     text-indent: 0

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

@@ -1,4 +1,4 @@
-.l_body[type='tech'] article.content
+body[data-article-style='tech'] article.content
   h1,h2,h3,h4,h5,h6
     color: var(--text)
     line-height: 1.8
@@ -22,14 +22,14 @@
     font-weight: 500
     >a:first-child
       &:before
-        content: hexo-config('style.header_prefix.h2')
+        content: hexo-config('appearance.typography.heading_prefixes.h2')
   h3
     >a:first-child:before
-      content: hexo-config('style.header_prefix.h3')
+      content: hexo-config('appearance.typography.heading_prefixes.h3')
   h4
     >a:first-child:before
-      content: hexo-config('style.header_prefix.h4')
+      content: hexo-config('appearance.typography.heading_prefixes.h4')
   h5
     >a:first-child:before
-      content: hexo-config('style.header_prefix.h5')
+      content: hexo-config('appearance.typography.heading_prefixes.h5')
     

package/source/css/_components/pages/collection-preview.styl

@@ -36,12 +36,10 @@
 
 .collection-preview__surface
   box-sizing: border-box
+  position: relative
   width: 100%
   margin: 0 auto
   padding: var(--gap-base)
-  border-radius: $border-card-l
-  background: var(--card)
-  box-shadow: $boxshadow-card
   &[data-preview-width='240']
     max-width: 240px
   &[data-preview-width='320']
@@ -50,8 +48,6 @@
     width: unquote('min(720px, calc(100vw - 2 * var(--gap-page)))')
     max-width: none
     grid-column: 1 / -1
-  &[data-ui-surface='glass']
-    background: linear-gradient(135deg, rgba(white, .42), rgba(white, .12)), url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg) center / cover
   >header
     display: flex
     justify-content: space-between

package/source/css/_components/pages/settings.styl

@@ -0,0 +1,184 @@
+.settings-page
+  --settings-label-width: 8rem
+  --settings-content-gap: 2rem
+
+.settings-page__header
+  margin: 1rem 0
+  h1
+    margin: 0
+    font-size: 1.75rem
+
+.settings-section
+  margin: 0
+  padding: 1.5rem 0
+  h2
+    margin: 0 0 1.5rem
+    font-size: 1.125rem
+
+.settings-section__body
+  display: grid
+  grid-template-columns: var(--settings-label-width) minmax(0, 1fr)
+  column-gap: var(--settings-content-gap)
+  min-width: 0
+  > .settings-profile,
+  > .settings-kv,
+  > .settings-empty
+    grid-column: 1 / -1
+  > .settings-result
+    grid-column: 2
+
+.settings-profile
+  display: grid
+  grid-template-columns: var(--settings-label-width) minmax(0, 1fr)
+  column-gap: var(--settings-content-gap)
+
+.settings-profile__avatar
+  grid-column: 1
+  width: 96px
+  height: 96px
+  margin-bottom: 1.5rem
+  border-radius: 50%
+  corner-shape: round
+  overflow: hidden
+  display: grid
+  place-items: center
+  background: var(--block)
+  color: var(--text-p3)
+  img, span, svg
+    width: 100%
+    height: 100%
+  img
+    object-fit: cover
+
+.settings-profile__content
+  grid-column: 1 / -1
+  min-width: 0
+
+.settings-provider-note,
+.settings-empty
+  margin: 0
+  color: var(--text-p2)
+
+.settings-form
+  display: grid
+  gap: .875rem
+  label
+    display: grid
+    grid-template-columns: var(--settings-label-width) minmax(0, 1fr)
+    align-items: center
+    column-gap: var(--settings-content-gap)
+    min-width: 0
+    > span
+      color: var(--text-p2)
+      font-size: .875rem
+  > .settings-actions
+    margin-left: calc(var(--settings-label-width) + var(--settings-content-gap))
+  input
+    width: 100%
+    min-width: 0
+    box-sizing: border-box
+    padding: .625rem .75rem
+    border: 1px solid var(--block-border)
+    border-radius: .625rem
+    color: var(--text-p1)
+    background: var(--block)
+    outline: none
+    &:focus-visible
+      border-color: var(--theme)
+      box-shadow: 0 0 0 2px var(--theme-a20)
+
+.settings-actions
+  display: flex
+  flex-wrap: wrap
+  gap: .625rem
+
+.settings-button
+  padding: .5rem .875rem
+  border: 0
+  border-radius: .625rem
+  color: var(--text-p1)
+  background: var(--block)
+  cursor: pointer
+  transition: background .2s ease, color .2s ease, box-shadow .2s ease
+  &:hover
+    background: var(--block-border)
+  &:focus-visible
+    outline: 2px solid var(--theme)
+    outline-offset: 2px
+
+.settings-button--primary
+  color: var(--text-reverse)
+  background: var(--theme)
+  &:hover
+    background: var(--theme)
+    filter: brightness(1.08)
+
+.settings-button--danger
+  color: var(--theme)
+
+.settings-result
+  min-height: 1.5em
+  margin: .75rem 0 0
+  color: var(--text-p2)
+  &[data-state='success']
+    color: var(--theme)
+  &[data-state='failure']
+    color: $color-md-red
+
+.settings-kv
+  margin: 0
+
+.settings-kv__row
+  display: grid
+  grid-template-columns: var(--settings-label-width) minmax(0, 1fr)
+  column-gap: var(--settings-content-gap)
+  align-items: center
+  dt, dd
+    margin: 0
+    min-width: 0
+  dt
+    display: flex
+    align-items: center
+    color: var(--text-p3)
+  dd
+    display: flex
+    align-items: center
+    overflow-wrap: anywhere
+
+.settings-kv__value
+  min-width: 0
+
+.settings-kv__link,
+.settings-kv__action
+  flex: 0 0 auto
+  display: inline-grid
+  place-items: center
+  width: 2rem
+  height: 2rem
+  margin-left: 4px
+  border-radius: 50%
+  color: var(--text-p2)
+  background: transparent
+  &:hover
+    color: var(--theme)
+    background: var(--theme-a10)
+  &:focus-visible
+    color: var(--theme)
+    outline: 2px solid var(--theme)
+    outline-offset: 1px
+  .ui-icon,
+  svg
+    width: 1rem
+    height: 1rem
+
+.settings-kv__action
+  padding: 0
+  border: 0
+  cursor: pointer
+
+@media screen and (max-width: $device-mobile-max)
+  .settings-page
+    --settings-label-width: 5rem
+    --settings-content-gap: .75rem
+  .settings-section
+    padding: 1.25rem 0

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

@@ -26,7 +26,7 @@
 .article.banner
   .bg+.content
     min-height: 200px
-    aspect-ratio: hexo-config('article.banner_ratio')
+    aspect-ratio: hexo-config('article.banner.ratio')
     position: relative
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
@@ -69,7 +69,7 @@
     line-height: 1.2
     margin: 0.25rem 0
 
-.l_body .article.banner .content .bottom.only-title .title
+.site-shell .article.banner .content .bottom.only-title .title
   padding: 0.75rem 0
 
 

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

@@ -87,35 +87,3 @@
       img
         width 32px
         height: 32px
-
-.article-footer .social-wrap
-  grid-gap: 0.5rem 2rem
-  margin: 1rem 0 0.5rem
-  a.social
-    background: none
-    border-radius: 4px
-    padding: 0
-    img
-      display: block
-      height: 24px
-      width 24px
-
-.article-footer .qrcode
-  width: 128px
-  padding: 4px
-  background: white
-  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 all
-  height: 0
-  margin: 0 auto
-  transform: scale(0.01)
-  img
-    object-fit: contain
-
-.article-footer .qrcode.display
-  margin: 2rem auto 1rem
-  height: 128px !important
-  opacity: 1 !important
-  transform: scale(1)

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

@@ -0,0 +1,48 @@
+.article-share
+  padding: 1rem
+  >.body>.link
+    margin: 0
+    height: 0
+    opacity: 0
+    overflow: hidden
+  .social-wrap
+    gap: 1rem
+    justify-content: center
+    .social
+      background: none
+      color: var(--text-p2)
+      border-radius: 50%
+      corner-shape: round
+      width: 40px
+      height: 40px
+      padding: 0
+      overflow: visible
+      .share-item__icon
+        --ui-icon-size: 40px
+        box-sizing: border-box
+        padding: 8px
+        border-radius: 50%
+        corner-shape: round
+        background: transparent
+        trans1 background
+      &:hover, &:focus-visible, &:active
+        .share-item__icon
+          background: var(--block-border)
+  .qrcode
+    width: 128px
+    padding: 4px
+    background: white
+    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 all
+    height: 0
+    margin: 0 auto
+    transform: scale(0.01)
+    img
+      object-fit: contain
+  .qrcode.display
+    margin: 2rem auto 1rem
+    height: 128px !important
+    opacity: 1 !important
+    transform: scale(1)

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

@@ -4,7 +4,7 @@
   flex-wrap: wrap
   justify-content: center
   align-items: center
-  margin: 2rem 0 0
+  padding: 1rem
   column-gap: 1rem
   line-height: 1.6
   a.tag

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

@@ -1,4 +1,4 @@
-.l_cover
+.cover-content
   height: 100vh
   text-align: center
   display: flex
@@ -10,7 +10,7 @@
     height: inherit
 
 
-.l_cover .cover-wrap
+.cover-content .cover-wrap
   margin-bottom: 0
   display: flex
   flex-direction: column
@@ -31,7 +31,7 @@
     a.start
       display: inline-block
 
-.l_cover.post
+.cover-content.post
   .cover
     z-index: -1
     width: 100%
@@ -49,7 +49,7 @@
         border-radius: 2rem
 
 
-.l_cover.wiki .cover-wrap
+.cover-content.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -66,7 +66,7 @@
       font-size: 3rem
 
 
-.l_cover.wiki-hero
+.cover-content.wiki-hero
   min-height: 640px
   overflow: hidden
   isolation: isolate
@@ -101,9 +101,9 @@
         inset: 0
         pointer-events: none
         background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
-    &.galaxy
+    &.has-effect
       &:not(.image)
-        background: #000000
+        background: var(--hero-effect-background, #000000)
       canvas
         display: block
         position: absolute
@@ -197,7 +197,7 @@
     color: var(--text-banner, var(--text))
     // 主题色仅作为外发光轮廓，保留黑白标题的对比度。
     text-shadow: 0 0 16px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 30%, transparent)'), 0 0 32px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 20%, transparent)'), 0 0 64px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 10%, transparent)')
-    font-size: clamp(2.5rem, 3vw, 4.75rem)
+    font-size: clamp(2.5rem, 3vw, 4rem)
   .description
     margin: 0
     color: var(--text-banner-theme, var(--text-p2))
@@ -262,7 +262,7 @@
       gap: .5rem
       button
         padding: .5rem .75rem
-        border-radius: 8px
+        border-radius: $border-button
         color: inherit
         opacity 0.5
         font-family: inherit
@@ -290,7 +290,7 @@
       align-items: center
       gap: .5rem
       padding: .5rem .75rem .5rem .5rem
-      border-radius: 8px
+      border-radius: $border-button
       color: var(--text-banner, var(--text))
       font-family: inherit
       font-size: $fs-13
@@ -304,7 +304,7 @@
     justify-content: center
 
 @media screen and (max-width: $device-tablet)
-  .l_cover.wiki-hero
+  .cover-content.wiki-hero
     height: auto
     min-height: 100vh
     padding: 7rem 0 4rem
@@ -332,7 +332,7 @@
       max-width: 620px
 
 @media screen and (max-width: $device-mobile)
-  .l_cover.wiki-hero
+  .cover-content.wiki-hero
     .wiki-cover-layout
       width: calc(100% - 2rem)
     .wiki-navbar
@@ -345,5 +345,5 @@
         padding: .25rem .75rem .25rem .5rem
 
 @media (prefers-reduced-motion: reduce)
-  .l_cover.wiki-hero .wiki-cover-background.galaxy canvas
+  .cover-content.wiki-hero .wiki-cover-background.has-effect.respect-reduced-motion canvas
     display: none