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

package/scripts/tags/lib/posters.js

@@ -9,7 +9,7 @@
 
 module.exports = ctx => function(args) {
   var args = ctx.args.map(args, ['repo', 'api', 'size'], ['group'])
-  const host = ctx.theme.config.api_host.ghraw
+  const rawUrl = ctx.stellar.config.services.github.rawUrl.replace(/\/+$/, '')
   if (args.size == null) {
     args.size = 'xs'
   }
@@ -17,21 +17,21 @@ module.exports = ctx => function(args) {
   if (args.api) {
     api = args.api
   } else if (args.repo) {
-    api = `https://${host}/${args.repo}/output/v2/data.json`
+    api = `${rawUrl}/${args.repo}/output/v2/data.json`
   }
   
   var el = ''
   el += `<div class="tag-plugin posters-wrap">`
   if (api) {
-    el += `<div class="data-service ds-friends" data-api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
+    el += `<div class="data-service ds-friends" data-api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" aspect_ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
   } else if (args.group) {
-    const links = ctx.theme.config.links || {}
-    el += `<div class="tag-plugin gallery grid-box" layout="grid" ratio="portrait" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
+    const links = ctx.stellar.data.links || {};
+    el += `<div class="tag-plugin gallery grid-box" layout="grid" aspect_ratio="portrait" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         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 += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.stellar.config.fallbacks.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.stellar.config.fallbacks.cover}&quot;;"/>`
         el += `<div class="lazy-icon"></div>`
         el += `<div class="image-meta">`
         if (item.title) {

package/scripts/tags/lib/quot.js

@@ -3,7 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * quot:
- * {% quot [el:h2] [icon:default] [prefix:icon] text [suffix:icon] %}
+ * {% quot [el:h2] [icon:variant/key] [color:color] [prefix:icon] text [suffix:icon] %}
  *
  */
 
@@ -11,13 +11,13 @@
 
 module.exports = ctx => function (args) {
   var el = ''
-  args = ctx.args.map(args, ['el', 'icon', 'prefix', 'suffix'], ['text'])
+  args = ctx.args.map(args, ['el', 'icon', 'color', 'prefix', 'suffix'], ['text'])
   if (!args.el) {
     args.el = 'p'
   }
 
   function content() {
-    const cfg = ctx.theme.config.tag_plugins.quot[args.icon || 'default']
+    const cfg = ctx.stellar.config.tags.quot[args.icon || 'default']
     var el = ''
     var prefix = null
     var suffix = null
@@ -29,15 +29,25 @@ module.exports = ctx => function (args) {
       // yml中配置的样式
       prefix = cfg?.prefix
       suffix = cfg?.suffix
+      if (!cfg && args.icon && ctx.stellar.data.icons?.[args.icon]) {
+        prefix = args.icon
+      }
+    }
+    function icon(key, position) {
+      const result = ctx.utils.icon(key, `class="icon ${position}"`)
+      if (!args.color) {
+        return result
+      }
+      return `<span class="quot-icon colorful" ${ctx.args.joinTags(args, ['color']).join(' ')}>${result}</span>`
     }
     if (prefix) {
-      el += ctx.utils.icon(prefix, 'class="icon prefix"')
+      el += icon(prefix, 'prefix')
     } else {
       el += `<span class="empty"></span>`
     }
     el += `<span class="text">${args.text}</span>`
     if (suffix) {
-      el += ctx.utils.icon(suffix, 'class="icon prefix"')
+      el += icon(suffix, 'suffix')
     } else {
       el += `<span class="empty"></span>`
     }

package/scripts/tags/lib/rating.js

@@ -9,24 +9,27 @@
 
 'use strict'
 
+const { resolveServiceProvider } = require("../../lib/service-provider");
+
 module.exports = ctx => function (args) {
   args = ctx.args.map(args, ['id', 'icon'], ['title'])
   
-  const api = ctx.theme.config.data_services.rating.api
+  const api = resolveServiceProvider(ctx.stellar.config.services.rating)?.endpoint;
+  const disabled = api == null
   const id = args.id || 'default'
 
   const star = ctx.utils.icon(args.icon || 'rating:star')
-  let el = `<div class="tag-plugin ds-rating" data-api="${api}" data-api="${api}" data-id="${id}">`
+  let el = `<div class="tag-plugin ds-rating${disabled ? ' is-disabled' : ''}"${disabled ? '' : ` data-api="${api}"`} data-id="${id}">`
   if (args.title) {
     el += `<div class="header"><span>${args.title}</span></div>`
   }
   el += `<div class="body">`
   for (let i = 1; i <= 5; i++) {
-    el += `<button class="star" data-value="${i}">${star}</button>`
+    el += `<button class="star" data-value="${i}"${disabled ? ' disabled' : ''}>${star}</button>`
   }
   el += `<span class="avg">(0.0)</span>`
   el += `</div>`
   el += `<div class="footer"><span class="count">0</span><span class="suffix">人已评分</span></div>`
   el += `</div>`
   return el.trim()
-}
+}

package/scripts/tags/lib/sites.js

@@ -7,15 +7,17 @@
 
 'use strict'
 
+const { resolveServiceProvider } = require("../../lib/service-provider");
+
 module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['repo', 'api'], ['group'])
-  const host = ctx.theme.config.api_host.ghraw
-  const siteinfoApi = ctx.theme.config.data_services.siteinfo?.api
+  const rawUrl = ctx.stellar.config.services.github.rawUrl.replace(/\/+$/, '')
+  const siteinfoApi = resolveServiceProvider(ctx.stellar.config.services.siteInfo)?.endpoint;
   var api
   if (args.api) {
     api = args.api
   } else if (args.repo) {
-    api = `https://${host}/${args.repo}/output/v2/data.json`
+    api = `${rawUrl}/${args.repo}/output/v2/data.json`
   }
   
   var el = '<div class="tag-plugin sites-wrap">'
@@ -26,7 +28,7 @@ module.exports = ctx => function(args) {
     el += '<div class="grid-box"></div>'
     el += '</div>'
   } else if (args.group) {
-    const links = ctx.theme.config.links || {}
+    const links = ctx.stellar.data.links || {};
     el += '<div class="grid-box">'
     for (let item of (links[args.group] || [])) {
       if (item?.url && item?.title) {
@@ -36,12 +38,12 @@ module.exports = ctx => function(args) {
         el += `<div class="grid-cell site-card">`
         el += `<a class="card-link"${itemSiteinfoApi ? ` data-siteinfo-api="${itemSiteinfoApi}"` : ''} 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 += `<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.stellar.config.fallbacks.cover}&quot;;"/>`
         el += `<div class="lazy-icon"></div>`
         el += `</div>`
         el += `<div class="info">`
         el += `<div class="lazy-box icon">`
-        el += `<img class="lazy siteinfo-icon" 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 += `<img class="lazy siteinfo-icon" data-src="${item.icon || item.avatar || ctx.stellar.config.fallbacks.linkCard}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.stellar.config.fallbacks.linkCard}&quot;;"/>`
         el += `<div class="lazy-icon"></div>`
         el += `</div>`
         el += `<span class="title">${item.title}</span>`

package/scripts/tags/lib/tip.js

@@ -2,22 +2,22 @@
  * tip.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% tip text:注解内容 %}词句{% endtip %}
+ * {% tip 词句 pop:注解内容 %}
  */
 
 'use strict'
 
-module.exports = ctx => function(args, content = '') {
-  args = ctx.args.map(args, ['text'], [])
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['pop'], ['text'])
   const escapeHTML = require('hexo-util').escapeHTML
-  const text = escapeHTML(args.text || '')
-  const inner = ctx.render.renderSync({text: content, engine: 'markdown'})
+  const pop = escapeHTML(args.pop || '')
+  const inner = ctx.render.renderSync({text: args.text || '', engine: 'markdown'})
     .split('\n').join('')
     .replace(/<\/?p>/g, '')
   var el = ''
   el += `<span class="tag-plugin tip" tabindex="0">`
   el += `<span class="tip-text">${inner}</span>`
-  el += `<span class="tip-bubble" role="tooltip">${text}</span>`
+  el += `<span class="tip-bubble" role="tooltip">${pop}</span>`
   el += '</span>'
   return el
 }

package/scripts/tags/lib/toc.js

@@ -43,7 +43,7 @@ module.exports = ctx => function(args) {
   el += '</summary>'
 
   if (args.wiki) {
-    const proj = ctx.theme.config.wiki.tree[args.wiki]
+    const proj = ctx.stellar.data.wiki.tree[args.wiki];
     if (proj == undefined) {
       return ''
     }
@@ -70,4 +70,4 @@ module.exports = ctx => function(args) {
   // end
   el += '</div>'
   return el
-}
+};

package/scripts/tags/lib/vote.js

@@ -9,20 +9,23 @@
 
 'use strict'
 
+const { resolveServiceProvider } = require("../../lib/service-provider");
+
 module.exports = ctx => function (args) {
   args = ctx.args.map(args, ['id', 'yes', 'no'], ['title'])
 
-  const api = ctx.theme.config.data_services.vote.api
+  const api = resolveServiceProvider(ctx.stellar.config.services.vote)?.endpoint;
+  const disabled = api == null
   const id = args.id || 'default'
 
-  var el = `<div class="tag-plugin ds-vote" data-api="${api}" data-id="${id}">`
+  var el = `<div class="tag-plugin ds-vote${disabled ? ' is-disabled' : ''}"${disabled ? '' : ` data-api="${api}"`} data-id="${id}">`
   if (args.title) {
     el += `<div class="header"><span>${args.title}</span></div>`
   }
   el += `<div class="body">`
-  el += `<button class="vote-up">${ctx.utils.icon(args.yes || 'vote:thumbsup')} <span class="up">0</span></button>`
-  el += `<button class="vote-down">${ctx.utils.icon(args.no || 'vote:thumbsdown')} <span class="down">0</span></button>`
+  el += `<button class="vote-up"${disabled ? ' disabled' : ''}>${ctx.utils.icon(args.yes || 'vote:thumbsup')} <span class="up">0</span></button>`
+  el += `<button class="vote-down"${disabled ? ' disabled' : ''}>${ctx.utils.icon(args.no || 'vote:thumbsdown')} <span class="down">0</span></button>`
   el += `</div>`
   el += `</div>`
   return el.trim()
-}
+}

package/source/css/_appearances/_mixins.styl

@@ -0,0 +1,258 @@
+appearance-card-surface()
+  border: 0
+  border-radius: $border-card-l
+  background: var(--card)
+  box-shadow: $boxshadow-float
+
+appearance-flat-surface()
+  border: 1px solid var(--block-border)
+  border-radius: 0
+  box-shadow: none
+  backdrop-filter: saturate(140%) blur(24px)
+  -webkit-backdrop-filter: saturate(140%) blur(24px)
+
+appearance-glass-surface()
+  border: 0
+  border-radius: $border-card-l
+  corner-shape: $corner-shape
+  isolation: isolate
+  background: transparent
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+  glass-material($border-card-l)
+  > *
+    position: relative
+    z-index: 0
+  > .site-region__decoration
+    z-index: -2
+
+appearance-transparent-leftbar()
+  .site-region--leftbar .ui-surface
+    border: 0
+    background: transparent
+    box-shadow: none
+    backdrop-filter: none
+    -webkit-backdrop-filter: none
+  :root[data-theme='dark'] .site-region--leftbar .ui-surface
+    background: transparent
+  :root:not([data-theme])
+    @media screen and (prefers-color-scheme: dark)
+      .site-region--leftbar .ui-surface
+        background: transparent
+
+// ui-interactive 是组件无关的交互能力；Collection、Widget、Dropdown
+// 只负责组合此类，不参与 Appearance 选择器。
+appearance-standard-interactions()
+  .ui-interactive
+    background: transparent
+    box-shadow: none
+    &:focus-visible
+      outline: 2px solid var(--theme)
+      outline-offset: 2px
+    &:hover,
+    &:focus-visible
+      background: var(--block)
+      box-shadow: none
+
+  .ui-interactive.has-hover-surface,
+  .ui-interactive:active,
+  .ui-interactive.active,
+  .ui-interactive.is-active,
+  details[open] > .ui-interactive
+    background: var(--block)
+    box-shadow: none
+
+  .widget-wrapper.markdown .ui-interactive
+    background: var(--block)
+
+// Editorial Minimal 的交互反馈只使用排版和当前文字颜色，不创建填充表面。
+// 文字交互使用逐行主题色粗下划线；复合能力使用同色内描边。
+appearance-editorial-underline-mark()
+  text-decoration-line: underline
+  text-decoration-style: solid
+  text-decoration-thickness: 8px
+  text-decoration-color: transparent
+  text-underline-offset: 0
+  text-decoration-skip-ink: none
+  transition: text-decoration-color .25s ease
+
+appearance-editorial-underline()
+  padding: 0
+  background-color: transparent
+  background-image: none
+  box-shadow: none
+  appearance-editorial-underline-mark()
+  &:focus-visible
+    outline: 2px solid var(--theme)
+    outline-offset: 2px
+
+appearance-editorial-underline-active()
+  background-color: transparent
+  box-shadow: none
+  color: var(--text-p0)
+  text-decoration-color: unquote('color-mix(in srgb, var(--editorial-underline-color, var(--theme)) 50%, transparent)')
+
+appearance-editorial-outline()
+  background: transparent
+  box-shadow: none
+  transition: box-shadow .2s ease-out, color .2s ease-out
+
+appearance-editorial-outline-active()
+  background: transparent
+  box-shadow: inset 0 0 0 1px var(--text-p3)
+
+appearance-editorial-interactions()
+  .ui-interactive
+    appearance-editorial-outline()
+    &:focus-visible
+      outline: 2px solid var(--theme)
+      outline-offset: 2px
+
+  .ui-interactive:hover,
+  .ui-interactive:focus-visible,
+  .ui-interactive:active,
+  .ui-interactive.active,
+  .ui-interactive.is-active,
+  details[open] > .ui-interactive
+    appearance-editorial-outline-active()
+
+  .brand-navigation__back
+    padding: 0
+    &:hover
+      color: var(--text-p2)
+      background: transparent
+      box-shadow: none
+
+  // Leftbar 的下划线已经收敛到标题文字，交互容器恢复组件原有 padding，不再等值迁移为 margin。
+  .site-region--leftbar .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only)
+    margin: 0
+    padding: var(--ui-item-padding-y) var(--ui-item-padding-x)
+    padding-left: calc(var(--ui-item-padding-x) + var(--ui-item-depth) * var(--gap-base))
+
+  // 点击容器可以包含图标与留白；下划线只跟随内部标题文字。
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only) .ui-collection__title
+    appearance-editorial-underline-mark()
+
+  // Menu 条目优先使用自身主题色；未声明时回退到全局主题色。
+  .widget-instance--menu .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__title
+    --editorial-underline-color: var(--item-theme, var(--theme))
+
+  // Collection Item 只要声明了通用交互能力，hover 就统一显示 Editorial 内描边。
+  .ui-collection__item.ui-interactive:hover,
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item.ui-interactive:not(.is-icon-only):hover
+    appearance-editorial-outline-active()
+
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only):hover .ui-collection__title,
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only):focus-visible .ui-collection__title,
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only):active .ui-collection__title,
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only).active .ui-collection__title,
+  .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only).is-active .ui-collection__title,
+  details[open] > .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only) .ui-collection__title
+    appearance-editorial-underline-active()
+
+  @media (prefers-reduced-motion: reduce)
+    .ui-interactive
+      transition: none
+    .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__title
+      transition: none
+
+appearance-glass-interactions-light()
+  .ui-interactive
+    background: transparent
+    box-shadow: none
+    &:focus-visible
+      outline: 2px solid var(--theme)
+      outline-offset: 2px
+
+  .ui-interactive.has-hover-surface,
+  .ui-interactive:hover,
+  .ui-interactive:focus-visible,
+  .ui-interactive:active,
+  .ui-interactive.active,
+  .ui-interactive.is-active,
+  details[open] > .ui-interactive
+    background: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
+    box-shadow: inset 0 1px 0 rgba(white, .45)
+
+appearance-glass-interactions-dark()
+  .ui-interactive.has-hover-surface,
+  .ui-interactive:hover,
+  .ui-interactive:focus-visible,
+  .ui-interactive:active,
+  .ui-interactive.active,
+  .ui-interactive.is-active,
+  details[open] > .ui-interactive
+    background: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
+    box-shadow: inset 0 1px 0 rgba(white, .08)
+
+// 当前注册的 Appearance 复用正文基础视觉。选择器由当前编译的 Appearance
+// 主动输出；未来某套需要分化时，在对应文件中实现自己的正文选择器。
+appearance-standard-prose()
+  table:not([class])
+    th
+      background: var(--block)
+      border-top: 1px solid var(--block-border)
+      border-bottom: 1px solid var(--block-border)
+    tr
+      border-bottom: 1px dashed var(--block-border)
+      &:hover
+        background: var(--block)
+
+  blockquote:before
+    background: var(--text-meta)
+
+  p > code:not([class]),
+  li > code:not([class]),
+  .md-text .highlight,
+  pre:not([class]):has(> code),
+  .md-text .highlight figcaption span,
+  .md-text .gist .highlight,
+  .md-text .gist .gist-meta
+    background: var(--block)
+
+  .md-text .gist
+    .gist-file
+      border-color: var(--block-border)
+    .gist-data
+      --bgColor-default: var(--block)
+      border-bottom-color: var(--block-border)
+
+  .md-text .link-card
+    background: var(--card)
+
+appearance-card-listing-nav()
+  .listing-nav__surface
+    background: var(--card)
+    box-shadow: $boxshadow-card
+
+appearance-translucent-leftbar-light()
+  .brand-navigation__back
+    background: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), rgba(white, .5)
+    box-shadow: inset 0 1px 0 rgba(white, .45)
+  .search-wrapper > .search-form:before
+    background: white
+  .widgets .loading-wrap,
+  .widget-wrapper.markdown .widget-body,
+  .widget-wrapper.tagcloud .widget-body,
+  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body .highlight,
+  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body pre:not([class]):has(> code),
+  .widget-wrapper.timeline .body
+    background: rgba(white, .5)
+  .search-no-result
+    background: rgba(white, .2)
+
+appearance-translucent-leftbar-dark()
+  .brand-navigation__back
+    background: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), rgba(black, .2)
+    box-shadow: inset 0 1px 0 rgba(white, .08)
+  .search-wrapper > .search-form:before
+    background: rgba(black, .2)
+  .widgets .loading-wrap,
+  .widget-wrapper.markdown .widget-body,
+  .widget-wrapper.tagcloud .widget-body,
+  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body .highlight,
+  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body pre:not([class]):has(> code),
+  .widget-wrapper.timeline .body
+    background: rgba(black, .5)
+  .search-no-result
+    background: rgba(black, .2)

package/source/css/_appearances/card.styl

@@ -0,0 +1,30 @@
+.site-shell
+  --shell-gap: var(--gap-page)
+  --shell-edge-inset: 16px
+  --shell-topbar-top: 0px
+
+.site-shell[data-regions~='topbar']
+  --shell-sticky-offset: var(--shell-topbar-height)
+  --shell-topbar-bottom: var(--shell-topbar-height)
+
+.ui-surface
+  appearance-card-surface()
+
+.site-region--topbar.ui-surface
+  top: 0
+  width: 100%
+  border-radius: 0
+
+.site-region--leftbar .ui-surface
+  background: var(--card)
+
+.site-region--leftbar
+  .brand-navigation__back
+    background: var(--block-border)
+    box-shadow: none
+  .search-wrapper > .search-form:before
+    background: var(--text-meta)
+
+appearance-standard-interactions()
+appearance-standard-prose()
+appearance-card-listing-nav()

package/source/css/_appearances/flat.styl

@@ -0,0 +1,44 @@
+.site-shell
+  --leftbar-gap: 0px
+
+.ui-surface
+  appearance-flat-surface()
+
+.site-region--topbar.ui-surface,
+.site-region--leftbar .site-region__surface.ui-surface
+  border-width: 0
+
+.site-region--topbar.ui-surface
+  box-shadow: inset 0 -1px 0 var(--block-border)
+
+.site-region--leftbar .site-region__surface.ui-surface
+  box-shadow: inset -1px 0 0 var(--block-border)
+
+.site-shell[data-drawer='leftbar'] .site-region--leftbar .site-region__surface.ui-surface
+  border-radius: $border-card-l
+  corner-shape: $corner-shape
+  background: var(--bg-a20)
+
+.post-list.post .post-card-wrap,
+.post-list.post .post-card.card-hover
+  box-shadow: none
+
+.post-list.post .post-card
+  background-color: var(--block)
+  &:hover
+    background-color: var(--block-border)
+
+.site-region--leftbar
+  appearance-translucent-leftbar-light()
+
+:root[data-theme='dark'] .site-region--leftbar
+  appearance-translucent-leftbar-dark()
+
+:root:not([data-theme])
+  @media screen and (prefers-color-scheme: dark)
+    .site-region--leftbar
+      appearance-translucent-leftbar-dark()
+
+appearance-standard-interactions()
+appearance-standard-prose()
+appearance-card-listing-nav()