hexo-theme-stellar 1.9.0 → 1.10.0

package/source/css/_common/highlight.styl

@@ -3,13 +3,14 @@ code
   -moz-osx-font-smoothing: auto
   color: var(--text-code)
   font-family: $ff-code
-  word-break: break-all
+
+p>code:not([class]),li>code:not([class])
   font-size: 85%
   background: var(--block)
   padding: .2em .4em
   border-radius: 4px
 
-article.md .highlight
+article.md .highlight, pre:not([class]):has(>code)
   margin: var(--gap-p) 0
   border-radius: $border-block
   overflow: hidden
@@ -168,7 +169,7 @@ $hl-red = #EE2B29
 $hl-orange = #FB3F1B
 $hl-amber = #FD8607
 $hl-text = var(--text-p1)
-pre
+.code>pre
   .code:before
     display: none
   // 行

package/source/css/_common/html.styl

@@ -5,6 +5,8 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
+  if hexo-config('style.smooth_scroll')
+    scroll-behavior: smooth
 body
   background: var(--site-bg)
   margin: 0

package/source/css/_common/loading.styl

@@ -13,3 +13,8 @@ svg.loading
       transform:rotate(0deg)
     to
       transform:rotate(360deg)
+
+.loading-wrap
+  min-height: 50px
+  margin: 2rem 0
+  text-align: center

package/source/css/_common/pre.styl

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

package/source/css/_custom.styl

@@ -38,9 +38,18 @@ $dark-site-bg-mobile = black
 
 $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
 $ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
-
 $ff-logo = $ff-body
 
+if hexo-config('style.font-family.body')
+  $ff-body = convert(hexo-config('style.font-family.body'))
+
+if hexo-config('style.font-family.code')
+  $ff-code = convert(hexo-config('style.font-family.code'))
+
+if hexo-config('style.font-family.logo')
+  $ff-logo = convert(hexo-config('style.font-family.logo'))
+
+
 // font size
 $fs-root = 16px
 $fs-15 = .9375rem
@@ -76,6 +85,13 @@ $border-image = 6px
   @media screen and (min-width: $device-4k)
     --width-main: 860px
     --gap-l: 64px
+  // iPad 竖屏
+  @media screen and (max-width: $device-tablet)
+    --width-left: 220px
+  // iPad 竖屏
+  @media screen and (max-width: $device-mobile-max)
+    --width-left: 256px
+
 
 
 // shadow

package/source/css/_defines/const.styl

@@ -2,6 +2,7 @@
 $device-mobile-375 = 375px
 $device-mobile-425 = 425px
 $device-mobile = 500px
+$device-mobile-max = 667px
 $device-tablet = 768px
 $device-laptop = 1024px
 $device-desktop = 1440px

package/source/css/_defines/theme.styl

@@ -30,7 +30,7 @@ set_darkmode()
     --card: $dark-card
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
-    @media screen and (max-width: $device-tablet)
+    @media screen and (max-width: $device-mobile-max)
       --site-bg: $dark-site-bg-mobile
       --card: darken($dark-card, 6)
       --block: darken($dark-block, 4)

package/source/css/_layout/layout.styl

@@ -19,8 +19,8 @@
   max-width: var(--width-main)
 
 
-// iPad 竖屏
-@media screen and (max-width: $device-tablet)
+// 手机布局
+@media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
   .l_body

package/source/css/_layout/main.styl

@@ -3,8 +3,8 @@
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
   @media screen and (min-width: 1400px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
-  @media screen and (min-width: $device-tablet)
+    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)
   header
     margin: 4rem 1rem 2rem

package/source/css/_layout/md.styl

@@ -25,6 +25,8 @@ article.md.content
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
       text-align: justify
+      a
+        text-indent: 0
     h1,h2,h3,h4,h5,h6
       text-align: center
     >h2:not([class])
@@ -32,7 +34,7 @@ article.md.content
       border-bottom-style: dashed
       border-bottom-color: $color-highlight
   >:first-child
-    margin-top: 1rem
+    margin-top: 0
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
@@ -129,3 +131,35 @@ article.md img
   border-radius: $border-image
   margin: auto
   display: block
+
+article.md 
+  p:not([class]), li:not([class])
+    a:not([class])
+      position: relative
+      padding: 2px
+      text-decoration: none
+      display: inline-block
+      line-height: 1.2
+      &:after
+        content: ''
+        position: absolute
+        border-radius: 2px
+        bottom: 1px
+        left: 2px
+        right: 2px
+        height: 1px
+        opacity: 0.5
+        background: $color-link
+        trans1: all
+      &:hover
+        border-bottom: none
+        color: $color-link
+        // color: darken($color-hover, 10)
+        // background: alpha($color-hover, 0.08)
+        &:after
+          height: 100%
+          opacity: 0.2
+          bottom: 0
+          left: 0
+          right: 0
+          // background-color: alpha($color-hover, 0.08)

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

@@ -34,11 +34,7 @@
 .page-footer .text
   p
     margin: 4px 0
-    line-height: 1.2
-  a
+    line-height: 1.5
+  a:not([class])
     text-decoration: underline
-    font-weight: 500
-    margin: inherit
-    padding: inherit
-    &:hover
-      background: inherit
+    font-weight: 500

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

@@ -54,6 +54,6 @@ nav.cap
   a+a
     margin-left: 4px
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .nav-wrap
     margin-top: 0

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

@@ -12,6 +12,10 @@
   &:hover
   .paginator
     text-align: center
+    &.next
+      border-left: 1px dashed var(--block-border)
+    &.prev
+      border-right: 1px dashed var(--block-border)
   .current
     font-family: $ff-code
     color: var(--text-p3)

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

@@ -131,6 +131,8 @@
         text-decoration: underline
         &:hover
           color: $color-hover
+        &:after
+          display: none
   div.cmt-body
     min-height: 150px
     position: relative

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

@@ -0,0 +1,80 @@
+.widget-wrap#github-user
+  .widget-header+.widget-body
+    margin: 0.75rem 0
+.widget-wrap#github-user .widget-body
+  text-align: center
+  background: var(--card)
+  border-radius: $border-card
+  padding: 1rem
+
+.widget-wrap#github-user .widget-body .avatar
+  display: block
+  border-radius: 100%
+  margin: 1rem auto 1.25rem auto
+  max-width: 75%
+  overflow: hidden
+  img 
+    display: block
+  @media screen and (max-width: $device-tablet)
+    max-width: 50%
+
+.widget-wrap#github-user .widget-body .username
+  font-weight: 900
+  font-size: $fs-h2
+  color: var(--text-p0)
+  margin: 0.5rem 0
+
+.widget-wrap#github-user .widget-body .bio
+  font-size: $fs-13
+  margin: 0.5rem 0
+
+.widget-wrap#github-user .widget-body .follow 
+  font-weight: 500
+  border-radius: 64px
+  padding: 0.5rem 1rem
+  background: $color-theme
+  color: var(--card)
+  font-size: 1rem
+  align-self: stretch
+  text-align: center
+  line-height: 1.5
+  display: flex
+  align-items: center
+  justify-content: center
+  trans1: background
+  svg
+    margin-right: 6px
+  &:hover
+    background: $color-hover
+
+  
+
+.widget-wrap#github-user .widget-body .buttons
+  margin: 1rem 0
+  align-self: stretch
+  display: grid
+  grid-gap: 2px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
+
+.widget-wrap#github-user .widget-body .btn
+  display: flex 
+  flex-direction: column
+  align-items: center
+  color: inherit
+  border: 1px solid transparent
+  border-radius: 4px
+  padding: 0.25rem 0
+  trans1: background
+  &:hover
+    background: var(--block)
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .title
+  font-size: 1rem
+  font-weight: 700
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .desc
+  font-size: $fs-12
+  color: var(--text-p3)
+  font-weight: 500

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

@@ -20,9 +20,12 @@
       padding: 0.5rem .5rem
       font-size: $fs-13
       justify-content: space-between
-      flex-direction: row-reverse
       svg
         width: 1em
         height: 1em
+        margin-left: 4px
+      div 
+        display: flex 
+        align-items: center
     a:hover
       background: var(--block-hover)

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

@@ -6,14 +6,14 @@
   padding: var(--gap-l)
   padding-top: "calc(2 * %s)" % var(--gap-l)
   height: "calc(100vh - 3 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     padding-top: "calc(1 * %s)" % var(--gap-l)
     height: "calc(100% - 2 * %s)" % var(--gap-l)
 
 .l_left[layout=wiki]
   padding-bottom: 0
   height: "calc(100vh - 2 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     height: "calc(100% - 1 * %s)" % var(--gap-l)
   .widgets >:last-child
     margin-bottom: 6rem

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

@@ -1,12 +1,12 @@
 .tag-plugin.about
   background: var(--block)
-  border-radius: $border-block
+  border-radius: $border-card
   padding: 2rem
   .about-header
     display flex
-    flex-direction: row-reverse
-    justify-content: space-between
+    justify-content: center
     flex-wrap: wrap
+    margin: 1.5rem 0 3rem
     img
       object-fit: contain
     >img
@@ -28,28 +28,25 @@
     >p
       line-height: 1.5
     .tag-plugin.navbar:last-child
+      text-align: center
       nav.cap
         margin-top: 1rem
+        background: var(--card)
+        box-shadow: $boxshadow-button
         a
-          margin: 0
-          color: $color-link
-          background: var(--block-hover)
-          &.active
-            background: none
+          color: var(--text-p2)
           &:hover
-            color: $color-hover
-            background: var(--block-border)
-        a+a
-          margin-left: .5rem
+            background: var(--block)
+          &.active 
+            background: var(--block)
+            box-shadow: none
   .about-header+.about-body
     margin-top: 1.5rem
 
 @media screen and (max-width: $device-mobile)
   .tag-plugin.about
-    padding: 1rem
+    padding: 1.5rem 1rem
     .about-header
-      flex-direction: column
-      .avatar
-        margin: 1rem auto
+      margin: 2.5rem 0 3rem
       p
         width 100%

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

@@ -81,7 +81,7 @@ if hexo-config('style.darkmode') == 'auto'
     .tag-plugin[color='light']
       --theme-border: white
       --theme-bg: #ddd
-      color: var(--site-bg) !important
+      color: var(--card) !important
 
     .tag-plugin[color='dark']
       --theme-border: black

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

@@ -15,12 +15,9 @@
     align-items: stretch
     &+.group-header
       margin-top: 2rem
-  .friendsjs-wrap
+  .stellar-friends-api
     display: block
-    .loading-wrap
-      min-height: 50px
-      margin: 2rem 0
-      text-align: center
+    
 
 .users-wrap .user-card
   flex-shrink: 1
@@ -33,7 +30,7 @@
     width: 16.66%
   @media screen and (max-width: 820px)
     width: 20%
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     width: 16.66%
   @media screen and (max-width: $device-mobile)
     width: 25%

package/source/css/_layout/tag-plugins/inline-labels.styl

@@ -3,6 +3,7 @@
     text-decoration: none
     border-bottom: 2px solid $color-hover
   emp
+    width: fit-content
     text-decoration: none
     border-bottom: 4px dotted $color-hover
   wavy

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-375)
+  @media screen and (max-width: $device-mobile-425)
     width: 100%
 
 .md .link-card
@@ -32,6 +32,7 @@
   flex-direction: column
   align-items: stretch
   width: 400px
+  text-align: justify
 
 .md .link-card
   line-height: 1.2

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

@@ -44,5 +44,13 @@
     >.tabs
       margin-top: .5rem
 
+.md .tag-plugin.note[child=iframe]
+  overflow: hidden
+  padding: 0
+  >.body
+    margin: 0
+    iframe
+      margin: 0
+
 .md .tag-plugin .tag-plugin.note
   --gap-p: 1rem

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

@@ -11,12 +11,8 @@
     width: 100%
     &+.group-header
       margin-top: 2rem
-  .sitesjs-wrap
+  .stellar-sites-api
     display: block
-    .loading-wrap
-      min-height: 50px
-      margin: 2rem 0
-      text-align: center
 
 .sites-wrap .group-body
   display: grid
@@ -26,7 +22,7 @@
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: 900px)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: $device-mobile)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)

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

@@ -79,3 +79,8 @@
         display: none
       &.active
         display: block
+
+.md.indent .tag-plugin.tabs .tab-content p:not([class])
+  text-indent: 'calc(%s * 2)' % $fs-p
+  a
+    text-indent: 0

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

@@ -1,6 +1,9 @@
-.tag-plugin.timeline
+.md .tag-plugin.folding .body:has(.timeline)
+  background: var(--site-bg)
+  
+.md .tag-plugin.timeline
   position: relative
-  margin: 1rem 0
+  margin-top: 0
   padding-left: 16px
   &:before
     content: ''
@@ -12,6 +15,10 @@
     border-radius: 8px
     top: .5rem
     bottom: 0
+  &:has(.loading-wrap)
+    padding-left: 0
+    &:before
+      display: none
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -45,6 +52,7 @@
     color: var(--text-p3)
     font-family: $ff-code
     trans1 color
+    opacity: 0.75
     a
       color: inherit
       font-weight: inherit
@@ -74,3 +82,78 @@
     margin: .5rem 0
   .tag-plugin.copy
     width: 240px
+
+
+.tag-plugin.timeline.stellar-timeline-api .body
+  max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
+  overflow: scroll
+  p
+    font-size: $fs-14
+  p.title 
+    font-size: 1rem
+    font-weight: 500
+    margin: 0
+    padding: 0.5rem 0 0.75rem
+    line-height: 1.25
+    border-bottom: 1px dashed var(--block-border)
+  pre code 
+    font-size: $fs-12
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer
+  padding: 0.5rem 0 1rem
+  margin-bottom: -0.5rem
+  user-select: none
+  font-weight: 500
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: stretch
+  position: sticky
+  position: -webkit-sticky
+  bottom: -0.5rem
+  background: var(--card)
+  span
+    line-height: 1.8
+  &:empty
+    display: none
+  a.comments 
+    margin-right: 0
+  
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .flex
+  display: flex
+  flex-wrap: wrap
+  font-size: $fs-12
+  align-items: stretch
+  .reaction 
+    border-color: var(--block)
+    border-style: dashed
+  .item
+    border-width: 1px
+    border-style: solid
+    margin: 2px
+    border-radius: 4px
+    padding: 0 0.5rem
+    display: flex 
+    align-items: center
+    &.comments
+      border-width: 0
+    &:first-child 
+      margin-left: 0
+    &:last-child 
+      margin-right: 0
+    .key
+      margin-right: 4px
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
+  border-radius: 4px
+  padding: 0 0.5rem
+  color: white
+  trans1: all
+  margin-left: 2px
+  background: $color-theme
+  .key
+    margin-right: 4px
+  &:hover
+    background: $color-hover
+

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

@@ -33,6 +33,6 @@ details.toc[open] >div.body
       margin-top: 0
 
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .tag-plugin.toc[display=mobile]
     display: block !important

package/source/js/main.js

@@ -213,21 +213,19 @@ if (stellar.plugins.lazyload) {
   });
 }
 
-// issuesjs
-if (stellar.plugins.sitesjs) {
-  const issues_api = document.getElementById('sites-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.sitesjs, { defer: true })
-    })
-  }
-}
-if (stellar.plugins.friendsjs) {
-  const issues_api = document.getElementById('friends-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.friendsjs, { defer: true })
-    })
+// stellar js
+if (stellar.plugins.stellar) {
+  for (let key of Object.keys(stellar.plugins.stellar)) {
+    let js = stellar.plugins.stellar[key];
+    const els = document.getElementsByClassName('stellar-' + key + '-api');
+    if (els != undefined && els.length > 0) {
+      stellar.jQuery(() => {
+        stellar.loadScript(js, { defer: true });
+        if (key == 'timeline') {
+          stellar.loadScript(stellar.plugins.marked);
+        }
+      })
+    }
   }
 }
 

package/source/js/plugins/friends.js

@@ -48,7 +48,6 @@ const friendsjs = {
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
-      console.log(data);
       arr.forEach((item, i) => {
         var user = '<div class="user-card">';
         user += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer"';
@@ -67,7 +66,7 @@ const friendsjs = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('friendsjs-wrap');
+  const els = document.getElementsByClassName('stellar-friends-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');