hexo-theme-stellar 1.42.1 → 1.43.0

package/layout/index_wiki.ejs

@@ -13,14 +13,22 @@ function layout_wiki_list(partial) {
     if (page.filter === false) {
       // wikiList
       el += `<div class="post-card-wrap${scrollreveal(' ')}">`
-      el += `<a class="post-card wiki" href="${pretty_url(proj.homepage?.path || '/')}">`
+      var coverStyle = ''
+      if (proj.cover) {
+        coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
+      }
+      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`
     } else if (proj.tags && proj.tags.includes(page.tagName) === true) {
       // filtered wikiList
       el += `<div class="post-card-wrap${scrollreveal(' ')} filter">`
-      el += `<a class="post-card wiki" href="${pretty_url(proj.homepage?.path || '/')}">`
+      var coverStyle = ''
+      if (proj.cover) {
+        coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
+      }
+      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`
@@ -41,4 +49,42 @@ function layoutDiv() {
 }
 %>
 
-<%- layoutDiv() %>
+<%- layoutDiv() %>
+<script>
+  // Wiki 覆盖层须同时等待封面原图和平均主题色完成，避免默认主题色短暂闪现。
+  function revealWikiCover(card) {
+    if (card._wikiImageReady && card._wikiOverlayReady && !card.classList.contains('no-cover')) {
+      card.classList.add('cover-loaded');
+    }
+  }
+  document.addEventListener('wiki-overlay-ready', function(event) {
+    var card = event.target.closest('.wiki-card');
+    if (!card) return;
+    card._wikiOverlayReady = true;
+    revealWikiCover(card);
+  });
+  document.querySelectorAll('.wiki-card-cover:not(.no-cover) > img').forEach(function(img) {
+    var cover = img.parentElement;
+    var card = img.closest('.wiki-card');
+    if (!cover || !card) return;
+    var loaded = function() {
+      card._wikiImageReady = true;
+      revealWikiCover(card);
+    };
+    var failed = function() {
+      card._wikiImageReady = false;
+      card.classList.remove('cover-loaded');
+      card.classList.add('no-cover');
+      cover.classList.add('no-cover', 'cover-error');
+    };
+    img.addEventListener('load', loaded, { once: true });
+    img.addEventListener('error', failed, { once: true });
+    if (img.complete) {
+      if (img.naturalWidth > 0) {
+        loaded();
+      } else {
+        failed();
+      }
+    }
+  });
+</script>

package/layout/layout.ejs

@@ -49,19 +49,20 @@ if (theme.style.prefers_theme === 'auto') {
     html += site_background
     html += `<div id="l_cover">${partial('_partial/cover/index').trim()}</div>`
     html += `<div class="l_body ${page_type}" id="start" layout="${page.layout}" type="${article_type}" ${indent ? 'text-indent' : ''}>`
-      html += `<aside class="l_left${theme.style.leftbar?.['ui-style'] === 'card' ? ' leftbar-card' : ''}">`
+      var leftbarSurface = theme.style.leftbar?.['ui-style'] === 'card' ? 'card' : 'glass'
+      html += `<aside class="l_left${leftbarSurface === 'card' ? ' leftbar-card' : ''}" data-ui-surface="${leftbarSurface}">`
         html += `<div class="sidebg"></div>`
         html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
           html += partial('_partial/sidebar/index_leftbar')
         html += `</div>`
       html += `</aside>`
-      html += `<div class="l_main" id="main">`
+      html += `<div class="l_main" id="main" data-ui-surface="content">`
         html += partial('_partial/sidebar/logo', {where: 'main'})
         html += body
         html += partial('_partial/main/footer')
         html += `<div class="main-mask" onclick="sidebar.dismiss()"></div>`
       html += `</div>`
-      html += `<aside class="l_right">`
+      html += `<aside class="l_right" data-ui-surface="sidebar">`
         html += partial('_partial/sidebar/index_rightbar').trim()
       html += `</aside>`
       html += partial('_partial/menubtn')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.42.1",
+  "version": "1.43.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/events/index.js

@@ -41,7 +41,6 @@ hexo.on('ready', () => {
   checkVersion(hexo, { useCache: true });
 });
 
-
 // 防止重复注册
 let hasRun = false;
 
@@ -66,4 +65,3 @@ hexo.extend.filter.register('before_generate', async () => {
     fixMarkdownImages(hexo); // 不用 await，因为是同步的
   }
 });
-

package/scripts/generators/stellar-icons.js

@@ -5,7 +5,7 @@
 // 与 layout/_partial/scripts/defines.ejs 中旧的白名单保持一致（客户端通过 ctx.icons 读取）。
 hexo.extend.generator.register('stellar_icons', function () {
   const icons = (this.theme.config && this.theme.config.icons) || {};
-  const keys = ['default:tocomment', 'default:loading-spinner', 'default:warning', 'weibo:repeat', 'weibo:like'];
+  const keys = ['default:tocomment', 'default:warning', 'weibo:repeat', 'weibo:like'];
   const out = {};
   // 去除 SVG 注释（避免 <!-- / </script> 解析风险），再转义 <
   for (const k of keys) {

package/scripts/lib/subtitle.js

@@ -3,12 +3,16 @@
 const { stripHTML } = require('hexo-util');
 
 // 文章一行小字取值（hero 卡片与置顶轮播共用，未来可复用于其它场景）：
-// subtitle > description > excerpt/content 前 length 字（去 HTML、压缩空白、截断；省略号由 CSS 单行处理），空则返回空串。
+// subtitle（含 " | " 时取非空左侧）> description > excerpt/content 前 length 字（去 HTML、压缩空白、截断；省略号由 CSS 单行处理），空则返回空串。
 function subtitle(post, length = 50) {
   if (post == null) {
     return '';
   }
   if (post.subtitle != null && String(post.subtitle).length > 0) {
+    const separator = String(post.subtitle).indexOf(' | ');
+    if (separator > 0) {
+      return String(post.subtitle).slice(0, separator);
+    }
     return post.subtitle;
   }
   if (post.description != null && String(post.description).length > 0) {

package/scripts/tags/index.js

@@ -12,6 +12,7 @@ hexo.extend.tag.register('grid', require('./lib/grid')(hexo), true)
 hexo.extend.tag.register('swiper', require('./lib/swiper')(hexo), true)
 hexo.extend.tag.register('gallery', require('./lib/gallery')(hexo), {ends: true})
 hexo.extend.tag.register('banner', require('./lib/banner')(hexo), true)
+hexo.extend.tag.register('dropdown', require('./lib/dropdown')(hexo), true)
 
 // data
 hexo.extend.tag.register('users', require('./lib/friends')(hexo))

package/scripts/tags/lib/about.js

@@ -18,7 +18,7 @@ module.exports = ctx => function(args, content) {
   el += '<div class="tag-plugin about">'
   if (args.back) {
     el += '<a class="nav-back cap" href="' + url_for(ctx.config.root) + '">'
-    el += ctx.utils.icon('default:goback')
+    el += ctx.utils.icon('default:arrow-left')
     el += '</a>'
   }
   // avatar

package/scripts/tags/lib/albums.js

@@ -32,7 +32,7 @@ module.exports = ctx => function(args) {
         el += `<div class="grid-cell album-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 || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+        el += `<div class="lazy-icon"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/banner.js

@@ -26,7 +26,7 @@ module.exports = ctx => function(args, content) {
   } else {
     el += `
     <button class="back cap" onclick="window.history.back()">
-      ${ctx.utils.icon('default:goback')}
+      ${ctx.utils.icon('default:arrow-left')}
     </button>
     `
   }

package/scripts/tags/lib/dropdown.js

@@ -0,0 +1,64 @@
+/**
+ * dropdown.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * {% dropdown [direction:up/down] [align:left/right] title %}
+ * - icon:key [title](url)
+ * {% enddropdown %}
+ */
+
+'use strict'
+
+function parseItem(line) {
+  const matches = line.match(/^\s*(?:[-*]\s+)?(?:icon:([^\s]+)\s+)?\[([^\]]+)\]\(([^)\s]+)\)(?:\s+icon:([^\s]+))?\s*$/)
+  if (!matches) {
+    return null
+  }
+  return {
+    icon: matches[1] || matches[4],
+    title: matches[2],
+    url: matches[3]
+  }
+}
+
+module.exports = ctx => function(args, content = '') {
+  const { escapeHTML, url_for } = require('hexo-util')
+  args = ctx.args.map(args, ['icon', 'direction', 'align', 'open'], ['title'])
+  if (!args.title) {
+    return ''
+  }
+
+  const items = content.split(/\r?\n/).map(parseItem).filter(Boolean)
+  if (items.length === 0) {
+    return ''
+  }
+
+  const direction = ['up', 'down'].includes(args.direction) ? args.direction : 'auto'
+  const align = ['left', 'right'].includes(args.align) ? args.align : 'auto'
+  const title = escapeHTML(args.title)
+  const toUrl = url_for.bind(ctx)
+  var el = `<details class="tag-plugin dropdown" direction="${direction}" align="${align}"`
+  if (args.open === 'true') {
+    el += ' open'
+  }
+  el += '>'
+  el += `<summary class="dropdown-trigger" title="${title}" aria-label="${title}">`
+  el += `<span>${title}</span>`
+  el += '<svg class="dropdown-arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  el += '</summary>'
+  el += '<div class="dropdown-menu ui-collection" data-ui-surface="glass" data-layout="list" data-variant="nav" data-density="compact">'
+  for (const item of items) {
+    const url = String(item.url)
+    el += `<a class="dropdown-item ui-collection__item" href="${escapeHTML(toUrl(url))}`
+    if (url.includes('://')) {
+      el += '" target="_blank" rel="external nofollow noopener noreferrer">'
+    } else {
+      el += '" rel="noopener noreferrer">'
+    }
+    if (item.icon) {
+      el += `<span class="ui-collection__leading">${ctx.utils.icon(item.icon, 'no-lazy', true)}</span>`
+    }
+    el += `<span class="ui-collection__content"><span class="ui-collection__title">${escapeHTML(item.title)}</span></span></a>`
+  }
+  el += '</div></details>'
+  return el
+}

package/scripts/tags/lib/friends.js

@@ -29,7 +29,7 @@ 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 icon">`
         el += `<img class="lazy" data-src="${item.icon || item.avatar || ctx.theme.config.default.avatar}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.avatar}&quot;;"/>`
-        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 class="lazy-icon"></div>`
         el += `</div>`
         el += `<div class="name">`
         el += `<span>${item.title}</span>`

package/scripts/tags/lib/gallery.js

@@ -17,14 +17,14 @@
 
 var index = 0
 
-function img(src, alt, loading) {
+function img(src, alt) {
   let img = ''
   img += `<img class="lazy" data-fancybox="gallery-${index}" data-src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
   img += `/>`
-  img += `<div class="lazy-icon" style="background-image:url(${loading});"></div>`
+  img += `<div class="lazy-icon"></div>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -55,7 +55,7 @@ module.exports = ctx => function(args, content) {
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder'))}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/image.js

@@ -50,7 +50,7 @@ module.exports = ctx => function(args) {
     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 || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+    img += `<div class="lazy-icon"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a

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 || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+        el += `<div class="lazy-icon"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -10,6 +10,7 @@
 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
   var api
   if (args.api) {
     api = args.api
@@ -29,16 +30,19 @@ module.exports = ctx => function(args) {
     el += '<div class="grid-box">'
     for (let item of (links[args.group] || [])) {
       if (item?.url && item?.title) {
+        const itemSiteinfoApi = !item.icon && !item.avatar && siteinfoApi
+          ? siteinfoApi.replace('{href}', item.url)
+          : ''
         el += `<div class="grid-cell site-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        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 += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
+        el += `<div class="lazy-icon"></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 || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
+        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 += `<div class="lazy-icon"></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

@@ -24,11 +24,11 @@ img
   max-width: 100%
 
 li
-  font-size: 'calc(%s - 1px)' % var(--fsp)
+  font-size: 'calc(%s - 1px)' % var(--fs-content)
 
 
 ul,ol
-  padding-left: var(--fsp)
+  padding-left: var(--fs-content)
 
 
 // table
@@ -40,8 +40,8 @@ table:not([class])
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
-  --fsp: $fsp2
-  font-size: var(--fsp)
+  --fs-content: $fs-content-2
+  font-size: var(--fs-content)
   scrollbar(0,0)
   th
     background: var(--block)

package/source/css/_common/blockquote.styl

@@ -2,7 +2,7 @@ blockquote
   display: block
   margin-left: 0
   margin-right: 0
-  padding: 0 var(--fsp)
+  padding: 0 var(--fs-content)
   $bd-left = 4px
   color: var(--text-p3)
   position: relative
@@ -18,4 +18,4 @@ blockquote
     opacity: 0.5
     background: var(--text-meta)
   &:hover:before
-    background: var(--theme)
+    background: var(--theme)

package/source/css/_common/dropdown.styl

@@ -0,0 +1,132 @@
+.dropdown
+  position: relative
+  display: inline-block
+  z-index: 0
+  overflow: visible
+  line-height: 1
+  font-size: $fs-14
+  >.dropdown-trigger
+    display: inline-flex
+    align-items: center
+    gap: 0.5rem
+    box-sizing: border-box
+    min-height: 2rem
+    padding: 0.5rem 0.75rem
+    cursor: pointer
+    list-style: none
+    outline: none
+    border-radius: $border-bar
+    color: var(--text-p2)
+    background: var(--block)
+    text-decoration: none
+    white-space: nowrap
+    &::-webkit-details-marker
+      display: none
+    &::marker
+      display: none
+    &:hover, &:focus-visible
+      color: var(--text-p1)
+      background: var(--block-border)
+    >svg, >img, >.icon
+      flex: 0 0 1.25rem
+      width: 1.25rem
+      height: 1.25rem
+    >.dropdown-arrow
+      transition: transform 0.2s ease
+    >span
+      overflow: hidden
+      text-overflow: ellipsis
+  &[open]
+    z-index: 10
+    >.dropdown-trigger
+      color: var(--text-p1)
+      background: var(--block-border)
+      >.dropdown-arrow
+        transform: rotate(180deg)
+.dropdown-menu
+  display: flex
+  flex-direction: column
+  gap: 0.125rem
+  box-sizing: border-box
+  max-width: calc(100vw - 2rem)
+  max-height: calc(100vh - 2rem)
+  padding: 0.25rem
+  overflow-x: hidden
+  overflow-y: auto
+  font-size: $fs-14
+  border: 1px solid var(--block-border)
+  border-radius: $border-card
+  corner-shape: $corner-shape
+  background: rgba(white, 0.3)
+  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
+  backdrop-filter: saturate(300%) blur(16px)
+  -webkit-backdrop-filter: saturate(300%) blur(16px)
+  :root[data-theme="dark"] &
+    background: rgba(white, 0.2)
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      background: rgba(white, 0.2)
+  text-align: left
+  line-height: 1
+
+.dropdown-menu.ui-collection[data-density='compact']
+  min-width: 150px
+  --ui-item-min-height: calc(1.5rem + 2 * var(--ui-item-padding-y))
+
+.dropdown > .dropdown-menu
+  position: absolute
+  z-index: 10
+  top: calc(100% + 0.5rem)
+  left: 50%
+  transform: translateX(-50%)
+  visibility: hidden
+
+.dropdown[direction=up] > .dropdown-menu
+  top: auto
+  bottom: calc(100% + 0.5rem)
+
+.dropdown[align=left] > .dropdown-menu
+  left: 0
+  transform: none
+
+.dropdown[align=right] > .dropdown-menu
+  right: 0
+  left: auto
+  transform: none
+
+.dropdown-layer
+  position: fixed
+  z-index: 1000
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  pointer-events: none
+  > .dropdown-bridge
+    position: fixed
+    z-index: 0
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    pointer-events: auto
+    background: transparent
+  > .dropdown-menu
+    position: fixed
+    z-index: 1000
+    top: 0
+    left: 0
+    transform: none
+    pointer-events: auto
+    visibility: hidden
+    opacity: 0
+    contain: paint
+    will-change: opacity
+    transition: opacity 0.16s ease-out
+    &.dropdown-menu-visible
+      visibility: visible
+      opacity: 1
+
+@media (prefers-reduced-motion: reduce)
+  .dropdown-layer > .dropdown-menu, .dropdown > .dropdown-trigger > .dropdown-arrow
+    transition: none

package/source/css/_common/html.styl

@@ -7,7 +7,7 @@ html
   scrollbar(8px,8px)
   overflow-y: scroll
   font-family: $ff-body
-  font-size: $fs-root
+  font-size: var(--fs-root)
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
   scroll-padding-top: 0

package/source/css/_common/loading.styl

@@ -22,8 +22,11 @@ svg.loading
   border-radius: $border-card
   position relative
   padding: 2rem
-  svg  
+  svg,
+  .lazy-icon
     margin: 4px
+  .lazy-icon
+    display: inline-block
   &:after 
     content: hexo-config('style.loading.loading')
     color: var(--text-p1)
@@ -35,4 +38,4 @@ svg.loading
 
 .article-footer
   .loading-wrap
-    background: none
+    background: none

package/source/css/_common/title.styl

@@ -11,9 +11,9 @@ h3,.h3
 h4,.h4
   font-size: var(--fsh4)
 h5
-  font-size: 'calc(%s + 1px)' % var(--fsp)
+  font-size: 'calc(%s + 1px)' % var(--fs-content)
 h6
-  font-size: 'calc(%s + 0px)' % var(--fsp)
+  font-size: 'calc(%s + 0px)' % var(--fs-content)
 
 // story 文章段落标题（h2）：居中 + 两侧 accent 斜杠装饰
 // 专栏列表页专栏标题（.topic-title）与 story 文章 h2 共用
@@ -34,15 +34,15 @@ story-title()
 
 // 次级段落字号
 .fs15
-  --fsp: $fs-15
-  font-size: var(--fsp)
+  --fs-content: $fs-15
+  font-size: var(--fs-content)
 .fs14
-  --fsp: $fs-14
-  font-size: var(--fsp)
+  --fs-content: $fs-14
+  font-size: var(--fs-content)
 
 .footnote
-  --fsp: $fs-13
-  font-size: var(--fsp)
+  --fs-content: $fs-13
+  font-size: var(--fs-content)
 
 .widgets
   .post-title