hexo-theme-stellar 1.30.1 → 1.30.2

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.30.1'
+  version: '1.30.2'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css
@@ -10,7 +10,7 @@ stellar:
 ######## head tags ########
 preconnect:
   # - https://gcore.jsdelivr.net
-  # - https://cdn.jsdelivr.net
+  # - https://gcore.jsdelivr.net
   # - https://unpkg.com
 
 open_graph:
@@ -174,6 +174,8 @@ article:
   auto_cover: false # search from https://source.unsplash.com/
   # 封面图宽高比
   cover_ratio: 2
+  # 文章内横幅宽高比
+  banner_ratio: 2.5
   # 如果没有指定横幅，是否根据 tags 作为关键词搜索横幅图片？
   auto_banner: false # search from https://source.unsplash.com/
   # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？
@@ -252,15 +254,15 @@ comments:
   # Twikoo
   # https://twikoo.js.org/
   twikoo:
-    js: https://gcore.jsdelivr.net/npm/twikoo@1.6.8/dist/twikoo.all.min.js # 建议锁定版本
+    js: https://gcore.jsdelivr.net/npm/twikoo@1.6/dist/twikoo.all.min.js # 建议锁定版本
     envId: https://xxx # vercel函数
 
   # Waline
   # https://waline.js.org/
   waline:
-    js: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline.js
-    css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline.css
-    meta_css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline-meta.css
+    js: https://gcore.jsdelivr.net/npm/@waline/client@3.1/dist/waline.js
+    css: https://gcore.jsdelivr.net/npm/@waline/client@3.1/dist/waline.css
+    meta_css: https://gcore.jsdelivr.net/npm/@waline/client@3.1/dist/waline-meta.css
     # Waline server address url, you should set this to your own link
     serverURL: https://waline.vercel.app
     # If false, comment count will only be displayed in post page, not in home page
@@ -300,8 +302,8 @@ comments:
   # Artalk
   # https://artalk.js.org/
   artalk:
-    css: https://unpkg.com/artalk@2.8.5/dist/Artalk.css
-    js: https://unpkg.com/artalk@2.8.5/dist/Artalk.js
+    css: https://unpkg.com/artalk@2.8/dist/Artalk.css
+    js: https://unpkg.com/artalk@2.8/dist/Artalk.js
     server: # 后端服务地址
     placeholder: ''
     darkMode: auto
@@ -392,7 +394,7 @@ tag_plugins:
   # {% hashtag %}
   hashtag:
     default_color: # red, orange, yellow, green, cyan, blue, purple
-  # {% okr o1 percent:0.5 status:normal %}
+  # {% okr o1 percent:50 status:in_track/at_risk/off_track/finished/unfinished %}
   okr:
     border: true # 是否显示边框
     status: # 可以自行增加
@@ -424,8 +426,8 @@ tag_plugins:
 
 # 基础依赖
 dependencies:
-  jquery: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
-  marked: https://cdn.jsdelivr.net/npm/marked@13.0.1/lib/marked.umd.min.js
+  jquery: https://gcore.jsdelivr.net/npm/jquery@3.7/dist/jquery.min.js
+  marked: https://gcore.jsdelivr.net/npm/marked@13.0/lib/marked.umd.min.js
 
 
 # 内置服务，按需加载（页面内用到了就会加载，没有用到就不会加载）
@@ -488,13 +490,13 @@ plugins:
   preload:
     enable: true
     service: flying_pages # flying_pages
-    flying_pages: https://cdn.jsdelivr.net/npm/flying-pages@2/flying-pages.min.js
+    flying_pages: https://gcore.jsdelivr.net/npm/flying-pages@2/flying-pages.min.js
 
   # lazyload
   # https://www.npmjs.com/package/vanilla-lazyload
   lazyload:
     enable: true # [hexo clean && hexo s] is required after changing this value.
-    js: https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js
+    js: https://gcore.jsdelivr.net/npm/vanilla-lazyload@19.1/dist/lazyload.min.js
     transition: fade # blur, fade
 
   # https://fancyapps.com/docs/ui/fancybox/
@@ -502,8 +504,8 @@ plugins:
   fancybox:
     enable: true
     loader: /js/plugins/fancybox-loader.js
-    js: https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js
-    css: https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css
+    js: https://gcore.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js
+    css: https://gcore.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css
     # 让 md 语法图片支持放大可以这样写: .md-text img:not([class]), .md-text .image img
     # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
     # 使用 twikoo 评论可以写: .tk-content img:not([class*="emo"])
@@ -513,13 +515,13 @@ plugins:
   # swiper
   swiper:
     enable: true
-    css: https://unpkg.com/swiper@10.3.1/swiper-bundle.min.css
-    js: https://unpkg.com/swiper@10.3.1/swiper-bundle.min.js
+    css: https://unpkg.com/swiper@10.3/swiper-bundle.min.css
+    js: https://unpkg.com/swiper@10.3/swiper-bundle.min.js
 
   # https://scrollrevealjs.org/api/reveal.html
   scrollreveal:
     enable: #true
-    js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.9/dist/scrollreveal.min.js
+    js: https://gcore.jsdelivr.net/npm/scrollreveal@4.0/dist/scrollreveal.min.js
     distance: 16px
     duration: 800 # ms
     interval: 100 # ms
@@ -552,7 +554,7 @@ plugins:
   katex:
     enable: #true # hexo-renderer-markdown-it-plus 默认开启 katex，此选项仅用于引入样式
     inject: |
-      <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
+      <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/katex@0.16/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
   
   # MathJax
   # 需在Markdown文件开头加入mathjax: true
@@ -574,7 +576,7 @@ plugins:
     enable: # true # 可以在特定文章的 front-matter 中设置 mermaid: true 来开启，也可以在这里设置全局开启
     style_optimization: false # use custom style in stellar
     # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
-    js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
+    js: https://gcore.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
     # Available themes: default | dark | forest | neutral
     theme: neutral
   
@@ -589,8 +591,8 @@ plugins:
   # https://github.com/sivan/heti
   heti:
     enable: false # 此插件会和代码块冲突，仅适用于纯中文博主。
-    css: https://unpkg.com/heti@0.9.2/umd/heti.min.css
-    js: https://unpkg.com/heti@0.9.2/umd/heti-addon.min.js
+    css: https://unpkg.com/heti@0.9/umd/heti.min.css
+    js: https://unpkg.com/heti@0.9/umd/heti-addon.min.js
 
 
 
@@ -611,8 +613,9 @@ style:
   prefix:
     h2: https://api.iconify.design/ci:heading-h2.svg
   border-radius:
-    card-l: 16px # 侧边栏、文章横幅位置的圆角
-    card: 12px # 文章内大部分卡片的圆角
+    card-l: 24px # 侧边栏、文章横幅位置的圆角
+    card: 16px # 文章内大部分卡片的圆角
+    card-s: 12px # 文章内小型卡片的圆角
     bar: 8px # 横条类元素的圆角
     image: 12px # 图片圆角
   color:
@@ -631,7 +634,7 @@ style:
     background: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/rainbow64@3x.webp
   codeblock:
     scrollbar: 4px
-    highlightjs_theme: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/atom-one-dark.min.css
+    highlightjs_theme: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/atom-one-dark.min.css
   loading:
     loading: 正在加载
     error: 加载失败，请稍后重试。

package/layout/_partial/main/article/article_footer.ejs

@@ -14,7 +14,7 @@ function layoutDiv() {
   if (item.length === 0) {
     return el;
   }
-  el += `<div class="article-footer${scrollreveal(' ')} fs14">`
+  el += `<div class="article-footer${scrollreveal(' ')}">`
   if (page.references?.length > 0) {
     function refList() {
       var el = '';

package/layout/_partial/main/post_list/post_card.ejs

@@ -83,10 +83,11 @@ function div_default() {
         });
       }
       if (cats.length > 0) {
-        let cat = cats.shift();
-        el += '<span class="cap breadcrumb"' + category_color(cat) + '>';
+        let str = cats.join(' / ');
+        let lastCat = cats.pop();
+        el += '<span class="cap breadcrumb"' + category_color(lastCat) + '>';
         el += icon('default:category')
-        el += `<span>${cat}</span>`
+        el += `<span>${str}</span>`
         el += '</span>';
       }
     }

package/layout/_partial/scripts/utils.ejs

@@ -172,7 +172,7 @@
               status = 1;
             }
             if (response.ok) {
-              return response.json();
+              return response;
             }
             throw new Error('Network response was not ok.');
           }).then(function (data) {

package/layout/layout.ejs

@@ -46,7 +46,7 @@ if (theme.style.prefers_theme === 'auto') {
   html += `<body>`
     html += site_background
     html += partial('_partial/cover/index')
-    html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
+    html += `<div class="l_body ${page_type}" id="start" layout="${page.layout}" type="${article_type}" ${indent ? 'text-indent' : ''}>`
       html += `<aside class="l_left">`
         html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
           html += partial('_partial/sidebar/index_leftbar')

package/layout/page.ejs

@@ -50,10 +50,10 @@ function layoutDiv() {
   if (notebook) {
     el += partial('_partial/main/notebook/note_tags', { notebook: notebook })
   }
+  el += `</article>`
   if (layout === 'post' || page.wiki || notebook) {
     el += partial('_partial/main/article/article_footer')
   }
-  el += `</article>`
   if (layout === 'post' || page.wiki) {
     el += partial('_partial/main/article/read_next')
   }

package/package.json

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

package/scripts/tags/inline-labels.js

@@ -26,6 +26,9 @@ hexo.extend.tag.register('kbd', function(args) {
 hexo.extend.tag.register('psw', function(args) {
   return `<psw>${args.join(' ')}</psw>`
 })
+hexo.extend.tag.register('blur', function(args) {
+  return `<blur>${args.join(' ')}</blur>`
+})
 hexo.extend.tag.register('sup', function(args) {
   args = hexo.args.map(args, ['color'], ['text'])
   var el = ''

package/scripts/tags/lib/okr.js

@@ -1,10 +1,10 @@
 /**
- * okr.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * okr.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 
- * {% okr o1 percent:0.5 status:delay %}
+ * {% okr o1 percent:50 status:in_track/at_risk/off_track/finished/unfinished %}
  * title (only one line)
  * note
- * <!-- okr kr1 percent:1 -->
+ * <!-- okr kr1 percent:100 status:in_track/at_risk/off_track/finished/unfinished -->
  * title (only one line)
  * note
  * {% endokr %}
@@ -54,7 +54,7 @@ function generateKRList(ctx, contentArray) {
 }
 
 function layoutItem(ctx, type, index, title, note, color, label, percent) {
-  const percentStr = (percent * 100).toString().replace(/\.\d*/, '')
+  const percentStr = percent.toString().replace(/\.\d*/, '')
   return `
   <div class="okr-item ${type}" id="okr-${index.toLowerCase()}">
     <div class="okr-left">
@@ -102,7 +102,7 @@ module.exports = ctx => function(args, content = '') {
       status = statusList[krMeta.status] 
     }
     if (status == null) {
-      if (krPercent >= 1) {
+      if (krPercent >= 100) {
         status = statusList['finished']
       } else {
         status = statusList['in_track']
@@ -122,7 +122,7 @@ module.exports = ctx => function(args, content = '') {
     status = statusList[args.status] 
   }
   if (status == null) {
-    if (oPercent >= 1) {
+    if (oPercent >= 100) {
       status = statusList['finished']
     } else {
       status = statusList['in_track']

package/scripts/tags/lib/quot.js

@@ -16,17 +16,20 @@ module.exports = ctx => function (args) {
     args.el = 'p'
   }
 
-  var type = ''
-  if (args.icon || args.prefix || args.suffix) {
-    type = ' type="icon"'
-  } else {
-    type = ' type="text"'
-  }
   function content() {
-    const cfg = ctx.theme.config.tag_plugins.quot[args.icon]
+    const cfg = ctx.theme.config.tag_plugins.quot[args.icon || 'default']
     var el = ''
-    var prefix = args.prefix || cfg?.prefix
-    var suffix = args.suffix || cfg?.suffix
+    var prefix = null
+    var suffix = null
+    if (args.prefix || args.suffix) {
+      // 临时设定的样式
+      prefix = args.prefix
+      suffix = args.suffix
+    } else {
+      // yml中配置的样式
+      prefix = cfg?.prefix
+      suffix = cfg?.suffix
+    }
     if (prefix) {
       el += ctx.utils.icon(prefix, 'class="icon prefix"')
     } else {
@@ -40,18 +43,16 @@ module.exports = ctx => function (args) {
     }
     return el
   }
+  el += `<div class="tag-plugin quot ${args.el}">`
   if (args.el.includes('h')) {
-    el += '<div' + ' class="tag-plugin quot">'
-    el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>'
+    el += `<${args.el} class="content" id="${args.text}">`
     el += content()
     el += '</' + args.el + '>'
-    el += '</div>'
   } else {
-    el += '<div' + ' class="tag-plugin quot">'
-    el += '<' + args.el + ' class="content"' + type + '>'
+    el += `<${args.el} class="content">`
     el += content()
     el += '</' + args.el + '>'
-    el += '</div>'
   }
+  el += '</div>'
   return el
 }

package/source/css/_common/base.styl

@@ -29,7 +29,7 @@ li
 
 
 ul,ol
-  padding-left: 1.5rem
+  padding-left: var(--fsp)
 
 
 // table

package/source/css/_common/blockquote.styl

@@ -2,9 +2,20 @@ blockquote
   display: block
   margin-left: 0
   margin-right: 0
-  padding: 0.25rem 0.75rem
-  background: var(--block)
+  padding: 0 var(--fsp)
   $bd-left = 4px
-  border-left: $bd-left solid var(--text-meta)
-  border-radius: $bd-left $border-card $border-card $bd-left
-  color: var(--text-p2)
+  color: var(--text-p3)
+  position: relative
+  &:before
+    trans1 all
+    content: ''
+    position: absolute
+    top: 0
+    bottom: 0
+    width 4px
+    border-radius: 1px
+    left: 0
+    opacity: 0.5
+    background: var(--text-meta)
+  &:hover:before
+    background: $color-theme

package/source/css/_common/pre.styl

@@ -2,5 +2,6 @@ pre:not([class]):has(>code)
   display: block
   padding: 1rem
   overflow: auto
+  scrollbar(0,0)
   code 
     padding: 0

package/source/css/_components/list.styl

@@ -32,10 +32,13 @@
   --img-br: 100%
   --img-sat: 100%
   --blur-px: 1em
+  --blur-height: 128px
   --blur-sat: 120%
   &:hover
     --img-br: 75%
     --img-sat: 120%
+    // --blur-px: 0
+    // --blur-height: 0
     --blur-sat: 200%
   img
     filter: brightness(var(--img-br)) saturate(var(--img-sat))
@@ -115,7 +118,7 @@
       position: absolute
       left: 0
       right: 0
-      height: 128px
+      height: var(--blur-height)
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
     &[position=top]:before

package/source/css/_components/md.styl

@@ -19,26 +19,6 @@
   padding-bottom: 2rem
   overflow: hidden
 
-.l_body[text-indent] .md-text.content
-  // 应用缩进效果
-  p:not([class])
-    text-indent: 'calc(%s * 2)' % var(--fsp)
-    text-align: justify
-    a
-      text-indent: 0
-  ol,ul
-    margin-left: 0.5em
-  h1,h2,h3,h4,h5,h6
-    text-align: center
-    >a:first-child
-      display: none
-  h2
-    margin: 2em 0 1.5em
-  // 取消缩进效果
-  blockquote, .poetry, .okr, .timeline, li, .article-footer
-    p:not([class])
-      text-indent: 0
-      text-align: convert(hexo-config('style.text-align'))
 
 .md-text
   ul:not(:last-child),
@@ -68,27 +48,6 @@
 
 // titles
 .md-text.content
-  h1,h2,h3,h4,h5,h6
-    color: var(--text)
-    line-height: 1.8
-    >a:first-child
-      background: $color-theme
-      border-radius: 2px
-      margin-right: 8px
-      trans1 background
-      &:hover
-        background: $color-hover
-      &:before
-        content: ''
-        color: white
-        font-weight: 700
-        padding: 0 2px
-        font-size: $fs-12
-  h2
-    font-weight: 500
-    >a:first-child:before
-      content: ':'
-    
   blockquote, .tag-plugin
     h2,h3,h4,h5,h6
       margin-top: 0.25em
@@ -114,22 +73,21 @@
 .md-text>div
   margin: var(--gap-p) 0
 
-
+// 图片样式
 .md-text img
   border-radius: $border-image
   margin: auto
   display: block
 
+// 链接样式
 li:not([class]) a:not([class])
 p:not([class]) a:not([class])
 table a:not([class])
   position: relative
   text-decoration: none
   trans1 all
-  padding: 0 2px
   border-radius: 0
-  color: inherit
-  background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
+  background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
   &:hover
     text-decoration: none
     color: var(--theme-link)
@@ -137,6 +95,5 @@ table a:not([class])
     background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
   &:has(img)
     background: none
-    padding: 0
     &:hover
       background: none

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

@@ -0,0 +1,6 @@
+.l_body[text-indent] article.content
+  p:not([class])
+    text-indent: 'calc(%s * 2)' % var(--fsp)
+    text-align: justify
+    a
+      text-indent: 0

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

@@ -0,0 +1,120 @@
+.l_body[type=story] .md-text.content
+  --fsp: 'calc(%s + 1px)' % $fs-body
+  // 段落标题
+  h1,h2,h3,h4,h5,h6
+    color: var(--text)
+    line-height: 1.2
+    >a:first-child
+      background: $color-theme
+      border-radius: 2px
+      margin-right: 8px
+      padding: 0 2px
+      trans1 all
+      &:hover
+        background: $color-hover
+      &:before,&:after
+        color: white
+        font-weight: 700
+      &:before
+        content: ''
+        font-size: 0.5em
+      &:after
+        font-size: 0.25em
+  h2:not([class])
+    &:before,&:after
+      content: ''
+      display: inline-block
+      width: 12px
+      height: 1.2em
+      background: $cDeepOrange
+      transform: skewX(-20deg)
+      margin: 0 0.5em
+      vertical-align: top
+      position: relative
+
+  h3:not([class])
+    &:before,&:after
+      color: hsla($color-theme, 0.5)
+      margin: 0 8px
+      trans1 all
+    &:before 
+      content: '⏵'
+    &:after
+      content: '⏴'
+    &:hover
+      &:before,&:after
+        color: hsla($color-theme, 1)
+
+  h4:not([class])
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 32px
+      height: 32px
+      margin-left: -16px
+      margin-top: -12px
+      background: hsla($color-theme, 0.3)
+      border-radius: 50%
+      filter: blur(12px)
+      pointer-events: none
+      z-index: -1
+      trans1 all
+    &:hover:before
+      background: hsla($color-theme, 0.6)
+
+  ol,ul
+    margin-left: 'calc(%s * 2)' % var(--fsp)
+  h1,h2,h3,h4,h5,h6
+    text-align: center
+    margin: 2em 0 1.5em
+    >a:first-child
+      display: none
+  // 修正缩进效果
+  >blockquote
+    text-align: center
+    --inset: calc(var(--fsp) * 2)
+    margin-left: var(--inset)
+    margin-right: var(--inset)
+    background: var(--block)
+    padding: 1rem 2rem
+    border-radius: $border-card
+    &:before,&:after
+      position: absolute
+      font-size: 2rem
+      background-color: hsla($color-theme, 0.25)
+      top: -0.3em
+      width: 1em
+      height: 1em
+      content: ''
+      opacity 1
+      trans1 all
+    &:before
+      left: -0.3em
+      svg-mask-icon($iQuoteLeft)
+    &:after
+      right: -0.3em
+      svg-mask-icon($iQuoteRight)
+    p:not([class])
+      color: var(--text-p2)
+      font-size: $fs-body
+      text-indent: 2em
+    &:hover
+      &:before,&:after
+        background-color: hsla($color-theme, 0.5)
+  // 取消缩进效果
+  .poetry, .okr, .timeline, li, .article-footer
+    p:not([class])
+      text-indent: 0
+      text-align: convert(hexo-config('style.text-align'))
+
+
+
+.l_body[type=story] .article.banner .content .bottom.only-title
+  justify-content: center
+
+
+.l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
+  text-indent: 'calc(%s * 2)' % var(--fsp)
+  a
+    text-indent: 0

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

@@ -0,0 +1,35 @@
+.l_body[type='tech'] .md-text
+  h1,h2,h3,h4,h5,h6
+    color: var(--text)
+    line-height: 1.8
+    >a:first-child
+      background: $color-theme
+      border-radius: 2px
+      margin-right: 8px
+      padding: 0 2px
+      trans1 all
+      &:hover
+        background: $color-hover
+      &:before,&:after
+        color: white
+        font-weight: 700
+      &:before
+        content: ''
+        font-size: 0.5em
+      &:after
+        font-size: 0.25em
+  h2
+    font-weight: 500
+    >a:first-child
+      &:before
+        content: '⌘'
+  h3
+    >a:first-child:before
+      content: '='
+  h4
+    >a:first-child:before
+      content: '|'
+  h5
+    >a:first-child:before
+      content: ':'
+