hexo-theme-stellar 1.28.1 → 1.29.1

package/source/css/_components/tag-plugins/read/reel.styl

@@ -0,0 +1,103 @@
+.md-text .tag-plugin.reel
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding-top: var(--gap-padding)
+  padding-bottom: var(--gap-padding)
+  >.content
+    display: flex
+    flex-direction: column
+    writing-mode: vertical-rl
+    border-top: 1px dashed var(--text-meta)
+    border-bottom: 1px dashed var(--text-meta)
+    max-width: calc(100% - 80px)
+    padding: 1rem
+    >.title
+      font-weight: 500
+      font-size: 1rem
+    >.meta
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500  
+    >.body
+      overflow: auto
+      scrollbar()
+      margin: 'calc(%s - 4px) %s' % var(--gap-padding)
+      .main
+        p
+          margin: 0;
+          font-size: $fs-14
+    >.date
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500
+      text-align: right
+      // margin-left: var(--gap-p)
+    >.footer
+      color: var(--text-p4)
+      font-size: $fs-12
+      text-align: right
+
+// 描边修饰
+.md-text .tag-plugin.reel>.content
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    width: 4px
+    left: -4px
+    top: -16px
+    bottom: -16px
+    border-radius: 4px
+    background: var(--block)
+  &:after
+    content: ''
+    position: absolute
+    width: 4px
+    left: calc(100%)
+    top: -16px
+    bottom: -16px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      right: calc(-1rem - 4px)
+      top: calc(-1rem - 6px)
+      bottom: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+      z-index: 1
+    &:after
+      content: ''
+      position: absolute
+      width: 4px
+      right: calc(-1rem - 4px)
+      top: calc(100% + 1rem - 6px)
+      bottom: calc(-1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+      z-index: 1
+  >.footer
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: calc(-1rem - 6px)
+      bottom: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+    &:after
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: calc(100% + 1rem - 6px)
+      bottom: calc(-1rem - 6px)
+      border-radius: 4px
+      background: $color-accent

package/source/css/_defines/func.styl

@@ -113,13 +113,11 @@ hoverable-card()
   ondark()
     &:hover
       box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
-  if theme(light)
+  :root[data-theme="light"] &
     onlight()
-  else if theme(dark)
+  :root[data-theme="dark"] &
     ondark()
-  else
-    @media (prefers-color-scheme: light)
-      onlight()
+  :root:not([data-theme]) &
+    onlight()
     @media (prefers-color-scheme: dark)
       ondark()
-  

package/source/css/_defines/theme.styl

@@ -1,3 +1,4 @@
+// Deprecated function. Keep for compatibility.
 theme($t)
   convert(hexo-config('style.prefers_theme')) == $t
 
@@ -40,47 +41,44 @@ _common_root()
     --theme-link: $color-link
 
 _light_root()
-  :root
-    --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
-    --card: hsl($color-block-h, $color-block-s, 100)
-    --block: hsl($color-block-h, $color-block-s, 95)
-    --block-border: hsl($color-block-h, $color-block-s, 90)
-    --block-hover: hsl($color-block-h, $color-block-s, 92)
-    --theme-link-opa: rgba($color-link, 0.2)
-    --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
-    --alpha20: rgba(white, 0.2)
-    --alpha50: rgba(white, 0.5)
-    --alpha60: rgba(white, 0.6)
-    --alpha75: rgba(white, 0.75)
-    --alpha100: white
-    _dark_text()
-    
+  --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
+  --card: hsl($color-block-h, $color-block-s, 100)
+  --block: hsl($color-block-h, $color-block-s, 95)
+  --block-border: hsl($color-block-h, $color-block-s, 90)
+  --block-hover: hsl($color-block-h, $color-block-s, 92)
+  --theme-link-opa: rgba($color-link, 0.2)
+  --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
+  --alpha20: rgba(white, 0.2)
+  --alpha50: rgba(white, 0.5)
+  --alpha60: rgba(white, 0.6)
+  --alpha75: rgba(white, 0.75)
+  --alpha100: white
+  _dark_text()
+
 _dark_root()
-  :root
-    --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
-    --card: hsl($color-block-h, $color-block-s * 1.2, 24)
-    --block: hsl($color-block-h, $color-block-s, 16)
-    --block-border: hsl($color-block-h, $color-block-s, 24)
-    --block-hover: hsl($color-block-h, $color-block-s, 20)
-    --theme-link-opa: rgba($color-link, 0.4)
-    --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
-    --alpha20: rgba(black, 0.2)
-    --alpha50: rgba(black, 0.5)
-    --alpha60: rgba(black, 0.6)
-    --alpha75: rgba(black, 0.75)
-    --alpha100: black
-    _light_text()
-    @media screen and (max-width: $device-mobile-max)
-      --site-bg: black
+  --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
+  --card: hsl($color-block-h, $color-block-s * 1.2, 24)
+  --block: hsl($color-block-h, $color-block-s, 16)
+  --block-border: hsl($color-block-h, $color-block-s, 24)
+  --block-hover: hsl($color-block-h, $color-block-s, 20)
+  --theme-link-opa: rgba($color-link, 0.4)
+  --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
+  --alpha20: rgba(black, 0.2)
+  --alpha50: rgba(black, 0.5)
+  --alpha60: rgba(black, 0.6)
+  --alpha75: rgba(black, 0.75)
+  --alpha100: black
+  _light_text()
+  @media screen and (max-width: $device-mobile-max)
+    --site-bg: black
 
 _common_root()
-// 默认自动模式
-if theme(light)
+
+:root[data-theme="light"]
   _light_root()
-else if theme(dark)
+:root[data-theme="dark"]
   _dark_root()
-else
-  @media (prefers-color-scheme: light)
-    _light_root()
+:root:not([data-theme])
+  _light_root()
   @media (prefers-color-scheme: dark)
-    _dark_root()
+    _dark_root()

package/source/css/_plugins/comments/waline.styl

@@ -36,7 +36,7 @@
   --waline-border: 1px solid var(--waline-border-color);
   --waline-avatar-radius: 50%;
   --waline-box-shadow: none;
-  
+
 .cmt-body.waline
   ondark()
     --waline-white: #000;
@@ -61,8 +61,8 @@
       font-size: 1.25em;
       color: #fff;
 
-  if theme(dark)
+  :root[data-theme="dark"] &
     ondark()
-  else if theme(auto)
+  :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
       ondark()

package/source/css/_plugins/mermaid.styl

@@ -108,8 +108,8 @@ _dark_mermaid()
     fill: #ccc
 
 
-if theme(dark)
+:root[data-theme="dark"]
   _dark_mermaid()
-else if theme(auto)
+:root:not([data-theme])
   @media (prefers-color-scheme: dark)
     _dark_mermaid()

package/source/js/main.js

@@ -58,6 +58,20 @@ const util = {
   scrollComment: () => {
     document.getElementById('comments').scrollIntoView({behavior: "smooth"});
   },
+
+  viewportLazyload: (target, func, enabled = true) => {
+    if (!enabled || !("IntersectionObserver" in window)) {
+      func();
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio > 0) {
+        func();
+        observer.disconnect();
+      }
+    });
+    observer.observe(target);
+  }
 }
 
 const hud = {

package/source/js/search/local-search.js

@@ -64,7 +64,7 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
           var dataTitleLowerCase = dataTitle.toLowerCase();
           var dataContent = data.content;
           var dataContentLowerCase = dataContent.toLowerCase();
-          var dataUrl = data.path;
+          var dataUrl = data.path.startsWith('//') ? data.path.slice(1) : data.path; // 避免文章设置永久链接导致点击打开失败
           var indexTitle = -1;
           var indexContent = -1;
           var firstOccur = -1;
@@ -167,4 +167,4 @@ utils.jq(() => {
       }
     });
     observer.observe($resultArea, { childList: true });
-  });
+  });