hexo-theme-stellar 1.22.1 → 1.24.0

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/scripts/tags/lib/video.js

@@ -0,0 +1,23 @@
+/**
+ * video.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% video src %}
+ *
+ */
+
+'use strict';
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['type'], ['src'])
+  if (args.type == null) {
+    args.type = 'video/mp4'
+  }
+  return `
+  <div class="tag-plugin video">
+  <video controls preload>
+  <source src="${args.src}" type="${args.type}">Your browser does not support the video tag.
+  </video>
+  </div>
+  `
+}

package/source/css/_common/media.styl

@@ -0,0 +1,9 @@
+audio,video
+  border-radius: $border-block
+  max-width: 100%
+video
+  z-index: 1
+  box-shadow: $boxshadow-card-float
+.video
+  line-height: 0
+  text-align: center

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%)
@@ -85,22 +84,16 @@
     object-fit: cover
     width: 100%
     border-radius: 0
-    height: 280px
-    @media screen and (max-width: 900px)
-      height: 240px
-    @media screen and (max-width: $device-tablet)
-      height: 220px
-    @media screen and (max-width: $device-mobile-425)
-      height: 200px
-    @media screen and (max-width: $device-mobile-375)
-      height: 180px
-
+    aspect-ratio: hexo-config('article.cover_ratio')
+    
 .post-list .post-card.post.photo
   .cover
     position: relative
     line-height: 0
     img
       width: 100%
+      object-fit: cover
+      aspect-ratio: hexo-config('article.cover_ratio')
     .cover-info
       padding: 1.5rem 1rem
       position: absolute
@@ -165,10 +158,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/md.styl

@@ -161,3 +161,6 @@ h1.article-title
           bottom: 0
           left: -2px
           right: -2px
+      &:has(img)
+        &:before
+          content: none

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

@@ -8,7 +8,7 @@
     margin-bottom: .5em
     position: relative
     padding: 4px 0
-    color: var(--text-p3)
+    color: var(--text-p1)
     &:after
       content: ""
       position: absolute
@@ -18,25 +18,25 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: var(--block-border)
+      background: $color-theme
   a.post
     display: inline-flex
     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
-  &:hover
-    .archive-header
-      color: var(--text-p1)
-      &:after
-        background: $color-theme
+      color: var(--text-p4)
+    &:hover
+      border-bottom: 1px solid $color-theme
+      color: var(--text-p0)
+      time
+        color: $color-theme
 
 
 

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/cover.styl

@@ -21,6 +21,7 @@
     font-size: 1.5rem
     margin: 1rem 0
     line-height: 1.2
+    color: var(--text-p0)
   .description
     margin: 1rem 0
   .start-wrap

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,10 +6,9 @@
   flex-direction: column
   justify-content: flex-end
   align-items: flex-start
-  color: white
-  height: 240px
+  height: 220px
   @media screen and (max-width: $device-mobile-max)
-    height: 200px
+    height: 180px
   .bg
     z-index: 0
   .content 
@@ -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

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

@@ -2,17 +2,21 @@
   display: flex
   justify-content: space-between
   box-sizing: border-box
-  background: var(--block)
+  background: var(--card)
   border-radius: $border-bar
   border: 1px solid var(--block-border)
   overflow: hidden
-  width: 320px
-  max-width: 100%
-  &[width='max']
-    width: 100%
-  @media screen and (max-width: $device-mobile-425)
-    min-width: 100%
-
+  width: 100%
+  span
+    line-height: 3
+    padding: 0 1rem
+    background: var(--block)
+    border-right: 1px solid var(--block-border)
+    color: var(--text-p3)
+    font-family: $ff-code
+    font-size: $fs-12
+    font-weight: 700
+    flex-shrink: 0
   input.copy-area
     display: inline-block
     padding: 0
@@ -21,14 +25,13 @@
     line-height: 3
     text-indent: 1rem
   button.copy-btn
-    margin: 0
-    line-height: 3
-    border-left: 1px solid var(--block-border)
+    margin: 2px
+    border-radius: 'calc(%s - 2px)' % $border-bar
     display: inline-block
-    background: var(--block-hover)
+    background: none
     line-height: 0
     font-size: 1rem
     padding: 0 .75rem
     color: var(--text-p2)
     &:hover
-      background: var(--card)
+      background: var(--block-hover)

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

@@ -60,8 +60,14 @@ details.folding[child=codeblock]>div.body
     margin: 0
     figcaption
       display: none
+      span
+        background: var(--theme-block)
     .code:before
       content: none
+  .highlight+.highlight
+    border-top: 1px dashed var(--theme-border)
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
 details.folding[child=iframe]
   overflow: hidden

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

@@ -1,42 +1,9 @@
-.users-wrap
-  overflow: hidden
-  .group-header
-    margin: 0 0 1rem
-    p
-      margin: 0
-      font-size: $fs-14
-      &:first-child
-        font-size: 1.25rem
-        font-weight: 500
-  .group-body
-    width: 100%
-    display: flex
-    flex-wrap: wrap
-    align-items: stretch
-    &+.group-header
-      margin-top: 2rem
-  .stellar-friends-api
-    display: block
-    
+.users-wrap .grid-box
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
 
 .users-wrap .user-card
-  flex-shrink: 1
-  display: flex
-  align-items: stretch
-  width: 12.5%
-  @media screen and (max-width: 980px)
-    width: 14.28%
-  @media screen and (max-width: 900px)
-    width: 16.66%
-  @media screen and (max-width: 820px)
-    width: 20%
-  @media screen and (max-width: $device-mobile-max)
-    width: 16.66%
-  @media screen and (max-width: $device-mobile)
-    width: 25%
   .card-link
-    margin: 0
-    width: 100%
     color: var(--text-p1)
     font-size: 10px
     font-weight: 500
@@ -50,6 +17,12 @@
     overflow: hidden
     position: relative
     padding: 1rem 0.5rem
+    .name
+      max-width: 100%
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
     img
       object-fit: cover
       display: block
@@ -62,7 +35,7 @@
 // transform
 .users-wrap .user-card .card-link
   >img
-    trans2 transform box-shadow
+    floatable-trans()
   &:hover
     background: var(--block-hover)
     img

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

@@ -1,5 +1,5 @@
 .tag-plugin.gallery
-  .cell
+  .grid-cell,.flow-cell
     display: block
     overflow hidden
     z-index 0
@@ -30,66 +30,83 @@
       display: block
       font-size: $fs-13
       color: transparent
+      pointer-events: none
       line-height: 1.2
       margin: 0.5rem
       trans1(color)
+      text-align: left
       &:empty
         display: none
 
-.tag-plugin.gallery[layout='grid'] .cell
-  trans1(transform, 0.5s)
+.tag-plugin.gallery .grid-cell
+  >img
+    trans1(transform, 0.5s)
   &:hover
-    img
+    >img
       transform: scale(1.1)
     
 
 // 网格布局
-.tag-plugin.gallery[layout='grid']
+.tag-plugin.gallery.grid-box
   display: grid
+  &[size='xs']
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
+    grid-gap: 2px
+    .grid-cell,img
+      border-radius: 2px
+    .image-caption
+      font-size: $fs-12
   &[size='s']
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
     grid-gap: 2px
-    .cell,img
+    .grid-cell,img
       border-radius: 2px
   &[size='m']
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
     grid-gap: 4px
-    .cell,img
+    .grid-cell,img
       border-radius: 4px
   &[size='l']
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
     grid-gap: 8px
-    .cell,img
+    .grid-cell,img
       border-radius: 8px
   &[size='xl'] // 2列
     grid-template-columns: repeat(2, 1fr)
     grid-gap: 16px
-    .cell,img
+    .grid-cell,img
       border-radius: 16px
   &[size='mix'] // 1张大图+2张小图
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
     grid-gap: 4px
-    .cell,img
+    .grid-cell,img
       border-radius: 4px
-    .cell
+    .grid-cell
       &:nth-child(3n+1)
         grid-column: auto / span 2
         grid-row: auto / span 2
   &[ratio='square']
-    .cell
+    .grid-cell
       aspect-ratio: 1
-  .cell
+  &[ratio='portrait']
+    .grid-cell
+      aspect-ratio: 2 / 3
+  .grid-cell
     background: var(--block)
     img  
       width: 100%
       height: 100%
+
 // 瀑布流布局
-.tag-plugin.gallery[layout='flow']
+.tag-plugin.gallery.flow-box
   column-count: 3
   column-gap: 8px
-  .cell
+  .flow-cell
     border-radius: 8px
     padding-bottom: 8px
+    img  
+      width: 100%
+      height: 100%
   .image-meta
     border-radius: 8px
     margin-bottom: 8px