hexo-theme-stellar 1.42.0 → 1.43.0

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

@@ -19,24 +19,25 @@
       z-index: -1
       border-radius: 4px
       background: var(--theme)
-  a.post
-    display: inline-flex
-    align-items: baseline
-    margin: 0.25rem 0
-    color: var(--text-p1)
-    trans2 color border
-    border-bottom: 1px dashed var(--text-meta)
+
+.post-list .archive-list a.post
+  display: inline-flex
+  align-items: baseline
+  margin: 0.25rem 0
+  color: var(--text-p1)
+  trans2 color border
+  border-bottom: 1px dashed var(--text-meta)
+  time
+    font-family: $ff-code
+    margin-right: 1em
+    font-weight: 700
+    flex-shrink: 0
+    color: var(--text-p4)
+  &:hover
+    border-bottom: 1px solid var(--theme)
+    color: var(--text)
     time
-      font-family: $ff-code
-      margin-right: 1em
-      font-weight: 700
-      flex-shrink: 0
-      color: var(--text-p4)
-    &:hover
-      border-bottom: 1px solid var(--theme)
-      color: var(--text)
-      time
-        color: var(--theme)
+      color: var(--theme)
 
 
 
@@ -52,7 +53,7 @@
     align-items: center
     justify-content: space-between
     font-weight: 500
-    font-size: $fsp2
+    font-size: $fs-content-2
     span
       display: flex
       align-items: center

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

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

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

@@ -1,5 +1,9 @@
 .l_body[type=story] .md-text.content
-  --fsp: 'calc(%s + 1px)' % $fs-body
+  --fs-content-base: 'calc(%s + 2px)' % var(--fs-root)
+  --fs-content: var(--fs-content-base)
+  --fsh2: 'calc(%s + 11px)' % var(--fs-content)
+  --fsh3: 'calc(%s + 7px)' % var(--fs-content)
+  --fsh4: 'calc(%s + 4px)' % var(--fs-content)
   --gap-p: 2rem
   >div.tag-plugin,>p>img
     margin-top: 2.4rem
@@ -67,7 +71,7 @@
       background: x-theme-alpha(1)
 
   ol,ul
-    margin-left: 'calc(%s * 2)' % var(--fsp)
+    margin-left: 'calc(%s * 2)' % var(--fs-content)
   h1,h2,h3,h4,h5,h6
     text-align: center
     margin: 2em 0 1.5em
@@ -88,7 +92,7 @@
 
 .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
   text-align: center
-  --inset: calc(var(--fsp) * 2)
+  --inset: calc(var(--fs-content) * 2)
   margin-left: var(--inset)
   margin-right: var(--inset)
   background: var(--block)
@@ -112,7 +116,7 @@
     svg-mask-icon(var(--icon-quote-right))
   p:not([class])
     color: var(--text-p2)
-    font-size: $fs-body
+    font-size: var(--fs-content)
     text-indent: 2em
   &:hover
     &:before,&:after
@@ -124,6 +128,6 @@
 
 
 .l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
-  text-indent: 'calc(%s * 2)' % var(--fsp)
+  text-indent: 'calc(%s * 2)' % var(--fs-content)
   a
     text-indent: 0

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

@@ -0,0 +1,68 @@
+.collection-preview
+  padding: 2rem 1rem
+  >h1, >p
+    max-width: 720px
+    margin-left: auto
+    margin-right: auto
+
+.collection-preview__grid
+  display: grid
+  grid-template-columns: repeat(2, minmax(0, 1fr))
+  gap: var(--gap-page)
+  align-items: start
+  margin-top: 2rem
+  @media screen and (max-width: $device-tablet)
+    grid-template-columns: minmax(0, 1fr)
+
+.collection-preview__theme
+  max-width: 720px
+  margin: 1rem auto 0
+  display: flex
+  align-items: center
+  justify-content: flex-end
+  gap: 8px
+  color: var(--text-p3)
+  font-size: $fs-12
+  button
+    border: 0
+    border-radius: $border-button
+    padding: 4px 8px
+    color: var(--text-p2)
+    background: var(--block)
+    cursor: pointer
+    &:focus-visible
+      outline: 2px solid var(--theme)
+      outline-offset: 2px
+
+.collection-preview__surface
+  box-sizing: border-box
+  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']
+    max-width: 320px
+  &[data-preview-width='720']
+    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
+    gap: 8px
+    color: var(--text-p1)
+    padding: 0 var(--gap-base) var(--gap-base)
+    code
+      color: var(--text-p3)
+      background: none
+      padding: 0
+  .widget-wrapper
+    margin-top: 0
+  .widget-wrapper+.widget-wrapper
+    margin-top: 24px

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

@@ -33,16 +33,18 @@
     margin-right: 2px
     opacity: .4
 
-.widget-body.tag-tree .tag-subtree > a > .tag-switcher-wrapper
+.tag-tree .tag-subtree > .tag-tree__link > .tag-switcher-wrapper
   width: 1.75rem
   height: 0.875rem
+  flex-shrink: 0
+  margin-left: auto
   display: flex
   justify-content: end
   align-items: center
   &:hover
     color: var(--theme)
 
-.widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
+.tag-tree .tag-subtree.is-parent > .tag-tree__link .tag-switcher
   display: inline-block
   height: 0.5rem
   width: 0.5rem
@@ -50,16 +52,16 @@
   border-style: none solid solid none
   transform: translateX(-25%) rotate(-45deg)
 
-.widget-body.tag-tree .tag-subtree.parent-tag.expanded > a .tag-switcher
+.tag-tree .tag-subtree.is-parent.is-expanded > .tag-tree__link .tag-switcher
   transform: translateY(-25%) rotate(45deg)
 
-.widget-body.tag-tree .tag-subtree.parent-tag > .tag-subtree
+.tag-tree .tag-subtree.is-parent > .tag-subtree
   display: none
 
-.widget-body.tag-tree .tag-subtree.parent-tag.expanded > .tag-subtree
+.tag-tree .tag-subtree.is-parent.is-expanded > .tag-subtree
   display: block
 
-.widget-body.tag-tree .tag-subtree .tagcon
-  font-size: smaller
-  opacity: 0.4
-  margin-right: 0.25rem
+.tag-tree .tag-subtree
+  min-width: 0
+  >.ui-collection__item
+    width: 100%

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

@@ -13,7 +13,7 @@
     font-weight: 500
     font-size: $fsh5
   .body
-    --fsp: $fsp2
+    --fs-content: $fs-content-2
     >.link
       margin: 0
       height: 0
@@ -28,13 +28,13 @@
       overflow: hidden
       padding-left: 1rem
       li
-        font-size: var(--fsp)
+        font-size: var(--fs-content)
     .post-title
       margin: 0
       line-height: 1.2
       word-break: break-all
       p
-        --fsp: $fsp2
+        --fs-content: $fs-content-2
   section+section
     margin-top: 1rem
     padding-top: 1rem
@@ -91,11 +91,14 @@
 .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
+    img
+      display: block
+      height: 24px
+      width 24px
 
 .article-footer .qrcode
   width: 128px

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

@@ -16,7 +16,7 @@
   flex-direction: column
   justify-content: center
   align-items: center
-  font-size: var(--fsp)
+  font-size: var(--fs-content)
   .cover-title
     font-weight: 700
     font-size: 1.5rem
@@ -64,3 +64,282 @@
   .cover-title
     &:first-child
       font-size: 3rem
+
+
+.l_cover.wiki-hero
+  min-height: 640px
+  overflow: hidden
+  isolation: isolate
+  color: var(--text)
+  text-align: left
+  .wiki-cover-background
+    position: absolute
+    z-index: -1
+    inset: 0
+    overflow: hidden
+    background: var(--background)
+    &.image
+      .wiki-cover-background-image,
+      .wiki-cover-background-blur
+        position: absolute
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+      .wiki-cover-background-image
+        z-index: 0
+      .wiki-cover-background-blur
+        z-index: 1
+        filter: blur(18px)
+        // 以透明度遮罩渐入模糊层；clip-path 会在 80% 处硬切，丢失过渡。
+        mask: linear-gradient(to top, black 0%, rgba(black, .75) 10%, transparent 20%)
+        -webkit-mask: linear-gradient(to top, black 0%, rgba(black, .75) 10%, transparent 20%)
+        transform: scale(1.03)
+      .wiki-cover-background-overlay
+        position: absolute
+        z-index: 2
+        inset: 0
+        pointer-events: none
+        background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
+    &.galaxy
+      background: #000000
+      canvas
+        display: block
+        width: 100%
+        height: 100%
+        pointer-events: none
+  .wiki-navbar
+    position: absolute
+    top: 2rem
+    left: 0
+    right: 0
+  .wiki-cover-layout
+    width: calc(100% - 4rem)
+    max-width: 1120px
+    height: 100%
+    margin: 0 auto
+    position: relative
+    color: var(--text-banner, var(--text))
+  // 未配置背景时没有 data-text-adaptive，不会运行自适应取色。
+  .wiki-cover-layout:not([data-text-adaptive])
+    --text-banner-theme: var(--text-p2)
+    .wiki-cover-release,
+    .wiki-cover-actions a.button
+      border-color: var(--block-border)
+  .wiki-navbar-home
+    display: inline-flex
+    align-items: center
+    min-height: 1.5rem
+    padding: 0
+    border: 0
+    color: var(--text-banner, var(--text))
+    font-size: 1rem
+    font-weight: 700
+    line-height: 1.5rem
+    text-decoration: none
+    background: transparent
+    box-shadow: none
+    &:hover
+      color: var(--text-banner, var(--text))
+      background: transparent
+      opacity: .8
+  .wiki-cover-content
+    width: 100%
+    max-width: none
+    height: 100%
+    margin: 0
+    display: grid
+    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr)
+    gap: clamp(3rem, 8vw, 8rem)
+    align-items: center
+  .wiki-cover-intro
+    max-width: 560px
+    display: flex
+    flex-direction: column
+    align-items: stretch
+    gap: 2rem
+  .wiki-cover-release
+    display: inline-flex
+    align-items: center
+    min-height: 1.75rem
+    align-self: flex-start
+    box-sizing: border-box
+    padding: .25rem .75rem
+    margin: 0
+    border: 1px solid unquote('color-mix(in srgb, var(--text-banner-theme, white) 50%, transparent)')
+    border-radius: 100px
+    color: inherit
+    font-size: $fs-12
+    font-weight: 700
+    line-height: 1.2
+    text-decoration: none
+    transition: opacity .25s ease
+    .wiki-cover-release-value
+      display: none
+    &.is-loading
+      // 请求期间仅保留标签高度，避免标题在数据返回时跳动。
+      opacity: 0
+      pointer-events: none
+    &.loaded
+      opacity: 1
+      .wiki-cover-release-value
+        display: inline
+      &:hover
+        color: inherit
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+  .cover-title
+    margin: 0
+    // 标题自身以 contrast 模式计算，始终在黑白之间切换，不继承容器主题色。
+    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)
+  .description
+    margin: 0
+    color: var(--text-banner-theme, var(--text-p2))
+    line-height: 1.75
+    text-shadow: 0 0 8px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 50%, transparent)'), 0 0 16px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 10%, transparent)')
+  .wiki-cover-actions
+    display: flex
+    flex-wrap: wrap
+    gap: 1rem
+    a.button
+      display: inline-flex
+      align-items: center
+      gap: .5rem
+      padding: .5rem 1.25rem .5rem 1rem
+      border-radius: 100px
+      border: 1px solid unquote('color-mix(in srgb, var(--text-banner-theme, white) 50%, transparent)')
+      color: inherit
+      background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+      backdrop-filter: blur(12px)
+      trans1 background
+      svg
+        width: 1.5rem
+        height: 1.5rem
+      &:hover
+        color: inherit
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
+      &.wiki-cover-source
+        border-color: var(--text-banner, var(--text))
+        color: var(--text-banner, var(--text))
+        background: var(--text-banner, var(--text))
+        svg, span
+          filter: invert(1)
+        &:hover
+          color: var(--text-banner, var(--text))
+          background: var(--text-banner, var(--text))
+  .wiki-cover-preview
+    width: 100%
+    border-radius: 1.25rem
+    overflow: hidden
+    box-shadow: 0 24px 60px rgba(0,0,0,.18)
+    > img
+      display: block
+      width: 100%
+      max-height: 62vh
+      object-fit: contain
+      background: var(--card)
+  .wiki-cover-terminal
+    position: relative
+    min-height: 150px
+    padding: 1rem
+    color: var(--text-banner-theme)
+    background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+    backdrop-filter: blur(12px) brightness(0.8)
+    font-family: $ff-code
+    .wiki-cover-terminal-toolbar
+      display: flex
+      align-items: center
+      justify-content: space-between
+      margin-bottom: 1.4rem
+    .wiki-cover-terminal-tabs
+      display: flex
+      gap: .5rem
+      button
+        padding: .5rem .75rem
+        border-radius: 8px
+        color: inherit
+        opacity 0.5
+        font-family: inherit
+        font-size: $fs-13
+        line-height: 1
+        font-weight: 500
+        &.active
+          opacity 1
+          background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+    pre
+      margin: 0
+      padding: 0
+      overflow-x: auto
+      color: inherit
+      background: transparent
+      font: 1rem
+      line-height: 1.8
+      code span
+        display: block
+      code span:before
+        content: '$ '
+        color: #8ca5ff
+    .wiki-cover-copy
+      display: inline-flex
+      align-items: center
+      gap: .5rem
+      padding: .5rem .75rem .5rem .5rem
+      border-radius: 8px
+      color: var(--text-banner, var(--text))
+      font-family: inherit
+      font-size: $fs-13
+      line-height: 1
+      background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+      trans1 background
+      &:hover
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
+  &.without-preview .wiki-cover-content
+    grid-template-columns: minmax(0, 560px)
+    justify-content: center
+
+@media screen and (max-width: $device-tablet)
+  .l_cover.wiki-hero
+    height: auto
+    min-height: 100vh
+    padding: 7rem 0 4rem
+    .wiki-cover-layout
+      width: calc(100% - 3rem)
+      max-width: 620px
+      height: auto
+      display: grid
+      grid-template-rows: auto 1fr
+      position: static
+    .wiki-navbar
+      position: absolute
+      top: 1.5rem
+      left: 1.5rem
+      right: 1.5rem
+      padding-top: 0
+    .wiki-cover-content
+      height: auto
+      margin-bottom: 5rem
+      grid-template-columns: 1fr
+      gap: 5rem
+    .wiki-cover-intro
+      max-width: none
+    .wiki-cover-preview
+      max-width: 620px
+
+@media screen and (max-width: $device-mobile)
+  .l_cover.wiki-hero
+    .wiki-cover-layout
+      width: calc(100% - 2rem)
+    .wiki-navbar
+      left: 1rem
+      right: 1rem
+    .cover-title
+      font-size: 2rem
+    .wiki-cover-actions
+      a.button
+        padding: .25rem .75rem .25rem .5rem
+
+@media (prefers-reduced-motion: reduce)
+  .l_cover.wiki-hero .wiki-cover-background.galaxy canvas
+    display: none

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

@@ -31,8 +31,8 @@ article.md-text.content+.related-wrap
     .title
       color: var(--text-p1)
       font-weight: 500
-      --fsp: $fsp1
-      font-size: var(--fsp)
+      --fs-content: $fs-content-1
+      font-size: var(--fs-content)
       trans2 color border
       position: relative
       padding-bottom: 2px
@@ -40,8 +40,8 @@ article.md-text.content+.related-wrap
       line-height: 1.6
     .excerpt
       color: var(--text-p3)
-      --fsp: $fsp3
-      font-size: var(--fsp)
+      --fs-content: $fs-content-3
+      font-size: var(--fs-content)
       margin-top: 0.5rem
       display: -webkit-box
       -webkit-box-orient: vertical
@@ -99,9 +99,13 @@ article.md-text.content+.related-wrap
   .cmt-body
     min-height: 150px
     position: relative
-    svg.loading
+    .lazy-icon
+      position: absolute
       top: 60px
+      left: 50%
+      transform: translateX(-50%)
+      z-index: -1
     iframe
       border-radius: 4px
       border: none
-      width: 100%
+      width: 100%

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

@@ -2,22 +2,75 @@
   margin: 0.5rem var(--gap-base) 1rem
 
 .social-wrap
-  display: grid
-  grid-gap: 0.25rem 0.25rem
-  grid-template-columns: repeat(auto-fill, 32px)
+  display: flex
+  flex-wrap: wrap
+  gap: 0.5rem
+  align-items: center
   text-align: center
   .social
     line-height: 0
-    display: inline-block
-    padding: 6px
-    border-radius: 32px
+    display: inline-flex
+    align-items: center
+    box-sizing: border-box
+    flex: 0 0 auto
+    height: 32px
+    padding: 4px
+    border-radius: 8px
     filter: grayscale(100%)
     overflow: hidden
-    background: transparent
-    trans3: box-shadow background transform
-    &:hover
-      z-index: 1
-      filter: unset
-      background: var(--bg-a100)
+    background: var(--ui-item-bg)
+    box-shadow: none
     img
+      flex: initial
+      width: auto
+      height: auto
       border-radius: 2px
+    svg
+      flex: initial
+      height: 24px
+      width: 24px
+
+  .social-spacer
+    flex: 1 1 0
+    min-width: 0
+    height: 32px
+    pointer-events: none
+
+  .social-dropdown
+    position: relative
+    box-sizing: border-box
+    flex: 0 0 auto
+    height: 32px
+    line-height: 0
+    >.dropdown-trigger.social
+      >img, >svg
+        opacity: .5
+    // JS 未加载时保留向上展开的原生 details 兜底；正常情况下菜单会移入全局浮层。
+    >.dropdown-menu
+      top: auto
+      bottom: calc(100% + 0.5rem)
+    &:first-child:not(:last-child) >.dropdown-menu, &:only-child >.dropdown-menu
+      left: 0
+      transform: none
+    &:last-child:not(:first-child) >.dropdown-menu
+      right: 0
+      left: auto
+      transform: none
+
+  .social:hover
+    background: var(--ui-item-bg-hover)
+    box-shadow: var(--ui-item-shadow-hover)
+
+  .social-dropdown[open] > .dropdown-trigger.social
+    background: var(--ui-item-bg-active)
+    box-shadow: var(--ui-item-shadow-active)
+
+  .social:hover, .social-dropdown[open] > .dropdown-trigger.social
+    z-index: 1
+    filter: unset
+    >img, >svg
+      opacity: 1
+    svg [fill="currentColor"]
+      fill: var(--item-grad)
+    svg [stroke="currentColor"]
+      stroke: var(--item-grad)

package/source/css/_components/sidebar/nav-area.styl

@@ -1,2 +1,7 @@
 .nav-area
-  margin: 2rem 0
+  margin: 2rem 0
+  .menu
+    width: 100%
+    margin: 0
+    .ui-collection__title
+      font-size: $fs-15