hexo-theme-stellar 1.26.8 → 1.28.0

package/source/css/_defines/theme.styl

@@ -1,3 +1,6 @@
+theme($t)
+  convert(hexo-config('style.prefers_theme')) == $t
+
 $color-background-h = hue($color-background)
 $color-background-s = saturation($color-background)
 $color-background-l = lightness($color-background)
@@ -14,7 +17,7 @@ $color-text-h = hue($color-text)
 $color-text-s = saturation($color-text)
 $color-text-l = lightness($color-text)
 
-set_text_dark()
+_dark_text()
   --text: hsl($color-text-h, $color-text-s, 0)
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
@@ -23,7 +26,7 @@ set_text_dark()
   --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
-set_text_light()
+_light_text()
   --text: hsl($color-text-h, $color-text-s, 100)
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
@@ -32,44 +35,52 @@ set_text_light()
   --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
   --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
 
-:root
-  --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
-  --card: hsl($color-block-h, $color-block-s, 100)
-  --alpha20: rgba(white, 0.2)
-  --alpha50: rgba(white, 0.5)
-  --alpha60: rgba(white, 0.6)
-  --alpha75: rgba(white, 0.75)
-  --alpha100: white
-  --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
-  --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)
-  set_text_dark()
-  --theme-link: $color-link
-  --theme-link-opa: rgba($color-link, 0.2)
+_common_root()
+  :root
+    --theme-link: $color-link
 
-set_darkmode()
+_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()
+    
+_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
-    --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
-    set_text_light()
+    _light_text()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black
 
-if hexo-config('style.darkmode') == 'auto'
-  // 系统的dark模式
+_common_root()
+// 默认自动模式
+if theme(light)
+  _light_root()
+else if theme(dark)
+  _dark_root()
+else
+  @media (prefers-color-scheme: light)
+    _light_root()
   @media (prefers-color-scheme: dark)
-    set_darkmode()
-
-
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode()
+    _dark_root()

package/source/css/_layout/layout.styl

@@ -1,57 +1,92 @@
 .l_body
-  display: flex
+  display: grid
+  grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
+  grid-gap: var(--gap-margin)
   margin: auto
-  padding: 0 var(--gap-l)
-  justify-content: center
   font-size: var(--fsp)
 
-.l_body .l_left
+.l_body aside
   z-index: 8
-  width: var(--width-left)
   flex-shrink: 0
   position: sticky
   position: -webkit-sticky
-  top: 8px
+  // 侧边栏容器宽度
+  --width-sidebar: calc(var(--gap-margin) * 2 + var(--gap-padding) * 2 + var(--side-content-width))
+  width: var(--width-sidebar)
 
-.l_body .l_main
-  flex-shrink: 1
-  flex-grow: 1
-  width: 320px
-  max-width: var(--width-main)
+.l_body .l_left
+  justify-self: right
+  top: 8px
+.l_body .l_right
+  justify-self: left
+  --gap-margin: 0px
+  max-height: calc(100% - 8px * 2)
+  .widgets
+    height: 100%
+    overflow visible
 
+// 平板布局
+@media screen and (max-width: $device-laptop)
+  .l_body .l_right
+    --gap-margin: 16px
+  .laptop-only
+    display: block !important
+  .l_body
+    .l_right
+      top: 8px
+      position: fixed
+      max-height: calc(100% - 8px * 2)
+      transform: translateX(320px)
+      transition: transform .38s ease-out
+      margin: 0
+      right: 8px
+      box-shadow: $boxshadow-card-float
+      z-index: 10
+      background: var(--site-bg)
+      overflow: auto
+      scrollbar(0, 0)
+      --blur-bg: var(--alpha60)
+      --blur-px: 50px
+  .l_body[rightbar]
+    .l_right
+      transform: translateX(0px)
+    .main-mask
+      // opacity 1
+      pointer-events: inherit
 
 // 手机布局
-.main-mask
-  position: fixed
-  pointer-events: none
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  background: rgba(black, 0.2)
-  z-index: 9
-  opacity 0
-  trans1 opacity
 @media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
   .l_body
     padding: 0
+    display: block
     .l_left
       position: fixed
       transform: translateX(-320px)
+      transition: transform .38s ease-out
       margin: 0
       left: 8px
       box-shadow: $boxshadow-card-float
       z-index: 10
     .l_main
       max-width: 100%
-  .l_body.mobile
-    .l_left
-      transition: transform .38s ease-out
-  .l_body.mobile.sidebar
+  .l_body[leftbar]
     .l_left
       transform: translateX(0px)
     .main-mask
       opacity 1
-      pointer-events: inherit
+      pointer-events: inherit
+
+
+.main-mask
+  position: fixed
+  pointer-events: none
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background: rgba(black, 0.1)
+  z-index: 9
+  opacity 0
+  trans1 opacity

package/source/css/_layout/list.styl

@@ -7,7 +7,7 @@
 .l_main .post-list
   .post-title
     font-weight: 500
-    margin: 1.25rem 0 .75rem 0
+    margin: 1.25rem auto .75rem 0
     line-height: 1.2
     font-size: $fsh4
     border-bottom: none

package/source/css/_layout/main.styl

@@ -1,9 +1,6 @@
 .l_main
   position: relative
-  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 / 2)" % (var(--gap-l) var(--width-left))
+  padding-bottom: var(--gap-max)
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
   header

package/source/css/_layout/md.styl

@@ -20,15 +20,25 @@
   overflow: hidden
 
 .l_body[text-indent] .md-text.content
-  >p
+  // 应用缩进效果
+  p:not([class])
     text-indent: 'calc(%s * 2)' % var(--fsp)
     text-align: justify
+    a
+      text-indent: 0
+  ol,ul
+    margin-left: 0.5em
   h1,h2,h3,h4,h5,h6
     text-align: center
     a.headerlink
       display: none
   h2
     margin: 2em 0 1.5em
+  // 取消缩进效果
+  blockquote, .poetry, .okr, .timeline, li, .article-footer
+    p:not([class])
+      text-indent: 0
+      text-align: convert(hexo-config('style.text-align'))
 
 .md-text
   ul:not(:last-child),
@@ -108,14 +118,18 @@
   margin: auto
   display: block
 
-.md-text li:not([class]) a:not([class]), .md-text p:not([class]) a:not([class])
+li:not([class]) a:not([class])
+p:not([class]) a:not([class])
+table a:not([class])
   position: relative
   text-decoration: none
   trans1 all
   padding: 0 2px
   border-radius: 0
+  color: inherit
   background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
   &:hover
+    text-decoration: none
     color: var(--theme-link)
     border-radius: 4px
     background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%

package/source/css/_layout/pages/archives.styl

@@ -100,3 +100,7 @@
         opacity: 1
       color: var(--text)
       background: var(--block-hover)
+
+@media screen and (min-width: $device-mobile)
+  .post-list.author #archive
+    padding: 1rem 0

package/source/css/_layout/partial/article-banner.styl

@@ -6,7 +6,7 @@
 
 .article.banner
   .bg+.content
-    min-height: 240px
+    min-height: 224px
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
 
@@ -17,13 +17,14 @@
   .title
     font-size: $fsh1
     color: var(--text-banner)
-  .bottom
-    padding: 2rem 1rem
   h1
     line-height: 1.2
-    margin: 0
-  
-.l_body[text-indent] .article.banner .content .bottom
+    margin: 0.25rem 0
+
+.l_body .article.banner .content .bottom.only-title .title
+  padding: 0.75rem 0
+
+.l_body[text-indent] .article.banner .content .bottom.only-title
   justify-content: center
   
 
@@ -31,7 +32,7 @@
 .article.banner
   .bg+.content
     trans1 all
-    --blur-bg: rgba(black, 0.1)
+    --blur-bg: rgba(black, 0)
     --blur-px: 0px
     --blur-sat: 100%
     background: var(--blur-bg)
@@ -47,12 +48,10 @@
 
 .article.banner
   --button-hover-bg: rgba(black, 0.05)
-set_darkmode()
-  .article.banner
+  ondark()
     --button-hover-bg: rgba(white, 0.15)
-
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode()
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode()
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()

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

@@ -30,11 +30,6 @@
       word-break: break-all
       p
         --fsp: $fsp2
-      a
-        text-decoration: none
-        color: unset
-        &:hover
-          text-decoration: underline
   section+section
     margin-top: 1rem
     padding-top: 1rem

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

@@ -3,15 +3,20 @@
   color: var(--text-p2)
   a
     color: var(--text-p2)
+    border-radius: 4px
+    transition: background 0.2s ease-out
     &:hover
-      color: $color-hover
+      color: var(--text)
+      background: var(--block-hover)
 
 .page-footer .sitemap
-  margin: .5rem 0 2rem
+  margin: .5rem -4px 2rem
   display: grid
   scrollbar-width: none
   grid-gap: 1rem 1rem
   grid-auto-flow: column dense
+  // grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
+  grid-template-columns: repeat(4, 1fr)
   overflow: scroll
   scrollbar(0, 0)
 
@@ -23,12 +28,11 @@
   >span,>a
     text-decoration: none
     txt-ellipsis()
+    padding: 4px
   >span
-    margin: .5rem 0
     font-weight: 500
     color: var(--text-p1)
-  >a
-    margin: .2rem 0
+    margin: 4px 0
 
 
 .page-footer .text
@@ -36,5 +40,4 @@
     margin: 4px 0
     line-height: 1.5
   a:not([class])
-    text-decoration: underline
     font-weight: 500

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

@@ -101,3 +101,7 @@ article.md-text.content+.related-wrap
     position: relative
     svg.loading
       top: 60px
+    iframe
+      border-radius: $border-card
+      border: none
+      width: 100%

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

@@ -1,5 +1,5 @@
 .l_left footer.footer
-  margin: 0.5rem var(--gap-l) 1rem
+  margin: 0.5rem var(--gap-max) 1rem
 
 .social-wrap
   display: grid
@@ -19,3 +19,5 @@
       z-index: 1
       filter: unset
       background: var(--alpha100)
+    img
+      border-radius: 2px

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

@@ -3,8 +3,10 @@
   align-items: center
   overflow: hidden
   min-height: 48px
-  img
+  img.avatar
     object-fit: cover
+  img.icon
+    object-fit: contain
   .icon
     width: 48px
     height: 48px

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

@@ -49,5 +49,5 @@
       transform: translateX(-50%)
       border-radius: 2px
       bottom: 2px
-      background: var(--text-p1)
+      background: currentColor
 

package/source/css/_layout/sidebar/nav-area.styl

@@ -1,2 +1,2 @@
 .nav-area
-  margin: 32px var(--gap-l) 0
+  margin: 32px var(--gap-margin) 0

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

@@ -1,32 +1,41 @@
 .l_left
-  margin: 8px 8px 8px 0
+  margin: 8px
   height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
   overflow: hidden
+  overflow: clip
+  overflow-clip-margin: .5px
   .header
-    margin: var(--gap-l) var(--gap-l) 0
-    margin-top: "calc(2 * %s)" % var(--gap-l)
-  @media screen and (min-width: $device-mobile-max)
-    >.widgets:first-child>.widget-wrapper:first-child
-      margin-top: "calc(2 * %s)" % var(--gap-l)
-  
+    margin: var(--gap-max) var(--gap-margin) 0
+
+.l_right
+  margin: 8px
+  border-radius: $border-card-l
+@media screen and (min-width: $device-2k)
+  .l_left
+    margin-left: auto
+    margin-right: calc(2 * var(--gap-max))
+  .l_right
+    margin-left: var(--gap-max)
+    margin-right: auto
+
 .l_left
   background-size: cover
-  if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image')
-    background-image: convert(hexo-config('style.sidebar.background-image'))
-  else if hexo-config('style.sidebar') && hexo-config('style.sidebar.background')
-    background: convert(hexo-config('style.sidebar.background'))
-  .sidebar-container
+  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'))
+  .leftbar-container
     height: 100%
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
-    if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px')
-      --blur-px: convert(hexo-config('style.sidebar.blur-px'))
+    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.sidebar') && hexo-config('style.sidebar.blur-bg')
-      --blur-bg: convert(hexo-config('style.sidebar.blur-bg'))
+    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg')
+      --blur-bg: convert(hexo-config('style.leftbar.blur-bg'))

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

@@ -127,13 +127,6 @@
 .tag-plugin.banner .navbar a.active
   blur-effect()
 
-@media screen and (min-width: $device-mobile-max)
-  .banner.author.top
-    margin-left: var(--gap-l)
-    margin-right: var(--gap-l)
-  
 @media screen and (max-width: $device-mobile-max)
   .banner.top
-    border-radius: 0
-  .md-text.content:first-child .tag-plugin.banner:first-child
-    margin-top: 1rem
+    border-radius: 0

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

@@ -30,6 +30,8 @@ set_dynamic_color($theme)
   set_dynamic_color($c-red)
 .colorful[color='orange']
   set_dynamic_color($c-orange)
+.colorful[color='amber']
+  set_dynamic_color($c-amber)
 .colorful[color='yellow']
   set_dynamic_color($c-yellow)
 .colorful[color='green']
@@ -66,7 +68,7 @@ set_dynamic_color($theme)
   --theme-link: #ffe659
   set_text_white()
 
-set_darkmode_tags()
+_dark_tags()
   set_dynamic_color($theme)
     --theme: $theme
     --theme-border: hsl(hue($theme), 50, 24)
@@ -81,6 +83,8 @@ set_darkmode_tags()
     set_dynamic_color($c-red)
   .colorful[color='orange']
     set_dynamic_color($c-orange)
+  .colorful[color='amber']
+    set_dynamic_color($c-amber)
   .colorful[color='yellow']
     set_dynamic_color($c-yellow)
   .colorful[color='green']
@@ -104,9 +108,10 @@ set_darkmode_tags()
   .colorful[color='warning'],.colorful[color='light']
     set_text_black()
 
-if hexo-config('style.darkmode') == 'auto'
+
+if theme(dark)
+  _dark_tags()
+else if theme(auto)
   @media (prefers-color-scheme: dark)
-    set_darkmode_tags()
+    _dark_tags()
 
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode_tags()

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

@@ -6,3 +6,4 @@
     display: block
     object-fit: contain
     height: 1.75em
+    border-radius: 0

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

@@ -10,3 +10,9 @@ span.tag-plugin.icon
     color: var(--theme)
   img
     object-fit: contain
+
+p>strong>span.tag-plugin.icon
+  margin: -4px 4px 0 0
+
+.tag-plugin.icon-wrap span.tag-plugin.icon
+  margin-right: 4px

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

@@ -24,7 +24,7 @@
       color: var(--text-p1)
       &:hover
         background: var(--card) !important
-        color: $color-hover
+        color: $color-theme
   .image-meta
     display: flex
     justify-content: center

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

@@ -30,7 +30,7 @@
   h3,h4,h5,h6
     font-size: $fsh3
   p
-    --fsp: $fsh4
+    font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
 // type=text