hexo-theme-stellar 1.12.0 → 1.14.0

package/scripts/tags/sites.js

@@ -1,96 +1,57 @@
 /**
- * sites.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * sites.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% sites [only:group1] [not:group2] %}
+ * {% sites [group] [repo:owner/repo] [api:http] %}
  */
 
 'use strict';
 
 hexo.extend.tag.register('sites', function(args) {
-  args = hexo.args.map(args, ['only', 'not', 'repo', 'api']);
-  if (args.only) {
-    args.only = args.only.split(',');
+  args = hexo.args.map(args, ['repo', 'api'], ['group']);
+  var links = hexo.locals.get('data').links;
+  if (links == undefined) {
+    links = {};
   }
-  if (args.not) {
-    args.not = args.not.split(',');
-  }
-  var sites = hexo.locals.get('data').sites;
-  if (sites == undefined) {
-    sites = {};
-  }
-  if (args.repo) {
-    sites = {
-      group: {
-        api: args.api,
-        repo: args.repo
-      }
-    }
+  var api;
+  if (args.api) {
+    api = args.api;
+  } else if (args.repo) {
+    api = 'https://data.json.vlts.cc/v2/' + args.repo;
   }
+  
   var el = '<div class="tag-plugin sites-wrap">';
-  function groupHeader(group) {
-    var header = '<div class="group-header">';
-    if (group.title) {
-      header += hexo.render.renderSync({text: group.title, engine: 'markdown'}).split('\n').join('');
-    }
-    if (group.description) {
-      header += hexo.render.renderSync({text: group.description, engine: 'markdown'}).split('\n').join('');
-    }
-    header += '</div>';
-    return header;
-  }
-  function cell(site) {
-    if (site.url && site.title) {
-      var cell = '<div class="site-card">';
-      cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + site.url + '">';
-      cell += '<img src="' + (site.screenshot || ('https://screenshot-api.xaoxuu.com/api?url=' + site.url + '&width=1280&height=720')) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
-      cell += '<div class="info">';
-      cell += '<img src="' + (site.avatar || hexo.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.link + '&quot;;"/>';
-      cell += '<span class="title">' + site.title + '</span>';
-      cell += '<span class="desc">' + (site.description || site.url) + '</span>';
-      cell += '</div>';
-      cell += '</a></div>'
-      return cell;
-    } else {
-      return '';
-    }
-  }
-  for (let groupId of Object.keys(sites)) {
-    function f() {
-      if (args.not && args.not.includes(groupId)) {
-        return;
-      }
-      if (groupId in sites) {
-        let group = sites[groupId];
-        if ((typeof group == 'object') && group.constructor == Array) {
-          group = {items: group};
-        }
-        if (group.title || group.description) {
-          el += groupHeader(group);
-        }
-        if (group.repo) {
-          el += '<div class="stellar-sites-api"';
-          el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
-          el += '>';
-          el += '<div class="group-body"></div>';
-          el += '</div>';
-        } else if (group.items) {
-          el += '<div class="group-body">';
-          group.items.forEach((site, i) => {
-            el += cell(site);
-          });
-          el += '</div>';
-        }
+  if (api) {
+    el += '<div class="stellar-sites-api"';
+    el += ' api="' + api + '"';
+    el += '>';
+    el += '<div class="group-body"></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://screenshot-api.xaoxuu.com/api?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
+        cell += '<div class="info">';
+        cell += '<img src="' + (item.avatar || hexo.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.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 '';
       }
     }
-    if (args.only) {
-      if (args.only.includes(groupId)) {
-        f();
-      }
-    } else {
-      f();
-    }
+    el += '<div class="group-body">';
+    const items = links[args.group] || [];
+    items.forEach((item, i) => {
+      el += cell(item);
+    });
+    el += '</div>';
   }
+
   el += '</div>';
   return el;
 });

package/scripts/tags/timeline.js

@@ -36,12 +36,14 @@ function layoutNodeContent(content) {
 
 
 function postTimeline(args, content) {
-  args = hexo.args.map(args, ['api', 'user']);
+  args = hexo.args.map(args, ['api', 'user', 'type', 'limit', 'hide']);
   var el = '';
-
+  if (!args.type) {
+    args.type = 'timeline';
+  }
   if (args.api && args.api.length > 0) {
-    el += '<div class="tag-plugin timeline stellar-timeline-api"';
-    el += ' ' + hexo.args.joinTags(args, ['api', 'user']).join(' ');
+    el += '<div class="tag-plugin timeline stellar-' + args.type + '-api"';
+    el += ' ' + hexo.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ');
     el += '>';
   } else {
     el += '<div class="tag-plugin timeline">';

package/source/css/_common/base.styl

@@ -8,7 +8,7 @@ pre
 
 a
   text-decoration: none
-  color: $color-link
+  color: var(--theme-link)
   &:hover
     color: $color-hover
 

package/source/css/_common/highlight.styl

@@ -7,7 +7,7 @@ code
 p>code:not([class]),li>code:not([class])
   font-size: 85%
   background: var(--block)
-  padding: .2em .4em
+  padding: .2em
   border-radius: 4px
 
 article.md .highlight, pre:not([class]):has(>code)

package/source/css/_common/pre.styl

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

package/source/css/_custom.styl

@@ -64,7 +64,7 @@ $fs-p    = $fs-15
 $fs-code = $fs-13
 
 $border-card = 12px
-$border-block = 6px
+$border-block = 8px
 $border-image = 6px
 
 // 可以动态变化的属性

package/source/css/_defines/theme.styl

@@ -1,8 +1,12 @@
-:root
-  --site-bg: $light-background
-  --block: $light-block
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+set_text_light()
+  --text-p0: $dark-title
+  --text-p1: mix($dark-text, $dark-background, 85)
+  --text-p2: mix($dark-text, $dark-background, 70)
+  --text-p3: mix($dark-text, $dark-background, 45)
+  --text-p4: mix($dark-text, $dark-background, 35)
+  --text-meta: mix($dark-text, $dark-background, 30)
+  --text-code: $dark-code
+set_text_dark()
   --text-p0: $light-title
   --text-p1: $light-text
   --text-p2: mix($light-text, $light-background, 80)
@@ -10,24 +14,25 @@
   --text-p4: mix($light-text, $light-background, 35)
   --text-meta: mix($light-text, $light-background, 20)
   --text-code: $light-code
+:root
+  --site-bg: $light-background
   --card: $light-card
+  --block: $light-block
+  --block-border: darken($light-block, 5)
+  --block-hover: darken($light-block, 2)
+  set_text_dark()
   --theme-highlight: darken($color-theme, 5)
   --theme-bg: mix($color-theme, $light-card, 10)
+  --theme-link: $color-link
 
 set_darkmode()
   :root
     --site-bg: $dark-background
+    --card: $dark-card
     --block: $dark-block
     --block-border: lighten($dark-block, 6)
     --block-hover: darken($dark-block, 4)
-    --text-p0: $dark-title
-    --text-p1: mix($dark-text, $dark-background, 85)
-    --text-p2: mix($dark-text, $dark-background, 70)
-    --text-p3: mix($dark-text, $dark-background, 45)
-    --text-p4: mix($dark-text, $dark-background, 35)
-    --text-meta: mix($dark-text, $dark-background, 30)
-    --text-code: $dark-code
-    --card: $dark-card
+    set_text_light()
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
     @media screen and (max-width: $device-mobile-max)

package/source/css/_layout/list.styl

@@ -1,15 +1,13 @@
 // list
 .post-list
   margin: 1rem
-  .post-title
-    margin-top: 1.5rem
   .post-title:first-child
     margin-top: .5rem
 
 .post-list
   .post-title
     font-weight: 500
-    margin: .75rem 0
+    margin: 1.25rem 0 .75rem 0
     line-height: 1.2
     font-size: $fs-h3
     border-bottom: none
@@ -29,6 +27,7 @@
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
   trans1 box-shadow
   overflow: hidden
+  z-index: 0
   background: var(--card)
   position: relative
   .excerpt
@@ -53,8 +52,12 @@
       img
         object-fit: contain
         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%)
 
 
 // common article
@@ -86,11 +89,9 @@
     @media screen and (max-width: 900px)
       height: 240px
     @media screen and (max-width: $device-tablet)
-      height: 280px
-    @media screen and (max-width: $device-mobile)
-      height: 240px
-    @media screen and (max-width: $device-mobile-425)
       height: 220px
+    @media screen and (max-width: $device-mobile-425)
+      height: 200px
     @media screen and (max-width: $device-mobile-375)
       height: 180px
 
@@ -105,19 +106,18 @@
       position: absolute
       line-height: 1.2
       width: 'calc(100% - %s * 2)' % 1rem
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
-      color: white
+      color: var(--text-p0)
       &[position=top]
         top: 0
-        background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2),rgba(0,0,0,0))
+        background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))
       &[position=bottom]
         bottom: 0
-        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.3))
+        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
       div+div
         margin-top: 4px
       .cap
-        color: white
         font-size: $fs-13
+        color: unset
       .title
         font-weight: 500
         font-size: $fs-h3

package/source/css/_layout/main.styl

@@ -5,7 +5,7 @@
     margin-left: "calc(2 * %s)" % var(--gap-l)
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
-    padding-top: "calc(2 * %s)" % var(--gap-l)
+    padding-top: "calc(1 * %s)" % var(--gap-l)
   header
     margin: 4rem 1rem 2rem
     .logo-wrap

package/source/css/_layout/md.styl

@@ -68,9 +68,6 @@ article.md.content
   .tag-plugin,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
-  p,.tag-plugin
-    .highlight,table
-      --gap-p: 1rem
   iframe
     display: block
 
@@ -136,30 +133,27 @@ article.md
   p:not([class]), li:not([class])
     a:not([class])
       position: relative
-      padding: 2px
+      padding: 2px 0
       text-decoration: none
-      display: inline-block
       line-height: 1.2
+      word-break: keep-all
       &:after
         content: ''
         position: absolute
         border-radius: 2px
-        bottom: 1px
-        left: 2px
-        right: 2px
+        bottom: 0
+        left: 0
+        right: 0
         height: 1px
-        opacity: 0.5
-        background: $color-link
+        opacity: 0.8
+        background: var(--theme-link)
         trans1: all
       &:hover
         border-bottom: none
-        color: $color-link
-        // color: darken($color-hover, 10)
-        // background: alpha($color-hover, 0.08)
+        color: var(--theme-link)
         &:after
           height: 100%
           opacity: 0.2
           bottom: 0
-          left: 0
-          right: 0
-          // background-color: alpha($color-hover, 0.08)
+          left: -2px
+          right: -2px

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

@@ -8,7 +8,7 @@
     align-items: center
     flex-direction: row
     &:not([style]) a
-      color: $color-link
+      color: var(--theme-link)
     &[style] a
       color: inherit
     span.sep

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

@@ -1,7 +1,7 @@
 .nav-wrap
   position: sticky
   position: -webkit-sticky
-  margin-top: 1.75rem
+  margin-top: .75rem
   top: -2px
   background: var(--site-bg)
   padding: 0 1rem

package/source/css/_layout/sidebar/sidebar.styl

@@ -3,20 +3,21 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  padding: var(--gap-l) 0
-  padding-top: "calc(2 * %s)" % var(--gap-l)
-  height: "calc(100vh - 3 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: "calc(1 * %s)" % var(--gap-l)
-    height: "calc(100% - 2 * %s)" % var(--gap-l)
+  height: "calc(100vh - 1 * %s)" % var(--gap-l)
   .header
-    margin: 0 var(--gap-l)
+    margin: var(--gap-l) var(--gap-l) 0
+  @media screen and (min-width: $device-mobile-max)
+    >.widgets:first-child>.widget-wrap:first-child
+      margin-top: "calc(2 * %s)" % var(--gap-l)
+  @media screen and (max-width: $device-mobile-max)
+    height: 100vh
+  
 
 .l_left[layout=wiki]
   padding-bottom: 0
-  height: "calc(100vh - 2 * %s)" % var(--gap-l)
+  height: 100vh
   @media screen and (max-width: $device-mobile-max)
-    height: "calc(100% - 1 * %s)" % var(--gap-l)
+    height: 100vh
   .widgets >:last-child
     margin-bottom: 6rem
 

package/source/css/_layout/sidebar/widgets.styl

@@ -100,5 +100,4 @@
           display: none
       &+.timenode
         margin-top: 0.75rem
-      .body
-        max-height: 40vh
+        

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

@@ -1,3 +1,24 @@
+set_text_white()
+  --text-p0: white
+  --text-p1: white
+  --text-p2: #eee
+  --text-p3: #ddd
+  --text-code: white
+  --card: $dark-card
+  --block: $dark-block
+  --block-border: lighten($dark-block, 6)
+  --block-hover: darken($dark-block, 4)
+set_text_black()
+  --text-p0: black
+  --text-p1: #111
+  --text-p2: #333
+  --text-p3: #555
+  --text-code: white
+  --card: $light-card
+  --block: $light-block
+  --block-border: darken($light-block, 5)
+  --block-hover: darken($light-block, 2)
+
 .tag-plugin
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
@@ -5,86 +26,99 @@
 
 .tag-plugin[color='red']
   --theme: $c-red
-  --theme-border: mix($c-red, $light-card, 40)
-  --theme-bg: mix($c-red, $light-card, 10)
+  --theme-border: mix($c-red, white, 60)
+  --theme-bg: mix($c-red, white, 15)
 
 .tag-plugin[color='orange']
   --theme: $c-orange
-  --theme-border: mix($c-orange, $light-card, 40)
-  --theme-bg: mix($c-orange, $light-card, 10)
+  --theme-border: mix($c-orange, white, 60)
+  --theme-bg: mix($c-orange, white, 15)
 
 .tag-plugin[color='yellow']
   --theme: $c-yellow
-  --theme-border: mix($c-yellow, $light-card, 40)
-  --theme-bg: mix($c-yellow, $light-card, 10)
+  --theme-border: mix($c-yellow, white, 60)
+  --theme-bg: mix($c-yellow, white, 20)
 
 .tag-plugin[color='green']
   --theme: $c-green
-  --theme-border: mix($c-green, $light-card, 40)
-  --theme-bg: mix($c-green, $light-card, 10)
+  --theme-border: mix($c-green, white, 60)
+  --theme-bg: mix($c-green, white, 15)
 
 .tag-plugin[color='cyan']
   --theme: $c-cyan
-  --theme-border: mix($c-cyan, $light-card, 40)
-  --theme-bg: mix($c-cyan, $light-card, 10)
+  --theme-border: mix($c-cyan, white, 60)
+  --theme-bg: mix($c-cyan, white, 15)
 
 .tag-plugin[color='blue']
   --theme: $c-blue
-  --theme-border: mix($c-blue, $light-card, 40)
-  --theme-bg: mix($c-blue, $light-card, 10)
+  --theme-border: mix($c-blue, white, 60)
+  --theme-bg: mix($c-blue, white, 15)
 
 .tag-plugin[color='purple']
   --theme: $c-purple
-  --theme-border: mix($c-purple, $light-card, 40)
-  --theme-bg: mix($c-purple, $light-card, 10)
-
+  --theme-border: mix($c-purple, white, 60)
+  --theme-bg: mix($c-purple, white, 15)
 
 .tag-plugin[color='light']
   --theme-bg: white
 
-
 .tag-plugin[color='dark']
-  --theme-bg: #444
-  color: var(--card) !important
+  --theme-bg: #333
+  set_text_white()
+
+.tag-plugin.note[color='warning']
+  --theme: $c-yellow
+  --theme-border: #ffe659
+  --theme-bg: #ffe659
+  --theme-link: #ff453a
+
+.tag-plugin.note[color='error']
+  --theme: $c-yellow
+  --theme-border: #ff453a
+  --theme-bg: #ff453a
+  --theme-link: #ffe659
+  set_text_white()
 
 set_darkmode_tags()
   .tag-plugin[color='red']
-    --theme-border: mix($c-red, $dark-card, 80)
-    --theme-bg: mix($c-red, $dark-card, 10)
+    --theme-border: mix($c-red, black, 70)
+    --theme-bg: mix($c-red, black, 20)
 
   .tag-plugin[color='orange']
-    --theme-border: mix($c-orange, $dark-card, 80)
-    --theme-bg: mix($c-orange, $dark-card, 10)
+    --theme-border: mix($c-orange, black, 70)
+    --theme-bg: mix($c-orange, black, 20)
 
   .tag-plugin[color='yellow']
-    --theme-border: mix($c-yellow, $dark-card, 80)
-    --theme-bg: mix($c-yellow, $dark-card, 10)
+    --theme-border: mix($c-yellow, black, 70)
+    --theme-bg: mix($c-yellow, black, 20)
 
   .tag-plugin[color='green']
-    --theme-border: mix($c-green, $dark-card, 80)
-    --theme-bg: mix($c-green, $dark-card, 10)
+    --theme-border: mix($c-green, black, 70)
+    --theme-bg: mix($c-green, black, 20)
 
   .tag-plugin[color='cyan']
-    --theme-border: mix($c-cyan, $dark-card, 80)
-    --theme-bg: mix($c-cyan, $dark-card, 10)
+    --theme-border: mix($c-cyan, black, 70)
+    --theme-bg: mix($c-cyan, black, 20)
 
   .tag-plugin[color='blue']
-    --theme-border: mix($c-blue, $dark-card, 80)
-    --theme-bg: mix($c-blue, $dark-card, 10)
+    --theme-border: mix($c-blue, black, 70)
+    --theme-bg: mix($c-blue, black, 20)
 
   .tag-plugin[color='purple']
-    --theme-border: mix($c-purple, $dark-card, 80)
-    --theme-bg: mix($c-purple, $dark-card, 10)
+    --theme-border: mix($c-purple, black, 70)
+    --theme-bg: mix($c-purple, black, 20)
 
   .tag-plugin[color='light']
     --theme-border: white
-    --theme-bg: #ddd
-    color: var(--card) !important
+    --theme-bg: #fff
 
   .tag-plugin[color='dark']
     --theme-border: black
-    --theme-bg: #222
-    color: var(--text-p1) !important
+    --theme-bg: #111
+    set_text_white()
+
+  .tag-plugin[color='warning'],.tag-plugin[color='light']
+    set_text_black()
 
 if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)

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

@@ -48,8 +48,8 @@ details.folding[open]
     margin: 0 - 1rem
     margin-top: 0
     background: var(--card)
-    border-bottom-left-radius: $border-block
-    border-bottom-right-radius: $border-block
+    border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
+    border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
     font-size: $fs-15
     >:first-child
       margin-top: 0

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

@@ -3,7 +3,7 @@
   margin: 1em auto
   display: flex
   justify-content: center
-  @media screen and (max-width: $device-mobile-425)
+  @media screen and (max-width: $device-mobile-375)
     width: 100%
 
 .md .link-card
@@ -14,8 +14,8 @@
   cursor: pointer
   min-width 280px
   max-width: 100%
-  width: 350px
-  @media screen and (max-width: $device-mobile-425)
+  width: 320px
+  @media screen and (max-width: $device-mobile-375)
     width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-block

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

@@ -2,6 +2,7 @@
   text-align: center
   position: relative
   align-items: center
+  max-width 400px
 .md .tag-plugin.quot:not(span)
   display: inline-flex
   align-self: center