hexo-theme-stellar 1.40.0 → 1.42.0

package/scripts/tags/lib/image.js

@@ -47,10 +47,10 @@ module.exports = ctx => function(args) {
     if (style.length > 0 && !args.ratio) {
       img += ' style="' + style + '"'
     }
-    img += `onerror="this.src="${ctx.theme.config.default.image_onerror}""`
+    img += `onerror="this.src="${ctx.theme.config.default.image_onerror || ctx.utils.iconData('image:onerror')}""`
     img += '/>'
     // loading
-    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
+    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')});"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a
@@ -93,7 +93,7 @@ module.exports = ctx => function(args) {
     if (args.alt) {
       download = ' download="' + args.alt + '"'
     }
-    el += '<a class="image-download blur" style="opacity:0" target="_blank"' + download + ' href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>'
+    el += '<a class="image-download blur" style="opacity:0" target="_blank"' + download + ' href="' + href + '">' + ctx.utils.icon('image:download') + '</a>'
   }
   el += '</div>'
 

package/scripts/tags/lib/posters.js

@@ -32,7 +32,7 @@ module.exports = ctx => function(args) {
         el += `<div class="grid-cell poster-card">`
         el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
         el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -33,12 +33,12 @@ module.exports = ctx => function(args) {
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
         el += `<div class="lazy-box snapshot">`
         el += `<img class="lazy" data-src="${item.cover || item.snapshot || item.screenshot || ('https://image.thum.io/get/width/1280/crop/720/' + item.url)}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
         el += `</div>`
         el += `<div class="info">`
         el += `<div class="lazy-box icon">`
         el += `<img class="lazy" data-src="${item.icon || item.avatar || ctx.theme.config.default.link}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.theme.config.default.link}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
         el += `</div>`
         el += `<span class="title">${item.title}</span>`
         el += `<span class="desc">${item.description || item.url}</span>`

package/source/css/_common/base.styl

@@ -34,14 +34,15 @@ ul,ol
 // table
 table:not([class])
   border-collapse: collapse
-  overflow: auto
+  display: block
+  overflow-x: auto
+  -webkit-overflow-scrolling: touch
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
   --fsp: $fsp2
   font-size: var(--fsp)
   scrollbar(0,0)
-  display: table
   th
     background: var(--block)
     border-top: 1px solid var(--block-border)
@@ -50,6 +51,8 @@ table:not([class])
     padding: 4px 1em
     line-height: 1.5
   tr
+    word-break: keep-all
+    white-space: nowrap
     border-bottom: 1px dashed var(--block-border)
     trans()
     &:hover
@@ -57,10 +60,3 @@ table:not([class])
 
   @media screen and (min-width: $device-mobile-max)
     width 100%
-
-  @media screen and (max-width: $device-mobile-max)
-    display: block
-    tr
-      word-break: keep-all
-      white-space:nowrap
-

package/source/css/_common/cover-overlay.styl

@@ -0,0 +1,111 @@
+// 背景图覆盖层通用能力：同图渐变模糊层 + 黑色渐变蒙版 + hover 变暗
+// $url-var: 背景图 CSS 变量（--cover-url / --pin-cover-url / --bg-url），模糊层取同图背景
+// $sides: top | bottom | both —— 文字所在边缘；both 依赖宿主内的 .banner-mask-top/bottom 蒙版元素
+// $layer: 覆盖层宿主选择器（相对当前元素），缺省为当前元素自身；图片等 hover 目标由调用方按 DOM 自行接入
+cover-overlay($url-var, $sides = bottom, $layer = null)
+  $host = $layer ? $layer : '&'
+  // 统一默认观感变量（与文章列表 hero 封面一致）
+  --img-br: 100%
+  --img-sat: 100%
+  --blur-px: 1em
+  --blur-height: 128px
+  --blur-sat: 120%
+  --cover-zoom: 1.05
+  // hover 整体变暗：亮度 75%、饱和度 120%，模糊层饱和度提升至 200%
+  &:hover
+    --img-br: 75%
+    --img-sat: 120%
+    --blur-sat: 200%
+  if $sides == both
+    // 双侧：:before 顶部模糊层 + :after 底部模糊层，黑色蒙版由 .banner-mask-top/bottom 承担
+    {$host}:before, {$host}:after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 0
+      background-image: $url-var
+      background-size: cover
+      background-position: center
+      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
+      // 常驻恒等 transform：hover 放大时 Safari 正确应用父级圆角裁剪（同 list.styl 注释）
+      transform: translateZ(0)
+      pointer-events: none
+      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
+    {$host}:before
+      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+    {$host}:after
+      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+    if $layer
+      &:hover
+        {$host}:before, {$host}:after
+          transform: translateZ(0) scale(var(--cover-zoom))
+    else
+      {$host}:hover:before, {$host}:hover:after
+        transform: translateZ(0) scale(var(--cover-zoom))
+    // 黑色渐变蒙版：文字所在边缘不透明度约 0.25，垂直中线为 0
+    {$host} .banner-mask
+      position: absolute
+      inset: 0
+      z-index: 1
+      pointer-events: none
+      &.banner-mask-top
+        background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0) 50%)
+      &.banner-mask-bottom
+        background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.25))
+  else
+    // 单侧：:before 同图模糊层 + :after 黑色渐变蒙版
+    {$host}:before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 1
+      background-image: $url-var
+      background-size: cover
+      background-position: center
+      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
+      // 常驻恒等 transform：hover 放大时 Safari 正确应用父级圆角裁剪（同 list.styl 注释）
+      transform: translateZ(0)
+      pointer-events: none
+      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
+    if $sides == top
+      {$host}:before
+        mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+        -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+    else
+      {$host}:before
+        mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+        -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+    if $layer
+      &:hover
+        {$host}:before
+          transform: translateZ(0) scale(var(--cover-zoom))
+    else
+      {$host}:hover:before
+        transform: translateZ(0) scale(var(--cover-zoom))
+    {$host}:after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 1
+      pointer-events: none
+      if $sides == top
+        background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0) 50%)
+      else
+        background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.25))

package/source/css/_common/device.styl

@@ -12,7 +12,7 @@
   grid-column-end: span 3
   --inset: 2rem
   right: 0
-  bottom: calc(var(--inset) * 2)
+  bottom: calc(var(--inset) * 1)
   margin-left: auto
   margin-right: var(--inset)
   float: right
@@ -40,8 +40,8 @@
   box-sizing: border-box
   flex: 0 0 auto
   margin: 0 auto
-  width: 36px
-  height: 36px
+  width: 40px
+  height: 40px
   padding: 4px
   line-height: 0
   font-size: 28px

package/source/css/_common/title.styl

@@ -15,6 +15,23 @@ h5
 h6
   font-size: 'calc(%s + 0px)' % var(--fsp)
 
+// story 文章段落标题（h2）：居中 + 两侧 accent 斜杠装饰
+// 专栏列表页专栏标题（.topic-title）与 story 文章 h2 共用
+story-title()
+  color: var(--text)
+  line-height: 1.2
+  text-align: center
+  &: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
+
 // 次级段落字号
 .fs15
   --fsp: $fs-15

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/md-table.styl

@@ -0,0 +1,23 @@
+// 普通 Markdown 表格滚动容器：宽度足够时铺满容器，内容超出时横向滚动
+.md-table-scroll
+  overflow-x: auto
+  -webkit-overflow-scrolling: touch
+  max-width: 100%
+  margin: 1rem 0
+  scrollbar(0,0)
+  > table:not([class])
+    display: table
+    width: 100%
+    max-width: none
+    margin: 0
+    border-collapse: separate
+    border-spacing: 0
+    border: 1px solid var(--block-border)
+    border-radius: $border-card
+    overflow: hidden
+    th
+      border-top: none
+    th, td
+      border-left: 1px solid var(--block-border)
+      &:first-child
+        border-left: none

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

@@ -81,29 +81,12 @@
   display: flex
   flex-wrap: wrap
   padding: 0
-  margin: 0 -4px
+  margin: 0
+  column-gap: 1rem
   a.tag
-    display: inline-flex
-    align-items: center
-    position: relative
-    color: var(--text-p2)
-    margin: 4px
-    padding: .5em .75rem
-    border-radius: 4px
-    background: var(--block)
-    font-size: $fs-13
-    font-weight: 500
-    &:before
-      content: "#"
-      margin-left: -2px
-      margin-right: 2px
-      opacity: .4
-    &:hover
-      &:before
-        color var(--theme)
-        opacity: 1
-      color: var(--text)
-      background: var(--block-border)
+    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
@@ -51,9 +42,9 @@
       vertical-align: middle
     &:before
       margin-left: -1em
-      svg-mask-icon($iH3Left)
+      svg-mask-icon(var(--icon-h3-left))
     &:after
-      svg-mask-icon($iH3Right)
+      svg-mask-icon(var(--icon-h3-right))
 
   h4:not([class])
     position: relative
@@ -115,10 +106,10 @@
     trans1 all
   &:before
     left: -0.3em
-    svg-mask-icon($iQuoteLeft)
+    svg-mask-icon(var(--icon-quote-left))
   &:after
     right: -0.3em
-    svg-mask-icon($iQuoteRight)
+    svg-mask-icon(var(--icon-quote-right))
   p:not([class])
     color: var(--text-p2)
     font-size: $fs-body