hexo-theme-stellar 1.22.0 → 1.23.0

package/scripts/events/lib/doc_tree.js

@@ -59,7 +59,7 @@ module.exports = ctx => {
   const wiki_pages = pages.filter(p => (p.layout === 'wiki')).map(p => new WikiPage(p))
   const wiki_list = Object.keys(wiki.tree)
   // 上架的项目列表
-  wiki.shelf = ctx.locals.get('data').wiki
+  wiki.shelf = ctx.locals.get('data').wiki || []
   
   // 数据整合：项目标签
   var all_tag_name = []
@@ -202,7 +202,6 @@ module.exports = ctx => {
 
   wiki.all_tags = all_tags
   wiki.all_pages = wiki_pages
-  wiki.shelf = ctx.locals.get('data').wiki
   ctx.theme.config.wiki = wiki
 
 }

package/scripts/events/lib/links.js

@@ -0,0 +1,17 @@
+/**
+ * links.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+'use strict';
+
+module.exports = ctx => {
+  var allLinks = {}
+  const data = ctx.locals.get('data')
+  for (let key of Object.keys(data)) {
+    if (key.startsWith('links/')) {
+      let newKey = key.replace('links/', '')
+      allLinks[newKey] = data[key]
+    }
+  }
+  ctx.theme.config.links = allLinks
+}

package/scripts/filters/index.js

@@ -2,16 +2,3 @@
 
 hexo.extend.filter.register('after_render:html', require('./lib/img_lazyload').processSite);
 hexo.extend.filter.register('after_render:html', require('./lib/img_onerror').processSite);
-
-function change_image(data) {
-    if (this.theme.config.tag_plugins.image.parse_markdown) {
-      data.content = data.content.replace(
-          /!\[(.*?)\]\((.*?)\s*(?:"(.*?)")?\)/g,
-          '{% image $2 $3 %}'
-      );
-    }
-    return data;
-}
-
-
-hexo.extend.filter.register('before_post_render', change_image, 9);

package/scripts/generators/author.js

@@ -0,0 +1,22 @@
+/**
+ * author v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+hexo.extend.generator.register('author', function (locals) {
+  const { authors } = hexo.theme.config
+  var pages = []
+  for (let key of Object.keys(authors)) {
+    const author = authors[key]
+    if (author.hidden) {
+      continue
+    }
+    pages.push({
+      path: author.path,
+      layout: ['archive'],
+      data: {
+        'author': author
+      }
+    })
+  }
+  return pages
+});

package/scripts/tags/index.js

@@ -16,6 +16,8 @@ hexo.extend.tag.register('banner', require('./lib/banner')(hexo), true)
 // data
 hexo.extend.tag.register('users', require('./lib/friends')(hexo))
 hexo.extend.tag.register('friends', require('./lib/friends')(hexo))
+hexo.extend.tag.register('albums', require('./lib/albums')(hexo))
+hexo.extend.tag.register('posters', require('./lib/posters')(hexo))
 hexo.extend.tag.register('sites', require('./lib/sites')(hexo))
 hexo.extend.tag.register('ghcard', require('./lib/ghcard')(hexo))
 hexo.extend.tag.register('toc', require('./lib/toc')(hexo))

package/scripts/tags/lib/albums.js

@@ -0,0 +1,47 @@
+/**
+ * albums.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% albums [group] [repo:owner/repo] [api:http] [size:s/m/l/xl/mix] %}
+ */
+
+'use strict'
+
+module.exports = ctx => function(args) {
+  var args = ctx.args.map(args, ['repo', 'api', 'size'], ['group'])
+  if (args.size == null) {
+    args.size = 's'
+  }
+  var api
+  if (args.api) {
+    api = args.api
+  } else if (args.repo) {
+    api = 'https://api.vlts.cc/output_data/v2/' + args.repo
+  }
+  
+  var el = ''
+  el += `<div class="tag-plugin albums-wrap">`
+  if (api) {
+    el += `<div class="stellar-friends-api" 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="square" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
+    for (let item of (links[args.group] || [])) {
+      if (item?.url) {
+        el += `<div class="grid-cell album-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.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="image-meta">`
+        if (item.title) {
+          el += `<span class="image-caption">${item.title}</span>`
+        }
+        el += `</div>`
+        el += `</a>`
+        el += `</div>`
+      }
+    }
+    el += `</div>`
+  }
+  el += `</div>`
+  return el
+}

package/scripts/tags/lib/copy.js

@@ -12,7 +12,7 @@
 var copy_index = 0
 
 module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['width', 'git'], ['text'])
+  args = ctx.args.map(args, ['git', 'prefix'], ['text'])
   if (args == undefined || args.text == undefined) {
     return ''
   }
@@ -31,19 +31,17 @@ module.exports = ctx => function(args) {
   }
 
   const copy_id = 'copy_' + ++copy_index
+  const toast = ctx.theme.config.tag_plugins.copy.toast
 
-  var el = ''
-  el += '<div class="tag-plugin copy"'
-  if (args.width) {
-    el += ' width="' + args.width + '"'
+  var el = ``
+  el += `<div class="tag-plugin copy">`
+  if (args.prefix?.length > 0) {
+    el += `<span>${args.prefix}</span>`
   }
-  el += '>'
-  el += '<input class="copy-area" readonly id="' + copy_id + '"'
-  el += ' value="' + text + '">'
-  el += '<button class="copy-btn" onclick="util.copy(&quot;' + copy_id + '&quot;,&quot;Copied!&quot;)">'
-  el += '<svg class="icon copy-btn" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>'
-  el += '</button>'
-
-  el += '</div>'
+  el += `<input class="copy-area" id="${copy_id}" value="${text}">`
+  el += `<button class="copy-btn" onclick="util.copy(&quot;${copy_id}&quot;,&quot;${toast}&quot;)">`
+  el += `<svg class="icon copy-btn" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>`
+  el += `</button>`
+  el += `</div>`
   return el
 }

package/scripts/tags/lib/friends.js

@@ -9,10 +9,6 @@
 
 module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['repo', 'api'], ['group'])
-  var links = ctx.locals.get('data').links
-  if (links == undefined) {
-    links = {}
-  }
   var api
   if (args.api) {
     api = args.api
@@ -22,29 +18,22 @@ module.exports = ctx => function(args) {
   
   var el = '<div class="tag-plugin users-wrap">'
   if (api) {
-    el += '<div class="stellar-friends-api"'
-    el += ' api="' + api + '"'
-    el += '>'
-    el += '<div class="group-body"></div>'
-    el += '</div>'
+    el += `<div class="stellar-friends-api" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
   } else if (args.group) {
-    function cell(item) {
-      if (item.url && item.title) {
-        var cell = '<div class="user-card">'
-        cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">'
-        cell += '<img src="' + (item.avatar || ctx.theme.config.default.avatar) + '" onerror="javascript:this.removeAttribute(&quotdata-src&quot)this.src=&quot' + ctx.theme.config.default.avatar + '&quot"/>'
-        cell += '<div class="name"><span>' + item.title + '</span></div>'
-        cell += '</a></div>'
-        return cell
-      } else {
-        return ''
+    const links = ctx.theme.config.links || {}
+    el += '<div class="grid-box">'
+    for (let item of (links[args.group] || [])) {
+      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="name">`
+        el += `<span>${item.title}</span>`
+        el += `</div>`
+        el += `</a>`
+        el += `</div>`
       }
     }
-    el += '<div class="group-body">'
-    const items = links[args.group] || []
-    items.forEach((item, i) => {
-      el += cell(item)
-    })
     el += '</div>'
   }
   

package/scripts/tags/lib/gallery.js

@@ -33,9 +33,6 @@ function img(src, alt) {
 
 module.exports = ctx => function(args, content) {
   args = ctx.args.map(args, ['layout', 'size', 'ratio'])
-  if (args.layout == null) {
-    args.layout = ctx.theme.config.tag_plugins.gallery.layout
-  }
   if (args.size == null) {
     args.size = ctx.theme.config.tag_plugins.gallery.size
   }
@@ -43,14 +40,18 @@ module.exports = ctx => function(args, content) {
     args.ratio = ctx.theme.config.tag_plugins.gallery.ratio
   }
   var el = ''
-  el += `<div class="tag-plugin gallery" ${ctx.args.joinTags(args, ['layout', 'size', 'ratio']).join(' ')}>`
+  var layoutType = 'grid'
+  if (args.layout == 'flow') {
+    layoutType = 'flow'
+  }
+  el += `<div class="tag-plugin gallery fancybox ${layoutType}-box" ${ctx.args.joinTags(args, ['size', 'ratio']).join(' ')}>`
   const img_mds = content.split('\n').filter(item => item.trim().length > 0)
   for (let md of img_mds) {
     const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="cell">${img(src, alt)}</div>`
+      el += `<div class="${layoutType}-cell">${img(src, alt)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/posters.js

@@ -0,0 +1,47 @@
+/**
+ * posters.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% posters [group] [repo:owner/repo] [api:http] [size:s/m/l/xl/mix] %}
+ */
+
+'use strict'
+
+module.exports = ctx => function(args) {
+  var args = ctx.args.map(args, ['repo', 'api', 'size'], ['group'])
+  if (args.size == null) {
+    args.size = 'm'
+  }
+  var api
+  if (args.api) {
+    api = args.api
+  } else if (args.repo) {
+    api = 'https://api.vlts.cc/output_data/v2/' + args.repo
+  }
+  
+  var el = ''
+  el += `<div class="tag-plugin posters-wrap">`
+  if (api) {
+    el += `<div class="stellar-friends-api" 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.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="image-meta">`
+        if (item.title) {
+          el += `<span class="image-caption">${item.title}</span>`
+        }
+        el += `</div>`
+        el += `</a>`
+        el += `</div>`
+      }
+    }
+    el += `</div>`
+  }
+  el += `</div>`
+  return el
+}

package/scripts/tags/lib/sites.js

@@ -9,10 +9,6 @@
 
 module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['repo', 'api'], ['group'])
-  var links = ctx.locals.get('data').links
-  if (links == undefined) {
-    links = {}
-  }
   var api
   if (args.api) {
     api = args.api
@@ -25,30 +21,25 @@ module.exports = ctx => function(args) {
     el += '<div class="stellar-sites-api"'
     el += ' api="' + api + '"'
     el += '>'
-    el += '<div class="group-body"></div>'
+    el += '<div class="grid-box"></div>'
     el += '</div>'
   } else if (args.group) {
-    function cell(item) {
-      if (item.url && item.title) {
-        var cell = '<div class="site-card">'
-        cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">'
-        cell += '<img src="' + (item.screenshot || ('https://api.vlts.cc/screenshot?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + ctx.theme.config.default.cover + '&quot;;"/>'
-        cell += '<div class="info">'
-        cell += '<img src="' + (item.avatar || ctx.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + ctx.theme.config.default.link + '&quot;;"/>'
-        cell += '<span class="title">' + item.title + '</span>'
-        cell += '<span class="desc">' + (item.description || item.url) + '</span>'
-        cell += '</div>'
-        cell += '</a></div>'
-        return cell
-      } else {
-        return ''
+    const links = ctx.theme.config.links || {}
+    el += '<div class="grid-box">'
+    for (let item of (links[args.group] || [])) {
+      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.screenshot || ('https://api.vlts.cc/screenshot?url=' + item.url + '&width=1280&height=720')}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        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 += `<span class="title">${item.title}</span>`
+        el += `<span class="desc">${item.description || item.url}</span>`
+        el += `</div>`
+        el += `</a>`
+        el += `</div>`
       }
     }
-    el += '<div class="group-body">'
-    const items = links[args.group] || []
-    items.forEach((item, i) => {
-      el += cell(item)
-    })
     el += '</div>'
   }
 

package/scripts/tags/lib/swiper.js

@@ -22,7 +22,7 @@ module.exports = ctx => function(args, content) {
       })
     }
   }
-  el += '<div class="tag-plugin swiper" id="swiper-api"'
+  el += '<div class="tag-plugin swiper fancybox" id="swiper-api"'
   el += ' ' + ctx.args.joinTags(args, ['width', 'effect']).join(' ')
   el += '>'
   el += '<div class="swiper-wrapper">'

package/source/css/_common/toast.styl

@@ -1,16 +1,36 @@
 div.toast
   max-width: 60%
-  padding: 1rem 3rem
+  padding: 1rem 2rem
   line-height: 1.5
   color: var(--text-p1)
   font-weight: 500
   text-align: center
-  border-radius: $border-card
+  border-radius: 8px
   background: var(--card)
   position: fixed
-  top: 50%
   left: 50%
-  transform: translate(-50%, -50%)
+  top: 32px
+  transform: translateX(-50%)
   z-index: 9
   disable-select()
-  box-shadow: $boxshadow-float
+  box-shadow: $boxshadow-toast
+  visibility: hidden
+
+  &.show
+    visibility: visible
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2s
+    animation: fadein 0.5s, fadeout 0.5s 2s
+
+  @-webkit-keyframes fadein 
+    from {top: -64px; opacity: 0;}
+    to {top: 32px; opacity: 1;}
+  @keyframes fadein
+    from {top: -64px; opacity: 0;}
+    to {top: 32px; opacity: 1;}
+
+  @-webkit-keyframes fadeout
+    from {top: 32px; opacity: 1;}
+    to {top: -64px; opacity: 0;}
+  @keyframes fadeout
+    from {top: 32px; opacity: 1;}
+    to {top: -64px; opacity: 0;}

package/source/css/_custom.styl

@@ -89,6 +89,7 @@ $border-button = 4px
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
-$boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
+$boxshadow-card-float = 0 12px 16px -4px rgba(0, 0, 0, 0.2)
 $boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
 $boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)
+$boxshadow-toast = 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.2)

package/source/css/_defines/func.styl

@@ -97,3 +97,14 @@ hover-block($v, $h, $br = 4px)
   trans2 color background
   &:hover
     background: var(--block-hover)
+
+floatable-trans()
+  trans2 transform box-shadow
+floatable-float()
+  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
+  transform: translate3d(0, -2px, 0)
+
+hover-float()
+  floatable-trans()
+  &:hover
+    floatable-float()

package/source/css/_defines/theme.styl

@@ -21,7 +21,7 @@ set_text_dark()
   --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
   --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
   --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
-  --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1)
+  --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
 set_text_light()
   --text-p0: hsl($color-text-h, $color-text-s, 100)
@@ -30,7 +30,7 @@ set_text_light()
   --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
   --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
   --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
-  --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1.25)
+  --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
 
 :root
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)

package/source/css/_layout/list.styl

@@ -54,7 +54,6 @@
         height: 1.5em
 
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
   img 
     transform: scale(1.02)
     filter: brightness(80%)
@@ -165,10 +164,15 @@
     line-height: 1
     margin-bottom: 0.75rem
   .cap
+    --theme-block: var(--block)
     background: var(--theme-block)
     padding: 2px 4px
     border-radius: 2px
   p:last-child
     margin-bottom: 0
   .cap+.cap
-    margin-left: 4px
+    margin-left: 4px
+
+.post-list.archives
+  @media screen and (max-width: $device-mobile)
+    margin: 1rem 0

package/source/css/_layout/main.styl

@@ -12,3 +12,7 @@
     margin: 2rem 1rem 1rem
     .logo-wrap
       margin: 0
+
+.l_main.list
+  @media screen and (max-width: $device-mobile-max)
+    padding-top: 0

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

@@ -24,14 +24,18 @@
     align-items: baseline
     margin: 0.25rem 0
     color: var(--text-p1)
-    &:hover
-      color: $color-hover
+    trans2 color border
+    border-bottom: 1px dashed var(--text-meta)
     time
       font-family: $ff-code
       margin-right: 1em
       font-weight: 700
       flex-shrink: 0
-      opacity .5
+      color: var(--text-p4)
+    &:hover
+      border-bottom: 1px solid $color-theme
+      time
+        color: $color-theme
   &:hover
     .archive-header
       color: var(--text-p1)

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

@@ -19,13 +19,11 @@
       color: $color-hover
   div#post-meta
     margin-top: 2px
-    span+span
-      margin-left: 8px
+    span.updated
       visibility: hidden
   &:hover
-    div#post-meta
-      span+span
-        visibility: visible
+    div#post-meta span.updated
+      visibility: visible
 
 .bread-nav .ghrepo
   font-size: $fs-13

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

@@ -24,11 +24,11 @@ nav.cap
   >p
     margin: 0
   a
-    padding: .25rem 1rem
-    margin: 10px 0 8px 0
+    padding: .25rem 0.75rem
+    margin: 10px 0.25rem 8px 0.25rem
     line-height: 2
     color: var(--text-p3)
-    border-radius: 4px
+    border-radius: $border-button
     font-weight: 500
     white-space: nowrap
     position: relative
@@ -37,8 +37,8 @@ nav.cap
       height: 2px
       position: absolute
       bottom: -8px
-      left: 1rem
-      right: 1rem
+      left: 0.75rem
+      right: 0.75rem
       background: $color-theme
       border-radius: 2px
       pointer-events: none

package/source/css/_layout/tag-plugins/banner.styl

@@ -6,7 +6,6 @@
   flex-direction: column
   justify-content: flex-end
   align-items: flex-start
-  color: white
   height: 240px
   @media screen and (max-width: $device-mobile-max)
     height: 200px
@@ -37,12 +36,12 @@
           background: none
           line-height: 1.5
           font-size: $fs-15
-          &:hover
-            color: white
-            background: rgba(black, 0.5)
           &.active
             color: white
             background: rgba(white, 0.25)
+          &:hover
+            color: white
+            background: rgba(black, 0.5) !important
       .back
         background: none
         padding: 0
@@ -78,14 +77,11 @@
     border-radius: 50%
     width: 48px
     height: 48px
-    border: 2px solid white
   .bottom
     display: flex
     padding: 1rem
     width: 100%
     box-sizing: border-box
-    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
-    text-shadow: 0 0 1px rgba(0,0,0,0.12)
     .title
       font-size: 1.5rem
       font-weight: 600
@@ -99,9 +95,27 @@
       font-size: 1.2rem
     .subtitle
       font-size: $fs-14
+  .content:only-child
+    color: var(--text-p1)
+  .bg+.content 
+    color: white
+    .avatar
+      border: 2px solid white
+    .bottom
+      background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
+      text-shadow: 0 0 1px rgba(0,0,0,0.12)
 
 .tag-plugin.banner
   trans1(transform, 2s)
   &:hover
     img.bg
-     transform: scale(1.01)
+     transform: scale(1.01)
+
+.l_main.list .tag-plugin.banner
+  background: var(--block-hover)
+  .content .top
+    margin-top: 1.5rem
+  margin: 0 1rem
+  @media screen and (max-width: $device-mobile)
+    margin: 0
+    border-radius: 0