hexo-theme-stellar 1.5.2 → 1.7.0

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

@@ -5,9 +5,59 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  position: relative
+  &.post
+    height: inherit
+
 
 .l_cover .cover-wrap
   margin-bottom: 0
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    line-height: 1.2
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: 2rem 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
+
+.l_cover.post
+  .cover
+    z-index: -1
+    width: 100%
+    height: 30vh
+    max-width: $device-2k
+    min-height: 150px
+    max-height: 400px
+    @media screen and (max-width: $device-tablet)
+      height: 25vh
+    @media screen and (max-width: $device-mobile)
+      height: 20vh
+    @media screen and (min-width: $device-2k)
+      margin-top: 4rem
+      .img
+        border-radius: 2rem
+
+
+.l_cover.post .cover-wrap
+  z-index: 1
+  .article-title
+    text-align: center
+    padding: 1rem
+    margin: 1em 0 0 0
+    @media screen and (min-width: $device-2k)
+      font-size: 3rem
+
+
+.l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -18,15 +68,5 @@
       @media screen and (max-width: $device-mobile)
         max-width: 60%
   .cover-title
-    font-weight: 700
-    font-size: 1.5rem
-    margin: 1rem 0
     &:first-child
       font-size: 3rem
-  .description
-    margin: 1rem 0
-  .start-wrap
-    margin: 2rem 0
-    flex-shrink: 0
-    a.start
-      display: inline-block

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

@@ -21,11 +21,10 @@ nav.cap
   display: flex
   overflow: scroll visible
   scrollbar(0, 0)
-  padding-left: .25rem
   >p
     margin: 0
   a
-    padding: .25rem .75rem
+    padding: .25rem 1rem
     margin: 10px 0 8px 0
     line-height: 2
     color: var(--text-p3)
@@ -35,11 +34,11 @@ nav.cap
     position: relative
     z-index: 1
     &:after
-      width: 'calc(100% - 2 * %s)' % .5rem
       height: 2px
       position: absolute
       bottom: -8px
-      left: .5rem
+      left: 1rem
+      right: 1rem
       background: $color-theme
       border-radius: 2px
       pointer-events: none

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

@@ -113,10 +113,8 @@
         flex-shrink: 0
         margin-left: 4px
         font-size: $fs-12
-        color: var(--text-meta)
+        color: var(--text-p4)
         font-weight: 500
-      &#more
-        justify-content: center
       &:hover
         color: $color-hover !important
         background: var(--card)

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

@@ -103,7 +103,7 @@
   flex-direction: column
   align-items: flex-start
   a.wiki-home
-    margin-bottom: .5rem
+    margin-bottom: 1rem
     color: var(--text-p1)
     svg
       margin-right: 2px
@@ -164,7 +164,9 @@ nav.menu
       background: var(--site-bg)
       padding-top: 2px
       z-index 1
-      line-height: 2.4
+      line-height: 2
+      color: var(--text-p4)
+      font-size: $fs-14
       &:empty
         display: none
       .cap-action
@@ -183,13 +185,28 @@ nav.menu
       margin: 0.5rem 0
       color: var(--text-p1)
       p
-        margin-top: 0.5em
-        margin-bottom: 0.5em
+        margin-top: .5em
+        margin-bottom: .5em
+        line-height: 1.5
         >a:hover
           text-decoration: underline
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
+
+  .widget-wrap .widget-body
+    .more-item
+      margin: .5rem 0
+      .cap
+        margin-bottom: .25rem
+  .widget-wrap#recent .widget-body
+    a
+      line-height: 1.2
+      font-weight: 500
+      color: var(--text-p2)
+      font-size: $fs-13
+      &:hover
+        color: $color-hover
+  .widget-wrap#related .widget-body
     >a
       padding 0.5rem
       display: block

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

@@ -29,19 +29,18 @@
       line-height: 1.5
     .tag-plugin.navbar:last-child
       nav.cap
-        padding: 0
-        background: none
+        margin-top: 1rem
         a
           margin: 0
-          padding: 0
           color: $color-link
+          background: var(--block-hover)
           &.active
             background: none
           &:hover
             color: $color-hover
-            background: none
+            background: var(--block-border)
         a+a
-          margin-left: 1.5rem
+          margin-left: .5rem
   .about-header+.about-body
     margin-top: 1.5rem
 

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

@@ -57,6 +57,7 @@ details.folding[open]
 details.folding[child=codeblock]>div.body
   padding: 0
   background: transparent
+  overflow: hidden
   .highlight
     border: none
     border-radius: 0

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

@@ -13,7 +13,8 @@
     display: flex
     flex-wrap: wrap
     align-items: stretch
-    margin-bottom: 2rem
+    &+.group-header
+      margin-top: 2rem
   .friendsjs-wrap
     display: block
     .loading-wrap

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

@@ -2,7 +2,6 @@
   margin-top: 1rem
   margin-bottom: 1rem
   .image-bg
-    line-height: 0
     text-align: center
     border-radius: $border-image
     position: relative
@@ -11,7 +10,7 @@
       .image-download
         opacity: 1 !important
     img
-      display: inline-block
+      display: block
       object-fit: cover
     .image-download
       position: absolute

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

@@ -1,5 +1,5 @@
 .md .tag-plugin.link
-  max-width: 360px
+  max-width: 400px
   margin: 1em auto
   display: flex
   justify-content: center
@@ -24,26 +24,64 @@
     box-shadow: $boxshadow-card-float
     transform: translateY(-1px)
 
+.md .link-card.plain
+  flex-direction: row
+  align-items: center
+
+.md .link-card.rich
+  flex-direction: column
+  align-items: stretch
+  width: 400px
 
 .md .link-card
-  div.left,div.right
+  line-height: 1.2
+  > div
     pointer-events: none
-  div.right
+  >.top
+    display: flex
+    margin: .75rem 1rem .25rem
+    overflow: hidden
+    max-width: 'calc(100% - %s * 2)' % 1rem
+    align-items: center
+    .img
+      line-height: 0
+      height: 16px
+      width: 20px
+      margin-right: 4px
+      background-repeat: no-repeat
+      background-size: contain
+      background-position: left center
+    .desc
+      opacity: .75
+      line-height: 1.5
+    span
+      txt-ellipsis()
+      max-width: 100%
+  >.bottom
+    margin: 0 1rem .75rem 1rem
+    .title
+      font-size: $fs-15
+      margin: 4px 0 8px 0
+  >.right
     width: 2.5rem
     height: 2.5rem
-    margin: 0.75rem
+    margin: .75rem
     overflow: hidden
     flex-shrink: 0
-  div.left
+  >.left
     overflow: hidden
-    margin-left: 1rem
+    margin: .5rem 0 .5rem 1rem
+    .title
+      font-size: $fs-14
+      margin: 1px 0 5px 0
+    .desc
+      flex-shrink: 0
+      txt-ellipsis()
   span
     margin: 0
     display: block
-    txt-ellipsis()
   span.title
     font-weight: 500
     color: var(--text-p1)
-  span.url
-    flex-shrink: 0
+  span.desc
     color: var(--text-p3)

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

@@ -0,0 +1,50 @@
+.md .tag-plugin.poetry
+  align-self: center
+  &[align=center]
+    align-items: center
+  >.title
+    font-weight: 500
+    font-size: 1rem
+    margin-top: var(--gap-p)
+  >.meta
+    color: var(--text-p2)
+    font-size: $fs-12
+    font-weight: 500
+    span+span
+      margin-left: 4px
+  >.body
+    margin: var(--gap-p) 0
+    border-top: 1px dashed var(--block-border)
+    border-bottom: 1px dashed var(--block-border)
+    p
+      font-size: $fs-14
+  >.footer
+    font-style: italic
+    color: var(--text-p4)
+    margin: var(--gap-p) 0
+    font-size: $fs-12
+
+// 描边修饰
+.md .tag-plugin.poetry
+  padding-left: 1rem
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    width: 4px
+    left: -4px
+    top: 4px
+    bottom: 4px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: 6px
+      bottom: 6px
+      border-radius: 4px
+      background: $color-highlight

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

@@ -0,0 +1,82 @@
+.md .tag-plugin.quot
+  text-align: center
+  position: relative
+  align-items: center
+.md .tag-plugin.quot:not(span)
+  display: flex
+  align-self: center
+  border-bottom: none
+  font-weight: 700
+  &:first-child
+    margin-top: 1.5rem
+  a.headerlink:before
+    content: ''
+  padding: 16px 24px 8px 24px
+  @media screen and (max-width: $device-mobile)
+    padding: 16px 20px 8px
+  line-height: 1.2
+
+// override
+article.md.content
+  .quot:not(span)
+    color: var(--text-p0)
+  h1.quot
+    font-size: $fs-h1
+    font-weight: 900
+    padding: 20px 32px 12px 32px
+    @media screen and (max-width: $device-mobile)
+      padding: 20px 24px 12px
+  h2.quot,h3.quot,h4.quot,h5.quot,h6.quot
+    font-size: $fs-h3
+  p.quot
+    font-size: $fs-h4
+
+// type=text
+.md .tag-plugin.quot[type=text]:not(span)
+  &:before,&:after
+    content: ""
+    position: absolute
+    width: 8px
+    height: 14px
+  &:before
+    top: 8px
+    left: 0
+    border-top: 6px solid $color-highlight
+    border-left: 6px solid $color-highlight
+  &:after
+    right: 0
+    bottom: 0
+    border-right: 6px solid $color-highlight
+    border-bottom: 6px solid $color-highlight
+article.md.content h1.quot[type=text]
+  &:before,&:after
+    width: 12px
+    height: 20px
+    border-width: 8px
+
+// type=icon
+.md .tag-plugin.quot[type=icon]:not(span)
+  .icon
+    height: 1.5em
+    display: inline-block
+    color: $color-highlight
+    border-radius: 0
+    &.prefix
+      margin-right: .5rem
+    &.suffix
+      margin-left: .5rem
+
+// inline quot
+.md span.tag-plugin.quot
+  font-weight: 500
+  &:before,&:after
+    color: $color-highlight
+    font-weight: 900
+  &:before
+    content: "「"
+    margin-left: -0.125em
+    margin-right: 0.125em
+  &:after
+    content: "」"
+    margin-left: 0.125em
+    margin-right: -0.125em

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

@@ -9,7 +9,8 @@
         font-weight: 500
   .group-body
     width: 100%
-    margin-bottom: 2rem
+    &+.group-header
+      margin-top: 2rem
   .sitesjs-wrap
     display: block
     .loading-wrap
@@ -29,7 +30,6 @@
     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)
-  margin-bottom: 2rem
 
 .sites-wrap .group-body .site-card .card-link
   width: 100%

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

@@ -64,10 +64,10 @@
           z-index: 1
           position: absolute
           background: $color-theme
-          width: 'calc(100% - 2 * %s)' % .5rem
           height: 2px
           bottom: -8px
-          left: .5rem
+          left: .75rem
+          right: .75rem
           border-radius: 2px
 
   .tab-content

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

@@ -18,7 +18,7 @@
   display: flex
   flex-direction: column
   align-items: flex-start
-  max-width: 100%
+  max-width: 'calc(100% - %s)' % 1rem
   >.header, >.body
     max-width: @max-width
   &[highlight] .header:before

package/source/css/_plugins/fancybox.styl

@@ -0,0 +1,5 @@
+img[fancybox='true']
+  cursor: zoom-in
+
+.swiper-slide
+  cursor: zoom-in

package/source/css/_plugins/index.styl

@@ -5,6 +5,8 @@ if hexo-config('plugins.swiper.enable')
   @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
+if hexo-config('plugins.fancybox.enable')
+  @import 'fancybox'
 
 // 评论
 if hexo-config('comments.service') == 'beaudar'

package/source/js/main.js

@@ -59,16 +59,16 @@ const util = {
 
 const hud = {
   toast: (msg, duration) => {
-    duration=isNaN(duration)?2000:duration;
+    duration = isNaN(duration) ? 2000 : duration;
     var el = document.createElement('div');
     el.classList.add('toast');
     el.innerHTML = msg;
     document.body.appendChild(el);
-    setTimeout(function() {
+    setTimeout(function () {
       var d = 0.5;
       el.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
       el.style.opacity = '0';
-      setTimeout(function() { document.body.removeChild(el) }, d * 1000);
+      setTimeout(function () { document.body.removeChild(el) }, d * 1000);
     }, duration);
   },
 
@@ -96,7 +96,7 @@ const init = {
         segs.push(node)
       });
       // 滚动
-      $(document, window).scroll(function(e) {
+      $(document, window).scroll(function (e) {
         var scrollTop = $(this).scrollTop();
         var topSeg = null
         for (var idx in segs) {
@@ -124,7 +124,7 @@ const init = {
   },
   sidebar: () => {
     stellar.jQuery(() => {
-      $("#toc a.toc-link").click(function(e) {
+      $("#toc a.toc-link").click(function (e) {
         l_body.classList.remove("sidebar");
       });
     })
@@ -142,7 +142,7 @@ const init = {
   /**
    * Tabs tag listener (without twitter bootstrap).
    */
-  registerTabsTag: function() {
+  registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
     document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
@@ -192,7 +192,7 @@ if (stellar.plugins.scrollreveal) {
 
 // lazyload
 if (stellar.plugins.lazyload) {
-  stellar.loadScript(stellar.plugins.lazyload.js, {defer:true})
+  stellar.loadScript(stellar.plugins.lazyload.js, { defer: true })
   // https://www.npmjs.com/package/vanilla-lazyload
   // Set the options globally
   // to make LazyLoad self-initialize
@@ -217,16 +217,16 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.sitesjs) {
   const issues_api = document.getElementById('sites-api');
   if (issues_api != undefined) {
-    stellar.jQuery( () => {
-      stellar.loadScript(stellar.plugins.sitesjs, {defer:true})
+    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.jQuery(() => {
+      stellar.loadScript(stellar.plugins.friendsjs, { defer: true })
     })
   }
 }
@@ -236,7 +236,7 @@ if (stellar.plugins.swiper) {
   const swiper_api = document.getElementById('swiper-api');
   if (swiper_api != undefined) {
     stellar.loadCSS(stellar.plugins.swiper.css);
-    stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
+    stellar.loadScript(stellar.plugins.swiper.js, { defer: true }).then(function () {
       var swiper = new Swiper('.swiper-container', {
         slidesPerView: 'auto',
         spaceBetween: 8,
@@ -270,6 +270,39 @@ if (stellar.plugins.preload) {
       maxRPS: 5,
       hoverDelay: 25
     };
-    stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
+    stellar.loadScript(stellar.plugins.preload.flying_pages, { defer: true })
   }
 }
+
+// fancybox
+if (stellar.plugins.fancybox) {
+  let selector = 'img[fancybox]:not(.error)';
+  if (stellar.plugins.fancybox.selector) {
+    selector += `, ${stellar.plugins.fancybox.selector}`
+  }
+  if (document.querySelectorAll(selector).length !== 0) {
+    stellar.loadCSS(stellar.plugins.fancybox.css);
+    stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
+      Fancybox.bind(selector, {
+        groupAll: true,
+        hideScrollbar: false,
+        Thumbs: {
+          autoStart: false,
+        },
+        caption: function (fancybox, carousel, slide) {
+          return slide.$trigger.alt || null
+        }
+      });
+    })
+  }
+}
+
+// heti
+if (stellar.plugins.heti) {
+  stellar.loadCSS(stellar.plugins.heti.css);
+  stellar.loadScript(stellar.plugins.heti.js, { defer: true }).then(function () {
+    const heti = new Heti('.heti p');
+    heti.autoSpacing();
+    stellar.plugins.heti.enable = false;
+  });
+}