hexo-theme-stellar 1.30.1 → 1.30.3

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

@@ -31,32 +31,32 @@
     font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
-// type=text
-.md-text .tag-plugin.quot
-  .content[type=text]
-    &:before,&:after
-      content: ""
-      position: absolute
-      width: 8px
-      height: 14px
-    &:before
-      top: -8px
-      left: 0
-      border-top: 6px solid $color-accent
-      border-left: 6px solid $color-accent
-    &:after
-      right: 0
-      bottom: -8px
-      border-right: 6px solid $color-accent
-      border-bottom: 6px solid $color-accent
-  h1.content[type=text]
-    &:before,&:after
-      width: 12px
-      height: 20px
-      border-width: 8px
+// // type=text
+// .md-text .tag-plugin.quot
+//   .content[type=text]
+//     &:before,&:after
+//       content: ""
+//       position: absolute
+//       width: 8px
+//       height: 14px
+//     &:before
+//       top: -8px
+//       left: 0
+//       border-top: 6px solid $color-accent
+//       border-left: 6px solid $color-accent
+//     &:after
+//       right: 0
+//       bottom: -8px
+//       border-right: 6px solid $color-accent
+//       border-bottom: 6px solid $color-accent
+//   h1.content[type=text]
+//     &:before,&:after
+//       width: 12px
+//       height: 20px
+//       border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot .content[type=icon]
+.md-text .tag-plugin.quot
   img,svg
     height: 1.5em
     display: inline-block
@@ -68,4 +68,30 @@
     padding-top: 1px
   span.empty
     padding: 0 8px
-  
+
+.md-text .tag-plugin.quot.p
+  .content
+    trans1 all
+  .content .text
+    position: relative
+  .content .text:after
+    content: ""
+    position: absolute
+    --width: 90%
+    width: var(--width)
+    height: 4px
+    left: calc(50% - var(--width) / 2)
+    bottom: -8px
+    border-radius: 100%
+    background: var(--text)
+    opacity: 0.2
+    filter: blur(2px)
+    trans1 all
+  &:hover
+    .content
+      transform: translateY(-4px) scale(1.05)
+      .text:after
+        opacity: 0.3
+        filter: blur(8px)
+        transform: translateY(4px) scale(1.2, 1.5)
+

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

@@ -15,6 +15,7 @@
     aspect-ratio: 1.5
     width: 100%
     height: 100%
+    border-radius: $border-card-s
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
   .info
     margin-top: 0.5rem

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

@@ -6,13 +6,15 @@
   flex-direction: column
   &[align=left]
     align-items: flex-start
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-start
   &[align=center]
     align-items: center
+    .nav-tabs,.tab-content
+      align-items: center
   &[align=right]
     align-items: flex-end
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-end
 
 .tag-plugin.tabs
@@ -75,18 +77,14 @@
     max-width: 100%
     text-align: justify
     margin-top: .5rem
+    display: flex
+    flex-direction: column
     .tab-pane
       display: block
+      overflow: hidden
       &:not(.active)
-        visibility: hidden
         height: 0
       &.active
-        visibility: visible
         height: auto
-  .tab-content:has(.grid-box)
+  .tab-content:has(.grid-box),.tab-pane:has(.grid-box)
     width: 100%
-
-.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
-  text-indent: 'calc(%s * 2)' % var(--fsp)
-  a
-    text-indent: 0

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

@@ -15,6 +15,10 @@
     padding-left: 0
     &:before
       display: none
+.l_body[type=story] .md-text.content 
+  .tag-plugin.timeline
+    ol,ul
+      margin-left: 0
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -82,7 +86,7 @@
 
 .tag-plugin.timeline .body
   background: var(--card)
-  border-radius: $border-card
+  border-radius: 16px
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -113,32 +117,21 @@
     font-weight: 700
     margin: 0.5rem 0 0.75rem
     line-height: 1.25
+    border-bottom: 1px solid var(--block-border)
     &:only-child 
       margin-bottom: 0.5rem
       font-weight: 500
     a 
       color: inherit
       text-decoration: none
-      border-bottom: 2px solid $color-theme
+      padding-bottom: 0.75rem
+      display: inline-block
       trans1 all
-      background: none
       &:hover
-        background: none
-        border-radius: 0
-        border-bottom: 2px solid $color-hover
-  >p:first-child:not([class]) a:not([class])
-    padding: 0
-    margin: 0
-    color: inherit
-    text-decoration: none
-    border-bottom: 2px solid $color-theme
-    trans1 all
-    background: none
-    &:hover
-      background: none
-      border-radius: 0
-      border-bottom: 2px solid $color-hover
-    
+        color: $color-hover
+  >p:first-child:not([class])
+    font-size: 1rem
+    margin: .25rem 0 .5rem
   
   a
     &:has(img):after
@@ -159,7 +152,6 @@
   flex-wrap: wrap
   justify-content: space-between
   align-items: stretch
-  background: var(--card)
   span
     line-height: 1.8
   &:empty

package/source/css/_components/widgets/ghrepo.styl

@@ -4,7 +4,7 @@
     padding: 0.75rem 0.5rem
     color: var(--text-p2)
     background: var(--card)
-    border-radius: $border-card
+    border-radius: $border-card-s
     hoverable-card()
     >div+div
       margin-top: 0.5rem

package/source/css/_components/widgets/ghuser.styl

@@ -4,7 +4,7 @@
 .widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 1rem
   box-shadow: $boxshadow-card
 

package/source/css/_components/widgets/markdown.styl

@@ -1,9 +1,10 @@
 .widget-wrapper.markdown
   .widget-body
-    border-radius: $border-card
-    padding: 4px 16px
+    border-radius: $border-card-s
+    padding: .25rem 1rem
     background: var(--alpha50)
-
+    >*:first-child
+      margin-top: .75rem
     a:not([class])
       trans1 all
       border-bottom: 1px solid var(--text)

package/source/css/_components/widgets/related.styl

@@ -7,7 +7,7 @@
     line-height: 1.2
     background: var(--alpha20)
     padding: 10px 16px
-    border-radius: $border-card
+    border-radius: $border-card-s
     display: block
     border-left: 0
     box-sizing: border-box

package/source/css/_components/widgets/tagcloud.styl

@@ -1,5 +1,5 @@
 .widget-wrapper.tagcloud .widget-body
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 12px 16px
   background: var(--alpha50)
   a  

package/source/css/_components/widgets/timeline.styl

@@ -24,7 +24,7 @@
     .header:before
       left: calc(6px - var(--gap-padding))
     .body
-      border-radius: $border-card
+      border-radius: $border-card-s
       padding: 0.5rem 1rem
       p,li
         --fsp: $fsp3

package/source/css/_components/widgets/toc.styl

@@ -55,7 +55,7 @@
   padding: 16px 0
   &:first-child
     top: 8px
-    padding-top: 8px
+    padding-top: 1rem
   .widget-body .toc
     max-height: 70vh
     @media screen and (max-width: $device-laptop)

package/source/css/_components/widgets/widgets.styl

@@ -77,7 +77,7 @@
   @media screen and (max-width: $device-laptop)
     .widget-wrapper
       margin-top: var(--gap-margin)
-      border-radius: $border-card
+      border-radius: $border-card-s
   // 大屏幕
   @media screen and (min-width: $device-laptop)
     .widget-wrapper.markdown .widget-body

package/source/css/_custom.styl

@@ -18,6 +18,9 @@ $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sa
 $ff-code = $ff-codeblock
 $ff-logo = $ff-body
 
+$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
+$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
+
 if hexo-config('style.font-family.body')
   $ff-body = convert(hexo-config('style.font-family.body'))
 
@@ -55,9 +58,10 @@ $fsp3 = 'calc(%s - 3px)' % $fs-body
 
 $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
+$border-card-s = convert(hexo-config('style.border-radius.card-s'))
 $border-bar = convert(hexo-config('style.border-radius.bar'))
 $border-image = convert(hexo-config('style.border-radius.image'))
-$border-button = 4px
+$border-button = 8px
 
 // 可以动态变化的属性
 :root
@@ -94,7 +98,7 @@ $border-button = 4px
   --gap-max: calc(var(--gap-margin) + var(--gap-padding))
 
 // 文章布局风格
-.l_body.story
+.l_body[type=story]
   --gap-p: 2rem
   div.tag-plugin,p>img
     margin-top: 2.4rem

package/source/css/_defines/const.styl

@@ -1,6 +1,7 @@
 // 用来进行设备适配，请勿修改
 $device-mobile-375 = 375px
 $device-mobile-425 = 425px
+$device-mobile-iphone-max = 450px
 $device-mobile = 500px
 $device-mobile-max = 667px
 $device-tablet = 768px
@@ -48,3 +49,6 @@ $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3
 $c-purple = #9c27b0
+
+$hue-yellow = 50
+$cDeepOrange = hsl(14 100% 57%)

package/source/css/_defines/func.styl

@@ -1,3 +1,13 @@
+svg-mask-icon($svg)
+  -webkit-mask-image: url($svg)
+  -webkit-mask-repeat: no-repeat
+  -webkit-mask-position: center
+  -webkit-mask-size: contain
+  mask-image: url($svg)
+  mask-repeat: no-repeat
+  mask-position: center
+  mask-size: contain
+
 
 // // 可替代 transition 使用
 // transition($op = all, $time = 0.28s, $ease = ease-out)
@@ -122,3 +132,30 @@ hoverable-card()
     onlight()
     @media (prefers-color-scheme: dark)
       ondark()
+
+newblur()
+  box-shadow: 0 0 2px rgba(black, .05), 0 0 8px rgba(black, .05)
+  trans1: all
+  &:before,&:after
+    z-index -1
+    position: absolute
+    pointer-events: none
+    content: ''
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+    border-radius: 64px
+  &:before
+    backdrop-filter: blur(8px)
+  &:after
+    --blur-px: 16px
+    --blur-sat: 500%
+    background: var(--alpha50)
+    backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1))
+    box-shadow: inset 0 0 8px 1px white
+    trans1 all
+    @media (prefers-color-scheme: dark)
+      opacity 0.4
+      background: var(--alpha20)

package/source/css/_defines/theme.styl

@@ -1,3 +1,7 @@
+// 通用 hsla 函数
+hsla-var(h = var(--hue), s = var(--sat), l = var(--light), a = 1)
+  return unquote('hsla(%s, %s, %s, %s)' % (h s l a))
+
 // Deprecated function. Keep for compatibility.
 theme($t)
   convert(hexo-config('style.prefers_theme')) == $t
@@ -43,6 +47,11 @@ _common_root()
     --theme-link: $color-link
     --theme-color: $color-theme
     --theme-color-opa: $color-theme-opa
+    // new
+    --hue: 50
+    --sat: 90%
+    --light: 80%
+    --dynamic-color: hsla-var()
 
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)

package/source/js/services/artalk_latest_comment.js

@@ -9,7 +9,8 @@ utils.jq(() => {
         if (api == null) {
           continue;
         }
-        utils.request(el, api, function (data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           data = data.data || [];
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';

package/source/js/services/fcircle.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const arr = data.article_data || [];
         const limit = el.getAttribute('limit');
         arr.forEach((item, i) => {

package/source/js/services/friends.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         for (let item of (data.content || data)) {
           var cell = `<div class="grid-cell user-card">`;
           cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.html_url || item.url}">`;;

package/source/js/services/friends_and_posts.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         for (let item of (data.content || data)) {
           var cell = `<div class="grid-cell user-post-card">`;
           cell += `<div class="avatar-box">`;

package/source/js/services/ghinfo.js

@@ -8,7 +8,8 @@ utils.jq(() => {
         continue;
       }
       // layout
-      utils.request(null, api, function(data) {
+      utils.request(null, api, async resp => {
+        const data = await resp.json();
         function fill(data) {
           for (let key of Object.keys(data)) {
             $(el).find("[type=text]#" + key).text(data[key]);

package/source/js/services/giscus_latest_comment.js

@@ -9,7 +9,8 @@ utils.jq(() => {
         }
         const default_avatar = def.avatar;
         // layout
-        utils.request(el, api, function(data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           const limit = el.getAttribute('limit');
           data.forEach((item, i) => {
             if (limit && i >= limit) {

package/source/js/services/mdrender.js

@@ -3,8 +3,11 @@ utils.jq(() => {
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
-    utils.request(el, src, function(data) {
-      el.innerHTML = marked.parse(resp.data);
+    console.log('src', src);
+    
+    utils.request(el, src, async resp => {
+      const data = await resp.text();
+      el.innerHTML = marked.parse(data);
     });
   }
 });

package/source/js/services/memos.js

@@ -9,7 +9,8 @@ utils.jq(() => {
     const limit = el.getAttribute('limit');
     const host = api.match(/https:\/\/(.*?)\/(.*)/i)[1];
 
-    utils.request(el, api, async data => {
+    utils.request(el, api, async resp => {
+      const data = await resp.json();
       let memos = versionHandlers.identify(data);
       if (memos.version === "feature" )return;
 

package/source/js/services/sites.js

@@ -10,7 +10,8 @@ utils.jq(() => {
       const default_avatar = def.avatar;
       const default_cover = def.cover;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         for (let item of data.content) {
           var cell = `<div class="grid-cell site-card">`;
           cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`;

package/source/js/services/timeline.js

@@ -18,7 +18,8 @@ utils.jq(() => {
         continue;
       }
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const query = new URL(api).search;
         const arr = data.content || data;
         var users = [];

package/source/js/services/waline_latest_comment.js

@@ -10,7 +10,8 @@ utils.jq(() => {
         }
         const api = apiBase + '/comment?type=recent&count=' + limit;
         const default_avatar = def.avatar;
-        utils.request(el, api, function(data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';
             cell += '<div class="header">';

package/source/js/services/weibo.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = el.getAttribute('avatar') || def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const arr = data.tweets || [];
         const limit = el.getAttribute('limit');
         arr.forEach((item, i) => {