hexo-theme-stellar 1.41.0 → 1.42.0

package/source/css/_components/layout.styl

@@ -1,9 +1,7 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
-  grid-gap: calc(var(--gap-margin) * 4)
-  @media screen and (max-width: $device-desktop)
-    grid-gap: calc(var(--gap-margin) * 2)
+  grid-gap: calc(var(--gap-page) * 1)
   margin: auto
   font-size: var(--fsp)
 
@@ -13,36 +11,34 @@
   position: sticky
   position: -webkit-sticky
   // 侧边栏容器宽度
-  --width-sidebar: calc(var(--gap-margin) * 2 + var(--gap-padding) * 2 + var(--side-content-width))
+  --width-sidebar: calc(var(--gap-base) * 4 + var(--side-content-width))
   width: var(--width-sidebar)
 
 .l_body .l_left
   justify-self: right
-  top: var(--gap-margin)
+  top: var(--gap-page)
 .l_body .l_right
   justify-self: left
-  max-height: calc(100% - var(--gap-margin) * 2)
+  width: calc(var(--width-sidebar) + var(--rightbar-width-extra))
+  max-height: calc(100% - var(--gap-page) * 2)
   .widgets
     height: 100%
     overflow visible
 
 // 平板布局
 @media screen and (max-width: $device-laptop)
-  .l_body .l_right
-    --gap-margin: 16px
   .laptop-only
     display: block !important
   .l_body
-    grid-gap: calc(var(--gap-margin) * 1)
     .l_right
       position: fixed
-      transform: translateX(320px)
+      transform: translateX(calc(100% + var(--inset) * 2))
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px
       right: var(--inset)
-      top: var(--gap-margin)
-      max-height: calc(100vh - var(--gap-margin) * 2)
+      top: var(--gap-page)
+      max-height: calc(100vh - var(--gap-page) * 2)
       box-shadow: $boxshadow-card-float
       z-index: 10
       background: var(--background)
@@ -66,7 +62,7 @@
     display: block
     .l_left
       position: fixed
-      transform: translateX(-320px)
+      transform: translateX(calc(-100% - var(--inset) * 2))
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px

package/source/css/_components/list.styl

@@ -51,14 +51,27 @@
   display: block
   border-radius: $border-card-l
   background: var(--card)
+  // hero 封面卡片：封面图同时作为卡片自身背景承载，角落跟随全局 corner-shape 圆角裁剪；
+  // 子图保留用于 hover 变暗/放大滤镜，角落楔形区由容器背景（同图）无缝补位
+  background-image: var(--cover-url)
+  background-size: cover
+  background-position: center
   overflow: hidden
   z-index: 0
   position: relative
+  // Safari 26.4/26.5 合成层裁剪 bug（WebKit 312584/319993）：带 filter:blur() 的合成层
+  // （.cover:before 同图模糊层）不执行父级 overflow:hidden + border-radius 圆角裁剪，静止时底部两角漏方角；
+  // 用与圆角同源的 clip-path 直接裁剪（hover 时模糊层带 transform 反而正常，见 .cover:before 的 translateZ(0)）。
+  // clip-path 会把角落硬裁为普通圆角，覆盖 corner-shape；因此在支持 corner-shape 的浏览器中移除，
+  // 仅在不支持的浏览器（Safari/Firefox）保留圆角兜底
+  @supports not (corner-shape: superellipse(1))
+    clip-path: 'inset(0 round %s)' % $border-card-l
   --img-br: 100%
   --img-sat: 100%
   --blur-px: 1em
   --blur-height: 128px
   --blur-sat: 120%
+  --cover-zoom: 1.05
   &:hover
     --img-br: 75%
     --img-sat: 120%
@@ -67,7 +80,7 @@
     --blur-sat: 200%
     // 图片卡片 hover 封面放大：卡片本身不动，放大后的图片由圆角静态裁剪裁出圆角
     .post-cover img, .cover img, .cover:before
-      transform: scale(1.05)
+      transform: scale(var(--cover-zoom))
   img
     filter: brightness(var(--img-br)) saturate(var(--img-sat))
     // 封面放大用 1.5s 缓动，其余属性（亮度/饱和度）保持主题默认 0.2s
@@ -111,6 +124,11 @@
     flex-wrap: wrap
     align-items: center
     gap: 0 .5rem
+    svg
+      width: 1em
+      height: 1em
+      margin-right: .25em
+      opacity: .4
 
 
 // common article
@@ -140,71 +158,60 @@
     border-radius: 0
     aspect-ratio: hexo-config('article.cover_ratio')
     
-.post-list .post-card.post.photo
-  .cover
-    position: relative
-    line-height: 0
-    img
-      width: 100%
-      object-fit: cover
-      aspect-ratio: hexo-config('article.cover_ratio') 
-      z-index 0
-    &:before
-      content: ''
-      z-index 1
-      position: absolute
-      top: 0
-      left: 0
-      width: 100%
-      height: 100%
-      // Chromium: corner-shape + overflow:hidden 的合成层裁剪与 backdrop-filter 不兼容，
-      // 渐变模糊改用同图模糊层（filter + mask）实现，观感与 backdrop-filter 等价
-      background-image: var(--cover-url)
-      background-size: cover
-      background-position: center
-      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
-      // 与封面 img 同步：缩放 0.5s 缓动，亮度/饱和度仍按 0.2s
-      transition: all .2s ease-out, transform .5s ease-out
-      -moz-transition: all .2s ease-out, transform .5s ease-out
-      -webkit-transition: all .2s ease-out, transform .5s ease-out
-      -o-transition: all .2s ease-out, transform .5s ease-out
-      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-    &[position=bottom]:before
-      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-    .cover-info
-      padding: 1rem
-      position: absolute
-      line-height: 1.2
-      width: 'calc(100% - %s * 2)' % 1rem
-      --text-banner: white
-      color: var(--text-banner)
-      z-index: 2
-      &[position=top]
-        top: 0
-        background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))
-      &[position=bottom]
-        bottom: 0
-        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
-      div+div
-        margin-top: 4px
-      .text
-        color: unset
-        trans1 all
-        text-shadow: 0 2px 4px rgba(0,0,0,0.2)
-      .topic
-        font-size: $fs-13
+// 封面渐变模糊卡片：文章 photo 卡片与专栏最新文章卡片共用（接入 cover-overlay 统一覆盖层）
+.post-list .post-card .cover
+  position: relative
+  line-height: 0
+  img
+    width: 100%
+    object-fit: cover
+    z-index 0
+  // 与通用覆盖层能力统一：文字区固定底部（hero 卡片），渐变模糊层 + 黑色蒙版（视觉参数不变）
+  cover-overlay(var(--cover-url), bottom)
+  .cover-info
+    padding: 1rem
+    position: absolute
+    line-height: 1.2
+    width: 'calc(100% - %s * 2)' % 1rem
+    --text-banner: white
+    color: var(--text-banner)
+    z-index: 2
+    bottom: 0
+    div+div
+      margin-top: 4px
+    .text
+      color: unset
+      trans1 all
+      text-shadow: 0 2px 4px rgba(0,0,0,0.2)
+    .topic
+      font-size: $fs-13
+      // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
+      color: var(--text-banner-theme, inherit)
+    .headline
+      font-weight: 500
+      font-size: $fsh3
+    .caption
+      font-size: $fs-14
+      // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
+      color: var(--text-banner-theme, inherit)
+      // 只显示一行，超出省略
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+    @media screen and (max-width: $device-mobile)
       .headline
-        font-weight: 500
-        font-size: $fsh3
+        font-size: $fsh4
       .caption
-        font-size: $fs-14
-      @media screen and (max-width: $device-mobile)
-        .headline
-          font-size: $fsh4
-        .caption
-          font-size: $fs-13
+        font-size: $fs-13
+
+.post-list .post-card.post.photo
+  .cover img
+    aspect-ratio: hexo-config('article.cover_ratio')
+  // hover 放大覆盖：基规则的 `transform: translateZ(0)` 特异性高于上方 `.post-card:hover` 的 scale，
+  // 需用更高特异性选择器在基规则之后覆盖，保持 hover 缩放动画（叠加恒等变换）
+  &:hover
+    .cover:before
+      transform: translateZ(0) scale(var(--cover-zoom))
   h2
     margin: .25rem 0
     font-size: $fsh4
@@ -249,6 +256,70 @@
   .cap+.cap
     margin-left: 4px
 
+
+// topic 专栏列表：平铺容器 + 上下布局（h2 专栏标题 → 最新文章卡片 → 文章链接列表）
+.post-list.topic
+  .post-card-wrap
+    margin: 0
+    box-shadow: none
+    border-radius: 0
+    & + .post-card-wrap
+      border-top: 1px solid var(--block-border)
+  .post-card
+    background: none
+    box-shadow: none
+    border-radius: 0
+    overflow: visible
+    clip-path: none
+    .md-text
+      padding: 2.25rem 0
+      @media screen and (max-width: $device-mobile)
+        padding: 1.5rem 0
+  .post-card.topic article
+    display: flex
+    flex-direction: column
+    gap: 1rem
+    .topic-title
+      story-title()
+      margin: 0 0 0.5rem
+    .topic-desc
+      text-align: center
+      color: var(--text-p2)
+      font-size: $fs-14
+      line-height: 1.5
+      // 左右内边距与文章列表（.post-panel padding: 0 1rem）一致
+      padding: 0 1rem
+      margin: 0 0 1rem
+    .cover
+      flex: none
+      width: 100%
+      aspect-ratio: 2 / 1
+      border-radius: $border-card-l
+      overflow: hidden
+      // 背景图由 .cover 自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
+      background-image: var(--cover-url)
+      background-size: cover
+      background-position: center
+      // 与 .post-card 相同的 Safari 圆角裁剪兜底（模糊层合成层不跟随 overflow:hidden）；
+      // 支持 corner-shape 的浏览器移除 clip-path，由自身背景跟随曲率
+      @supports not (corner-shape: superellipse(1))
+        clip-path: 'inset(0 round %s)' % $border-card-l
+      display: block
+      img
+        width: 100%
+        height: 100%
+    .post-panel
+      flex: none
+      width: 100%
+      // 左右内边距与文章封面文字区（.cover-info padding: 1rem）一致
+      padding: 0 1rem
+      .posts
+        margin: 0
+  // hover 放大覆盖（与 photo 卡片一致，见 .post-card.post.photo:hover 注释）
+  .post-card.topic:hover
+    .cover:before
+      transform: translateZ(0) scale(var(--cover-zoom))
+
 .post-list.archives
   @media screen and (max-width: $device-mobile)
     margin: 1rem 0

package/source/css/_components/main.styl

@@ -1,8 +1,8 @@
 .l_main
   position: relative
-  padding-bottom: var(--gap-max)
+  padding-bottom: var(--gap-page)
   @media screen and (min-width: $device-mobile-max)
-    padding-top: var(--gap-margin)
+    padding-top: var(--gap-page)
   header
     margin: 2rem 1rem 1rem
     .logo-wrap

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

@@ -81,9 +81,12 @@
   display: flex
   flex-wrap: wrap
   padding: 0
-  margin: 0 -0.5rem
+  margin: 0
+  column-gap: 1rem
   a.tag
     tag-chip()
+    margin-left: 0
+    margin-right: 0
 
 @media screen and (min-width: $device-mobile)
   .post-list.author #archive

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

@@ -25,16 +25,7 @@
       &:after
         font-size: 0.25em
   h2:not([class])
-    &:before,&:after
-      content: ''
-      display: inline-block
-      width: 12px
-      height: 1.2em
-      background: $c-accent
-      transform: skewX(-20deg)
-      margin: 0 0.5em
-      vertical-align: top
-      position: relative
+    story-title()
 
   h3:not([class])
     position: relative

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

@@ -4,23 +4,67 @@
 .article.banner
   --text-banner: var(--text)
   background: var(--block)
+  // 背景图同时作为横幅自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
+  background-image: var(--bg-url)
+  background-size: cover
+  background-position: center
   margin: 0
   height: unset
+  // Safari 26.4/26.5 合成层裁剪 bug（WebKit 312584/319993，STP 242/249 才修）：
+  // 带 filter:blur() 的合成子层（同图模糊层 :before/:after）不执行父级 overflow:hidden + border-radius 圆角裁剪；
+  // 子层自身 border-radius/overflow 无效（319993 复现注释），父层 clip-path 实测仍被绕过。
+  // 官方建议（WebKit 67950）：让圆角父层自身成为层叠上下文并强制合成，使圆角裁剪在合成层层面作用于全部子层。
+  // 对照：正常工作的 cover 卡片 .post-card 自带 z-index:0 + position:relative（层叠上下文）。
+  // clip-path 保留作为正常浏览器裁剪与额外防御；移动端圆角归零时随 `.banner.top` 一并关闭（见 tag-plugins/banner.styl）
+  isolation: isolate
+  transform: translateZ(0)
+  // clip-path 会把角落硬裁为普通圆角，覆盖 corner-shape；支持 corner-shape 的浏览器移除，
+  // 仅在不支持的浏览器（Safari/Firefox）保留圆角兜底
+  @supports not (corner-shape: superellipse(1))
+    clip-path: 'inset(0 round %s)' % $border-card-l
 
 .article.banner
   .bg+.content
     min-height: 200px
     aspect-ratio: hexo-config('article.banner_ratio')
+    position: relative
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
 
 .article.banner .content
   .top
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
     align-items: flex-start
     margin: 1rem calc(1rem - 4px)
+  .top-row
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    width: 100%
+    .right
+      display: flex
+      align-items: center
+      flex-shrink: 0
+      white-space: nowrap
+      .reading
+        opacity: .8
+        padding: 4px
+  .meta-row
+    width: 100%
+  .bottom
+    margin-top: auto
   .title
     font-size: $fsh1
     color: var(--text-banner)
+  .subtitle
+    // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
+    color: var(--text-banner-theme, var(--text-banner))
+  .reading
+    color: var(--text-banner-theme, var(--text-banner))
+  .meta-row
+    color: var(--text-banner-theme, var(--text-banner))
   h1
     line-height: 1.2
     margin: 0.25rem 0
@@ -30,48 +74,28 @@
 
 
 
-// 动画配置
+// 背景图覆盖层：与文章列表封面统一（常驻同图渐变模糊层 + 黑色蒙版，hover 放大/变暗）
 .article.banner
+  cover-overlay(var(--bg-url), both, '.bg+.content')
+  .bg
+    // hover 放大用 1.5s 缓动，亮度/饱和度仍按 0.2s（与文章列表封面一致）
+    filter: brightness(var(--img-br)) saturate(var(--img-sat))
+    transition: all .2s ease-out, transform 1.5s ease-out
+    -moz-transition: all .2s ease-out, transform 1.5s ease-out
+    -webkit-transition: all .2s ease-out, transform 1.5s ease-out
+    -o-transition: all .2s ease-out, transform 1.5s ease-out
+  &:hover .bg
+    transform: scale(var(--cover-zoom))
   .bg+.content
-    --blur-bg: rgba(black, 0)
-    --blur-px: 1em
-    --blur-sat: 100%
+    // 大尺寸 banner 的模糊层高度按原观感覆盖（默认值见 cover-overlay）
     --blur-height-top: 6rem
     --blur-height-bottom: 7rem
-    --blur-opacity: 0
-    &:hover
-      --blur-bg: rgba(black, 0.1)
-      --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
-      top: 0
-      left: 0
-      width: 100%
-      height: 100%
-      // Chromium: corner-shape + overflow:hidden 的合成层裁剪与 backdrop-filter 不兼容，
-      // 渐变模糊改用同图模糊层（filter + mask）实现，观感与 backdrop-filter 等价
-      background-image: var(--bg-url)
-      background-size: cover
-      background-position: center
-      filter: blur(var(--blur-px)) saturate(var(--blur-sat))
-      trans1 all
-      opacity var(--blur-opacity)
-      pointer-events: none
-    &:before
-      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
-      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
-    &:after
-      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
-      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
+    &:before, &:after
+      // 模糊层自身也加 clip-path：该合成层是 Safari 跳过父级圆角裁剪的直接漏出源
+      @supports not (corner-shape: superellipse(1))
+        clip-path: 'inset(0 round %s)' % $border-card-l
     .top,.bottom
-      z-index 1
+      z-index: 1
   
 
 .article.banner

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

@@ -4,7 +4,10 @@
   flex-wrap: wrap
   justify-content: center
   align-items: center
-  margin: 2rem -0.5rem 0
+  margin: 2rem 0 0
+  column-gap: 1rem
   line-height: 1.6
   a.tag
     tag-chip()
+    margin-left: 0
+    margin-right: 0

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

@@ -1,31 +1,24 @@
 // 面包屑导航
 .bread-nav
   font-weight: 500
-  display: flex
-  justify-content: space-between
-  color: var(--text-banner)
+  color: var(--text-banner-theme, var(--text-banner))
   .left
     flex: 1
     min-width: 0
+    display: flex
+    align-items: baseline
   .flex-row
     display: flex
     align-items: baseline
     flex-direction: row
-  #breadcrumb
-    .reading.right
-      margin-left: auto
-      white-space: nowrap
-      opacity: .8
-    .ai-label.right
-      margin-left: auto
   a
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
     padding: 4px
     border-radius: 2px
     &:hover
       background: var(--button-hover-bg)
   span 
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
   span.sep
     opacity 0.5
     margin: 0
@@ -63,12 +56,12 @@
   a  
     display: flex
     align-items: center
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
     svg
       margin-right: 4px
     &.bold 
       font-weight: 600
-      color: var(--text-banner)
+      color: var(--text-banner-theme, var(--text-banner))
     span 
       margin-left: 4px
     &:hover

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

@@ -1,6 +1,6 @@
 .navbar
   z-index: 8
-  top: var(--gap-margin)
+  top: var(--gap-page)
   position: sticky
   position: -webkit-sticky
 

package/source/css/_components/partial/post-panel.styl

@@ -0,0 +1,76 @@
+// 描述 + 文章链接列表公共组件（友链文章订阅 friends_and_posts、专栏卡片 topic_card 共用）
+.post-panel
+  display: flex
+  justify-content: space-between
+  flex-direction: column
+  height: 100%
+  position: relative
+  // 与友链卡片一致的行高（友链上下文由 .user-post-card 提供，专栏上下文在 md-text 下需自行声明）
+  line-height: 1.2
+  .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
+  .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
+      color: var(--accent)
+    &:hover:before
+      background: var(--accent)
+      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)