hexo-theme-stellar 1.32.1 → 1.32.3

package/scripts/tags/lib/banner.js

@@ -14,7 +14,7 @@ module.exports = ctx => function(args, content) {
   var el = ''
   el += `<div class="tag-plugin banner">`
   // bg
-  el += `<img class="bg" src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  el += `<img class="lazy bg" data-src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
   // content
   el += `<div class="content">`
   // content.top

package/scripts/tags/lib/chat.js

@@ -110,11 +110,7 @@ module.exports = ctx => function(args, content) {
 
   function loadIcon(url) {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
-    } else {
-      el += '<div class="img" style="background-image:url(&quot;' + ctx.theme.config.default.link + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
     return el
   }
 

package/scripts/tags/lib/friends.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = `<div class="tag-plugin ${args.posts ? 'users-posts-wrap' : 'users-wrap'}">`
   if (api) {
-    el += `<div class="ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
+    el += `<div class="data-service ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += '<div class="grid-box">'
@@ -27,7 +27,10 @@ module.exports = ctx => function(args) {
       if (item?.url && item?.title) {
         el += `<div class="grid-cell user-card">`
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img 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-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}&quot;);"></div>`
+        el += `</div>`
         el += `<div class="name">`
         el += `<span>${item.title}</span>`
         el += `</div>`

package/scripts/tags/lib/gallery.js

@@ -17,13 +17,14 @@
 
 var index = 0
 
-function img(src, alt) {
+function img(src, alt, loading) {
   let img = ''
-  img += `<img data-fancybox="gallery-${index}" src="${src}"`
+  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>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -54,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">${img(src, alt)}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/image.js

@@ -38,11 +38,11 @@ module.exports = ctx => function(args) {
   }
 
   function img(src, alt, style) {
-    let img = ''
-    img += `<img src="${src}" data-src="${src}"`
     let a = '<a data-fancybox'
+    let img = ''
+    img += `<img class="lazy" src="${src}" data-src="${src}"`
     if (alt) {
-      img += ' alt="' + alt + '"'
+      img += ` alt="${alt}"`
       a += ` data-caption="${alt}"`
     }
     if (fancybox && !fancyboxHref) {
@@ -53,12 +53,12 @@ module.exports = ctx => function(args) {
     }
     img += `onerror="this.src=&quot;${ctx.theme.config.default.image_onerror}&quot;"`
     img += '/>'
-
+    // loading
+    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a
     }
-
     return img
   }
 

package/scripts/tags/lib/link.js

@@ -45,11 +45,7 @@ module.exports = ctx => function(args) {
 
   function loadIcon() {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
-    } else {
-      el += '<div class="lazy img" style="background-image:url(&quot;' + (args.icon || ctx.theme.config.default.link) + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
     return el
   }
   function loadTitle() {

package/scripts/tags/lib/md.js

@@ -15,6 +15,6 @@ module.exports = ctx => function(args) {
   args = ctx.args.map(args, [''], ['src'])
   const md_id = "md_" + ++md_index
   return `
-  <div class="ds-mdrender" src="${args.src}" id="${md_id}"></div>
+  <div class="data-service ds-mdrender" src="${args.src}" id="${md_id}"></div>
   `
 }

package/scripts/tags/lib/posters.js

@@ -11,7 +11,7 @@ module.exports = ctx => function(args) {
   var args = ctx.args.map(args, ['repo', 'api', 'size'], ['group'])
   const host = ctx.theme.config.api_host.ghraw
   if (args.size == null) {
-    args.size = 'm'
+    args.size = 'xs'
   }
   var api
   if (args.api) {
@@ -23,15 +23,16 @@ module.exports = ctx => function(args) {
   var el = ''
   el += `<div class="tag-plugin posters-wrap">`
   if (api) {
-    el += `<div class="ds-friends" 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" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" 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(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell poster-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img 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 += `<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="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = '<div class="tag-plugin sites-wrap">'
   if (api) {
-    el += '<div class="ds-sites"'
+    el += '<div class="data-service ds-sites"'
     el += ' api="' + api + '"'
     el += '>'
     el += '<div class="grid-box"></div>'
@@ -31,9 +31,15 @@ module.exports = ctx => function(args) {
       if (item?.url && item?.title) {
         el += `<div class="grid-cell site-card">`
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img 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-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>`
         el += `<div class="info">`
-        el += `<img 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-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>`
         el += `<span class="title">${item.title}</span>`
         el += `<span class="desc">${item.description || item.url}</span>`
         el += `</div>`

package/scripts/tags/lib/timeline.js

@@ -41,7 +41,7 @@ module.exports = ctx => function(args, content = '') {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
-    el += `<div class="tag-plugin timeline ds-${args.type}"`
+    el += `<div class="tag-plugin timeline data-service ds-${args.type}"`
     el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {

package/source/css/_common/base.styl

@@ -8,9 +8,9 @@ pre
 
 a
   text-decoration: none
-  color: var(--theme-link)
+  color: var(--link)
   &:hover
-    color: $color-hover
+    color: var(--accent)
 
 .md-text p:not([class]) 
   text-align: convert(hexo-config('style.text-align'))
@@ -64,6 +64,3 @@ table:not([class])
       word-break: keep-all
       white-space:nowrap
 
-
-*[ff=title]
-  font-family: $ff-logo

package/source/css/_common/blockquote.styl

@@ -18,4 +18,4 @@ blockquote
     opacity: 0.5
     background: var(--text-meta)
   &:hover:before
-    background: $color-theme
+    background: var(--theme)

package/source/css/_common/blur.styl

@@ -1,15 +1,15 @@
 :root
   --blur-px: 12px
-  --blur-bg: var(--alpha50)
-
+  --blur-bg: var(--bg-a50)
+  --blur-sat: 300%
 blur-effect()
-  background: var(--blur-bg)
+  background-color: var(--blur-bg)
   @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-    background: var(--blur-bg) !important
-    backdrop-filter: saturate(300%) blur(var(--blur-px))
-    -webkit-backdrop-filter: saturate(300%) blur(var(--blur-px))
+    background-color: var(--blur-bg) !important
+    backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
   &:hover
-    background: var(--card)
+    background-color: var(--card)
 
 .blur
   blur-effect()

package/source/css/_common/button.styl

@@ -13,10 +13,10 @@ a.button
   font-size: $fs-15
   user-select: none
   &.theme
-    background: $color-theme
+    background: var(--theme)
     color: var(--card)
     &:hover
-      background: $color-hover
+      background: var(--accent)
   &.start
     border-radius: 100px
     background: var(--text-p1)

package/source/css/_common/cap.styl

@@ -8,4 +8,4 @@
   &.cyan
     color: darken($color-mac-cyan, 6)
   &.theme
-    color: darken($color-theme, 5)
+    color: var(--theme)

package/source/css/_common/device.styl

@@ -50,12 +50,12 @@
 
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
-  box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
+  box-shadow: 0 0 4px -1px var(--theme), 0 0 16px -4px var(--theme), 0 0 32px -12px var(--theme), 0 0 128px -32px var(--theme)
   &:before
-    background: var(--alpha50)
+    background: var(--bg-a50)
 
 .l_body[leftbar] .float-panel button.leftbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -68,7 +68,7 @@
   display: none !important
 
 .l_body[rightbar] .float-panel button.rightbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3

package/source/css/_common/highlight.styl

@@ -11,6 +11,7 @@ p>code:not([class]),li>code:not([class])
   color: var(--text-code)
 
 .md-text .highlight, pre:not([class]):has(>code)
+  --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
   overflow: hidden
@@ -81,6 +82,7 @@ p>code:not([class]),li>code:not([class])
     border-radius: $border-card
     overflow: hidden
   .gist-data
+    --bgColor-default: var(--block)
     border-bottom: 1px solid var(--block-border)
   .highlight
     display: inherit

package/source/css/_common/html.styl

@@ -9,7 +9,7 @@ html
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body
-  background: var(--site-bg)
+  background: var(--background)
   margin: 0
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale

package/source/css/_common/svg.styl

@@ -6,4 +6,4 @@ svg.icon
   overflow: hidden
 
 svg.active-icon
-  color: $color-theme
+  color: var(--theme)

package/source/css/_common/title.styl

@@ -40,4 +40,4 @@ h6
       color: inherit
       font-weight: 500
       &:hover
-        color: $color-hover
+        color: var(--accent)

package/source/css/_components/layout.styl

@@ -45,10 +45,10 @@
       max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $rightbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
-      background: var(--site-bg)
+      background: var(--background)
       overflow: auto
       scrollbar(0, 0)
-      --blur-bg: var(--alpha60)
+      --blur-bg: var(--bg-a60)
       --blur-px: 50px
   .l_body[rightbar]
     .l_right

package/source/css/_components/list.styl

@@ -187,8 +187,7 @@
     width: 96px
     max-height: 96px
     object-fit: contain
-    &:not(.lazy)
-      trans1: transform 0.75s
+    trans1: all 0.75s
 .post-list .post-card.wiki article .excerpt
   margin: 1rem .5rem
   @media screen and (min-width: 950px)

package/source/css/_components/main.styl

@@ -20,13 +20,17 @@ body>.sitebg
   right: 0
   bottom: 0
   background-size: cover
-  if hexo-config('style.site') && hexo-config('style.site.background-image')
-    background-image: convert(hexo-config('style.site.background-image'))
+  if $site-background-image
+    background-image: convert($site-background-image)
   .siteblur
     width: 100%
     height: 100%
+    --blur-px: 0
+    --blur-sat: 200%
     blur-effect()
-    if hexo-config('style.site') && hexo-config('style.site.blur-px')
+    if hexo-config('style.site.blur-sat') 
+      --blur-sat: convert(hexo-config('style.site.blur-sat'))
+    if hexo-config('style.site.blur-px')
       --blur-px: convert(hexo-config('style.site.blur-px'))
-    if hexo-config('style.site') && hexo-config('style.site.blur-bg')
+    if hexo-config('style.site.blur-bg')
       --blur-bg: convert(hexo-config('style.site.blur-bg'))

package/source/css/_components/md.styl

@@ -92,9 +92,9 @@ table a:not([class])
   background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
   &:hover
     text-decoration: none
-    color: var(--theme-link)
+    color: var(--link)
     border-radius: 4px
-    background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
+    background: linear-gradient(0deg,var(--link-a20),var(--link-a20)) no-repeat left 100%/100% 100%
   &:has(img)
     background: none
     &:hover

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

@@ -18,7 +18,7 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: $color-theme
+      background: var(--theme)
   a.post
     display: inline-flex
     align-items: baseline
@@ -33,10 +33,10 @@
       flex-shrink: 0
       color: var(--text-p4)
     &:hover
-      border-bottom: 1px solid $color-theme
+      border-bottom: 1px solid var(--theme)
       color: var(--text)
       time
-        color: $color-theme
+        color: var(--theme)
 
 
 
@@ -71,7 +71,7 @@
       color: var(--text)
       .badge
         opacity: 1
-        color: $color-theme
+        color: var(--theme)
 
 .post-list #tags
   display: flex
@@ -96,7 +96,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)

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

@@ -1,7 +1,7 @@
 .l_body[type=story] .md-text.content
   --fsp: 'calc(%s + 1px)' % $fs-body
   --gap-p: 2rem
-  div.tag-plugin,p>img
+  >div.tag-plugin,>p>img
     margin-top: 2.4rem
     margin-bottom: 2.4rem
   // 段落标题
@@ -9,13 +9,13 @@
     color: var(--text)
     line-height: 1.2
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700
@@ -30,7 +30,7 @@
       display: inline-block
       width: 12px
       height: 1.2em
-      background: $cDeepOrange
+      background: $c-accent
       transform: skewX(-20deg)
       margin: 0 0.5em
       vertical-align: top
@@ -41,7 +41,7 @@
     &:before,&:after
       position absolute
       font-size: 1.2em
-      background-color: hsla($color-theme, 0.5)
+      background-color: x-theme-alpha(0.5)
       width: 1em
       height: 1em
       content: ''
@@ -51,9 +51,9 @@
       vertical-align: middle
     &:before
       margin-left: -1em
-      svg-mask-icon($h3Left)
+      svg-mask-icon($iH3Left)
     &:after
-      svg-mask-icon($h3Right)
+      svg-mask-icon($iH3Right)
 
   h4:not([class])
     position: relative
@@ -64,7 +64,7 @@
       height: 32px
       margin-left: -16px
       margin-top: -12px
-      background: hsla($color-theme, 0.3)
+      background: x-theme-alpha(0.3)
       border-radius: 50%
       --blur-px: 8px
       filter: blur(var(--blur-px))
@@ -73,7 +73,7 @@
       trans1 all 0.5s
     &:hover:before
       --blur-px: 24px
-      background: hsla($color-theme, 1)
+      background: x-theme-alpha(1)
 
   ol,ul
     margin-left: 'calc(%s * 2)' % var(--fsp)
@@ -104,7 +104,7 @@
   &:before,&:after
     position: absolute
     font-size: 2rem
-    background-color: hsla($color-theme, 0.25)
+    background-color: x-theme-alpha(0.25)
     top: -0.3em
     width: 1em
     height: 1em
@@ -123,7 +123,7 @@
     text-indent: 2em
   &:hover
     &:before,&:after
-      background-color: hsla($color-theme, 0.5)
+      background-color: x-theme-alpha(0.5)
 
 
 .l_body[type=story] .article.banner .content .bottom.only-title

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

@@ -3,13 +3,13 @@
     color: var(--text)
     line-height: 1.8
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700

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

@@ -21,7 +21,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)
@@ -40,7 +40,7 @@
   justify-content: end
   align-items: center
   &:hover
-    color: $color-theme
+    color: var(--theme)
 
 .widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
   display: inline-block

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

@@ -10,24 +10,19 @@
       background: var(--block-border)
 
 .page-footer .sitemap
-  margin: .5rem -4px 2rem
-  display: grid
-  scrollbar-width: none
+  margin: .5rem -4px
   grid-gap: 1rem 1rem
-  grid-auto-flow: column dense
-  // grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
-  grid-template-columns: repeat(4, 1fr)
-  overflow: scroll
   scrollbar(0, 0)
-
+  column-count: 4
 
 .page-footer .sitemap .sitemap-group
+  break-inside: avoid
   display: flex
   flex-direction: column
   align-items: flex-start
+  padding-bottom: 1rem
   >span,>a
     text-decoration: none
-    txt-ellipsis()
     padding: 4px
   >span
     font-weight: 500
@@ -36,6 +31,7 @@
 
 
 .page-footer .text
+  margin-top: .5rem
   p
     margin: 4px 0
     line-height: 1.5

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

@@ -35,11 +35,11 @@
     z-index: 1
     trans1 all
     &:hover
-      background: var(--alpha100)
+      background: var(--bg-a100)
     &.active, &:hover
       color: var(--text)
     &.active
-      background: var(--alpha60)
+      background: var(--bg-a60)
       @media (prefers-color-scheme: dark)
         background: rgba(white, 0.25)
       box-shadow: $boxshadow-button

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

@@ -49,11 +49,11 @@ article.md-text.content+.related-wrap
       -webkit-line-clamp: 2
     &.active
       .title
-        border-bottom: 1px dashed $color-theme
+        border-bottom: 1px dashed var(--theme)
     &:hover
       .title
-        color: $color-hover
-        border-bottom: 1px solid $color-hover
+        color: var(--accent)
+        border-bottom: 1px solid var(--accent)
 
 
 .related-wrap#read-next
@@ -76,7 +76,7 @@ article.md-text.content+.related-wrap
       color: var(--text-p1)
       font-size: $fsh5
       &:hover
-        color: $color-hover !important
+        color: var(--accent) !important
     #next
       text-align: right
 .wiki+.related-wrap#read-next
@@ -94,8 +94,8 @@ article.md-text.content+.related-wrap
       margin: 0
       font-size: inherit
       a
-        --theme-link: $color-theme
-        --theme-link-opa: rgba($color-theme, 0.2)
+        --link: var(--theme)
+        --link-a20: x-theme-alpha(0.2)
   .cmt-body
     min-height: 150px
     position: relative