hexo-theme-stellar 1.26.7 → 1.27.0

package/source/css/_layout/layout.styl

@@ -1,57 +1,92 @@
 .l_body
   display: grid
+  grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
+  grid-gap: var(--gap-margin)
   margin: auto
-  padding: 0 var(--gap-l)
   font-size: var(--fsp)
-  grid-template-columns: 1fr minmax(200px, 688px) 1fr
 
-.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,19 @@
   color: var(--text-p2)
   a
     color: var(--text-p2)
+    border-radius: 2px
     &: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 +27,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 +39,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/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,39 @@
 .l_left
-  margin: 8px 8px 8px 0
+  margin: 8px
   height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card-l
   overflow: hidden
   .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/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

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

@@ -1,4 +1,4 @@
-.md-text .tag-plugin.timeline
+.tag-plugin.timeline
   position: relative
   padding-left: 16px
   &:before
@@ -16,7 +16,7 @@
     &:before
       display: none
 
-.md-text .tag-plugin.timeline .timenode
+.tag-plugin.timeline .timenode
   position: relative
   display: flex
   flex-direction: column
@@ -31,12 +31,8 @@
   &+.timenode
     margin-top: 1rem
   &:hover .header
-    p
+    span
       color: var(--text-p1)
-    .user-info
-      background: $color-theme
-      span
-        color: var(--card)
     &:before
       background: $color-theme
       height: 16px
@@ -49,17 +45,17 @@
   position: relative
   margin: 0.25rem 0
   font-size: $fs-13
+  a.user-info span
+    font-weight: 600
   .user-info 
     display: flex
     align-items: center
     font-size: $fs-13
     font-weight: 500
     color: var(--text-p1)
-    margin-right: 4px
+    margin-right: 8px
     line-height: 1
     border-radius: 16px
-    padding-right: 6px
-    trans2 color background
     img 
       background: white
       height: 16px
@@ -67,19 +63,10 @@
       display: inline
       margin: 0 4px 0 0
       object-fit: contain
-    &:hover
-      background: $color-hover
-  &,p  
+  &,span
     font-weight: 500
     color: var(--text-p3)
-    trans1 color
     line-height: 1
-  p
-    margin: 0 !important
-    font-size: $fs-13 !important
-    a
-      color: inherit
-      font-weight: inherit
   &:before
     content: ''
     position: absolute
@@ -112,11 +99,6 @@
     width: 240px
 
 .tag-plugin.timeline[api]
-  &.stellar-fcircle-api .timenode:hover .header
-    .user-info
-      background: inherit
-      span
-        color: inherit
   a.body
     display: block
     color: var(--text-p1)
@@ -139,7 +121,10 @@
       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
   >p:first-child:not([class]) a:not([class])
     padding: 0
@@ -148,7 +133,10 @@
     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
     
   
@@ -181,6 +169,8 @@
     flex-wrap: wrap
     font-size: $fs-13
     align-items: stretch
+  .left+.right
+    margin-left: 4px
 
 .tag-plugin.timeline[api] .body .footer
   .item
@@ -191,10 +181,18 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
+    border-color: $color-link
     &:first-child 
       margin-left: 0
     &:last-child 
       margin-right: 0
+  a.item
+    background: var(--block)
+    border-color: var(--block-border)
+    color: inherit
+    &:hover
+      background: var(--block-hover)
+      
   .reaction 
     border-color: var(--block)
 
@@ -222,14 +220,15 @@
     margin: 0.5rem 0
     line-height: 1.2
 
-.tag-plugin.timeline.stellar-memos-api .body
+.tag-plugin.timeline.ds-memos .body
   p:first-child 
     margin-top: 2px
   p:last-child
     margin-bottom: 2px
   img  
-    margin: 0
+    margin: .5rem 0
     max-height: 128px
+    cursor: zoom-in
   .tag-plugin.image
     display: flex
     .image-bg+.image-bg

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

@@ -5,7 +5,7 @@
     color: var(--text-p2)
     background: var(--card)
     border-radius: $border-card
-    box-shadow: $boxshadow-card
+    hoverable-card()
     >div+div
       margin-top: 0.5rem
     span