hexo-theme-stellar 1.30.3 → 1.30.4

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.30.3'
+  version: '1.30.4'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css

package/layout/_partial/head.ejs

@@ -100,7 +100,7 @@ function custom_inject() {
   <meta name="force-rendering" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
   <meta name="HandheldFriendly" content="True" >
-  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000">
   <meta name="theme-color" content="#f9fafb">

package/layout/layout.ejs

@@ -48,6 +48,7 @@ if (theme.style.prefers_theme === 'auto') {
     html += partial('_partial/cover/index')
     html += `<div class="l_body ${page_type}" id="start" layout="${page.layout}" type="${article_type}" ${indent ? 'text-indent' : ''}>`
       html += `<aside class="l_left">`
+        html += `<div class="sidebg"></div>`
         html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
           html += partial('_partial/sidebar/index_leftbar')
         html += `</div>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.30.3",
+  "version": "1.30.4",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/tags/index.js

@@ -40,6 +40,7 @@ hexo.extend.tag.register('navbar', require('./lib/navbar')(hexo))
 hexo.extend.tag.register('note', require('./lib/note')(hexo))
 hexo.extend.tag.register('poetry', require('./lib/poetry')(hexo), true)
 hexo.extend.tag.register('quot', require('./lib/quot')(hexo))
+hexo.extend.tag.register('quote', require('./lib/quote')(hexo), true)
 hexo.extend.tag.register('hashtag', require('./lib/hashtag')(hexo))
 hexo.extend.tag.register('okr', require('./lib/okr')(hexo), {ends: true})
 hexo.extend.tag.register('audio', require('./lib/audio')(hexo))

package/scripts/tags/lib/quote.js

@@ -0,0 +1,22 @@
+/**
+ * quote.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * quote:
+ * {% quote [indent:true/false] %}
+ * body
+ * {% endquote %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args, content) {
+  var el = ''
+  args = ctx.args.map(args, ['indent'], [])
+  
+  el += `<div class="tag-plugin quote" indent="${args.indent}">`
+  el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
+  el += `</div>`
+  return el
+}

package/source/css/_common/device.styl

@@ -49,10 +49,11 @@
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
   box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
+  &:before
+    background: var(--alpha50)
 
 .l_body[leftbar] .float-panel button.leftbar-toggle
   color: $color-theme
-  border-color: var(--block-border)
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -66,7 +67,6 @@
 
 .l_body[rightbar] .float-panel button.rightbar-toggle
   color: $color-theme
-  border-color: var(--block-border)
   svg g
     fill: currentColor
     fill-opacity: 0.3

package/source/css/_components/layout.styl

@@ -41,7 +41,7 @@
       --inset: 8px
       right: var(--inset)
       top: var(--inset)
-      max-height: 'calc(%s - 96px)' % (100vh)
+      max-height: 'calc(%s - %s)' % (100vh $rightbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
       background: var(--site-bg)
@@ -71,10 +71,10 @@
       --inset: 8px
       left: var(--inset)
       top: var(--inset)
-      max-height: 'calc(%s - 96px)' % (100vh)
+      max-height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
       .leftbar-container
         --inset: 8px
-        height: 'calc(%s - 96px)' % (100vh)
+        height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
     .l_main

package/source/css/_components/pages/article-story.styl

@@ -33,17 +33,23 @@
       position: relative
 
   h3:not([class])
+    position: relative
     &:before,&:after
-      color: hsla($color-theme, 0.5)
-      margin: 0 8px
+      position absolute
+      font-size: 1.2em
+      background-color: hsla($color-theme, 0.5)
+      width: 1em
+      height: 1em
+      content: ''
+      opacity 1
+      display: inline-block
       trans1 all
-    &:before 
-      content: '⏵'
+      vertical-align: middle
+    &:before
+      margin-left: -1em
+      svg-mask-icon($h3Left)
     &:after
-      content: '⏴'
-    &:hover
-      &:before,&:after
-        color: hsla($color-theme, 1)
+      svg-mask-icon($h3Right)
 
   h4:not([class])
     position: relative
@@ -56,12 +62,14 @@
       margin-top: -12px
       background: hsla($color-theme, 0.3)
       border-radius: 50%
-      filter: blur(12px)
+      --blur-px: 8px
+      filter: blur(var(--blur-px))
       pointer-events: none
       z-index: -1
-      trans1 all
+      trans1 all 0.5s
     &:hover:before
-      background: hsla($color-theme, 0.6)
+      --blur-px: 24px
+      background: hsla($color-theme, 1)
 
   ol,ul
     margin-left: 'calc(%s * 2)' % var(--fsp)
@@ -71,7 +79,7 @@
     >a:first-child
       display: none
   // 修正缩进效果
-  >blockquote
+  >blockquote,.tag-plugin.quote
     text-align: center
     --inset: calc(var(--fsp) * 2)
     margin-left: var(--inset)

package/source/css/_components/sidebar/sidebar.styl

@@ -2,9 +2,6 @@
   margin: 8px
   max-height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
-  overflow: hidden
-  overflow: clip
-  overflow-clip-margin: .5px
   .header
     margin: var(--gap-max) var(--gap-margin) 0
 
@@ -20,23 +17,70 @@
     margin-right: auto
 
 .l_left
-  background-position: center
-  background-size: cover
-  if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
-    background-image: convert(hexo-config('style.leftbar.background-image'))
-  else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
-    background: convert(hexo-config('style.leftbar.background'))
+  .sidebg
+    pointer-events: none
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    background-position: center
+    background-size: cover
+    border-radius: $border-card-l
+    --saturate: 300%
+    --blur-px: convert(hexo-config('style.leftbar.blur-px'))
+    --brightness: 100%
+    if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
+      if hexo-config('style.leftbar.blur-px')
+        left: 20%
+        right: 20%
+      background-image: convert(hexo-config('style.leftbar.background-image'))
+      filter: saturate(var(--saturate)) brightness(var(--brightness)) blur(var(--blur-px))
+      @media screen and (prefers-color-scheme: dark)
+        --blur-px: 'calc(%s * 0.75)' % convert(hexo-config('style.leftbar.blur-px'))
+        --saturate: 200%
+        --brightness: 75%
+    else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
+      background: convert(hexo-config('style.leftbar.background'))
+    
   .leftbar-container
     height: 'calc(%s - 16px)' % 100vh
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
-    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-px')
-      --blur-px: convert(hexo-config('style.leftbar.blur-px'))
-      @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-        background: var(--blur-bg)
-        backdrop-filter: saturate(240%) blur(var(--blur-px))
-        -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
-    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg')
-      --blur-bg: convert(hexo-config('style.leftbar.blur-bg'))
+    border-radius: $border-card-l
+    overflow: hidden
+    &:before,&:after
+      position: absolute
+      pointer-events: none
+      content: ''
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      border-radius: $border-card-l
+    &:before
+      @media screen and (min-width: $device-mobile-max)
+        background: rgba(white, 0.5)
+        box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
+        backdrop-filter: saturate(300%)
+        mask: linear-gradient(black, rgba(black, 0.5), 80%, transparent, 90%, transparent)
+
+      @media screen and (prefers-color-scheme: dark)
+        background: rgba(white, 0.05)
+        box-shadow: inset 0 0 32px 1px rgba(white, 0.2)
+
+@media screen and (max-width: $device-mobile-max)
+  .l_left
+    overflow: hidden
+    background: var(--alpha100)
+    .sidebg
+      left: 0
+      right: 0
+      --saturate: 300%
+      
+      
+@media screen and (max-width: $device-mobile-max) and (prefers-color-scheme: dark)
+  .l_left .leftbar-container:after
+    background: var(--alpha20)

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

@@ -0,0 +1,7 @@
+.tag-plugin.quote
+  position: relative
+  p:not([class])
+    text-indent: 0 !important
+  &[indent='true']
+    p:not([class])
+        text-indent: 'calc(%s * 2)' % var(--fsp) !important

package/source/css/_custom.styl

@@ -21,6 +21,9 @@ $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"
 
+$h3Left = "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 Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"
+$h3Right = "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 Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"
+
 if hexo-config('style.font-family.body')
   $ff-body = convert(hexo-config('style.font-family.body'))
 

package/source/css/_defines/const.styl

@@ -51,4 +51,8 @@ $c-blue = #2196f3
 $c-purple = #9c27b0
 
 $hue-yellow = 50
-$cDeepOrange = hsl(14 100% 57%)
+$cDeepOrange = hsl(14 100% 57%)
+
+
+$leftbar-bottom-margin = 128px
+$rightbar-bottom-margin = 96px