hexo-theme-stellar 1.11.0 → 1.12.0

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

@@ -1,5 +1,6 @@
 .related-wrap
-  padding: 2rem 1rem
+  padding: 1rem
+  margin: 2rem 0
   &:empty
     display: none
   section.header
@@ -18,108 +19,76 @@
     color: var(--text-p1)
 
 
-.related-wrap#related-posts
-  .related-posts
-    width: 100%
-    display: flex
-    margin: 1rem 0
-    overflow-x: scroll
-    align-items: flex-start
-    scrollbar(8px, 4px)
-    padding-bottom: 8px
-    border-radius: $border-block
-    a
-      flex-grow: 0
-      flex-shrink: 0
-      background: var(--card)
-      border-radius: $border-block
-      padding-bottom: 1rem
-      line-height: 1.2
-      display: flex
-      flex-direction: column
+
+.related-posts
+  width: 100%
+  margin: 1rem 0
+  .item
+    line-height: 1.2
+    display: block
+    border-left: 0
+    margin-top: 1rem
+    .title
+      color: var(--text-p1)
+      font-weight: 500
+      font-size: 1rem
+      trans1 color
+      position: relative
+      padding-bottom: 4px
+      &:after
+        content: ''
+        position: absolute
+        left: 0
+        width: 0
+        height: 2px
+        bottom: 0
+        border-radius: 2px
+        background: $color-hover
+        trans1 width
+    .excerpt
+      color: var(--text-p3)
+      font-size: $fs-12
+      margin-top: 0.5rem
+      display: -webkit-box
+      -webkit-box-orient: vertical
       overflow: hidden
-      min-width: 280px
-      width: 40vw
-      max-width: 460px
-      border: 1px solid var(--block-hover)
-      z-index: 1
-      .img
-        min-width: 100%
-        min-height: 140px
-        height: "calc(%s * 0.5)" % @width
-        max-height: 230px
-        overflow: hidden
-        img
-          width: 100%
-          height: 100%
-          object-fit: cover
-          &:not(.lazy)
-            trans1: transform 1s
-      @media screen and (max-width: $device-tablet)
-        width: 70vw
-        .img
-          height: "calc(%s * 0.5)" % @width
+      -webkit-line-clamp: 2
+    &:hover
       .title
-        color: var(--text-p1)
-        font-weight: 500
-        font-size: $fs-15
-        margin: .75rem .75rem 0 .75rem
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 2
-      .excerpt
-        color: var(--text-p2)
-        font-size: $fs-13
-        margin: 0.4rem .75rem 0 .75rem
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 3
-      &:hover
-        img
-          transform: scale(1.04)
-    a+a
-      margin-left: 1rem
+        color: $color-hover
+        &:after
+          width: 100%
 
 
 .related-wrap#read-next
   .body
-    background: var(--block)
-    border-radius: $border-block
-    border: 1px solid var(--block-border)
-    margin-top: 1rem
-    overflow: hidden
-    .line
-      margin: 0
-      height: 1px
-      background: var(--block-border)
-      &+.line,&:first-child,&:last-child
-        display: none
-    >a
-      display: flex
+    display: grid
+    grid-gap: 16px
+    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+    .item  
+      border-top: 1px dashed var(--block-border)
+      border-bottom: 1px dashed var(--block-border)
+      padding: 1rem 0
+    .note
+      margin-bottom: 0.75rem
+      font-size: $fs-12
+      color: var(--text-p4)
+      font-weight: 500
+    a
       margin: 0
       line-height: 1.2
-      padding: 0.75rem 0.5rem
-      color: var(--text-p3)
-      justify-content: space-between
-      align-items: center
-      font-weight: 500
-      font-size: $fs-12
-      &:first-child
-        color: var(--text-p1)
-        font-size: $fs-h4
-        font-weight: 400
-      .note
-        flex-shrink: 0
-        margin-left: 4px
-        font-size: $fs-12
-        color: var(--text-p4)
-        font-weight: 500
+      color: var(--text-p1)
+      font-size: $fs-h4
       &:hover
         color: $color-hover !important
-        background: var(--card)
-
+    #next
+      text-align: right
+.wiki+.related-wrap#read-next
+  .item
+    a
+      font-size: $fs-h3
+    &#prev a
+      color: var(--text-p3)
 
 
 .related-wrap#comments

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

@@ -1,5 +1,5 @@
-.l_left .footer
-  margin-top: .5rem
+.l_left>.footer
+  margin: 0.5rem var(--gap-l) 0
   @media screen and (max-width: $device-tablet)
     margin-bottom: 1rem
 
@@ -26,6 +26,8 @@
       if hexo-config('style.darkmode') == 'auto'
         @media (prefers-color-scheme: dark)
           box-shadow: none
+      if hexo-config('style.darkmode') == 'always'
+        box-shadow: none
 
 .proj-wrap
   display: grid

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

@@ -2,16 +2,19 @@
   .widget-body
     a.repo
       display: block
-      border: 1px solid var(--block-border)
+      padding: 0.75rem 0.5rem
       color: var(--text-p2)
-      background: var(--block)
+      background: var(--card)
       border-radius: $border-block
-      >div  
-        margin: 0.75rem 0.5rem
+      box-shadow: $boxshadow-card
+      trans2 box-shadow transform
+      >div+div
+        margin-top: 0.5rem
       span
         color: var(--text-p2)
       &:hover
-        background: var(--block-hover)
+        box-shadow: $boxshadow-card-float
+        transform: translateY(-1px)
     a.repo
       svg
         margin-right: 4px
@@ -21,8 +24,11 @@
       .repo-name
         font-size: $fs-14
         font-weight: 700
+        color: var(--text-p1)
       .repo-desc
         font-size: $fs-13
+        margin-left: 2px
+        margin-right: 2px
       .grid
         font-size: $fs-13
         display: grid

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

@@ -6,6 +6,7 @@
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
+  box-shadow: $boxshadow-card
 
 .widget-wrap#github-user .widget-body .avatar
   display: block
@@ -47,7 +48,24 @@
   &:hover
     background: $color-hover
 
-  
+.widget-wrap#github-user .widget-body .menu 
+  margin-bottom: 0
+  background: none
+  a:hover 
+    box-shadow: none 
+    background: var(--block)
+  a.active 
+    box-shadow: none
+    position: relative
+    &:after
+      content: ''
+      position: absolute
+      height: 3px
+      bottom: 0
+      width: 32px
+      left: 'calc(50% - 0.5 * %s)' % @width
+      border-radius: 4px
+      background: $color-theme
 
 .widget-wrap#github-user .widget-body .buttons
   margin: 1rem 0

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

@@ -3,12 +3,14 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  padding: var(--gap-l)
+  padding: var(--gap-l) 0
   padding-top: "calc(2 * %s)" % var(--gap-l)
   height: "calc(100vh - 3 * %s)" % var(--gap-l)
   @media screen and (max-width: $device-mobile-max)
     padding-top: "calc(1 * %s)" % var(--gap-l)
     height: "calc(100% - 2 * %s)" % var(--gap-l)
+  .header
+    margin: 0 var(--gap-l)
 
 .l_left[layout=wiki]
   padding-bottom: 0
@@ -134,7 +136,7 @@ nav.menu
     font-size: $fs-14
     font-weight: 500
     overflow: hidden
-    padding: 0.375rem 0.75rem
+    padding: 0.375rem 0.5rem
     color: var(--text-p3)
     text-align: center
     &.active, &:hover
@@ -145,91 +147,3 @@ nav.menu
 .l_left .menu a.nav-item
   flex-grow: 1
 
-.l_left .widgets
-  overflow: scroll
-  flex-grow: 1
-  scrollbar-width: none
-  scrollbar(0, 0)
-  z-index: 1
-  .widget-wrap
-    margin: 1rem 0 3rem 0
-    .widget-header
-      display: flex
-      justify-content: space-between
-      align-items: center
-      font-weight: 500
-      position: sticky
-      position: -webkit-sticky
-      top: -2px
-      background: var(--site-bg)
-      padding-top: 2px
-      z-index 1
-      line-height: 2
-      color: var(--text-p4)
-      font-size: $fs-14
-      &:empty
-        display: none
-      .cap-action
-        hover-block 4px 4px
-        line-height: 0
-        color: var(--text-meta)
-        trans2: color background
-        .icon
-          fill: var(--text-meta)
-        &:hover
-          color: $color-hover
-          .icon
-            fill: $color-hover
-
-    .widget-body
-      margin: 0.5rem 0
-      color: var(--text-p1)
-      p
-        margin-top: .5em
-        margin-bottom: .5em
-        line-height: 1.5
-    .widget-header+.widget-body
-      margin-top: 0
-
-  .widget-wrap .widget-body
-    .more-item
-      margin: .5rem 0
-      .cap
-        margin-bottom: .25rem
-  .widget-wrap#recent .widget-body
-    a
-      line-height: 1.2
-      font-weight: 500
-      color: var(--text-p2)
-      font-size: $fs-13
-      &:hover
-        color: $color-hover
-  .widget-wrap#related .widget-body
-    >a
-      padding 0.5rem
-      display: block
-      line-height: 1.2
-      color: var(--text-p2)
-      font-weight: 500
-      border: 1px solid var(--block-border)
-      border-radius: $border-block
-      margin: 4px 0
-      background: var(--block)
-      div.cap
-        margin-bottom: 0.25rem
-        color: var(--text-p4)
-        display: flex
-        justify-content: space-between
-      &:hover
-        background: var(--block-hover)
-      &.wiki
-        font-weight: 700
-      div.excerpt
-        margin-top: .5rem
-        color: var(--text-p3)
-        font-size: $fs-12
-        font-weight: 400
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 5

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

@@ -1,8 +1,10 @@
-.widget-wrap#toc .widget-header
-  line-height: 2.4
+.widget-wrap.single#toc .widget-header
+  font-weight: 500
+  font-size: $fs-12
+  >span
+    margin: 0.5rem 0
 
 #toc .widget-body
-  line-height: 1.2
   margin-top: 0
   ul ul, ul ol
     padding-left: 0

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

@@ -0,0 +1,104 @@
+.widgets .loading-wrap
+  margin: 0.5rem 0
+
+.l_left .widgets
+  overflow: scroll
+  flex-grow: 1
+  scrollbar-width: none
+  scrollbar(0, 0)
+  z-index: 1
+  line-height: 1.2
+  .widget-wrap
+    margin: 1rem var(--gap-l) 3rem var(--gap-l)
+    .widget-header
+      display: flex
+      justify-content: space-between
+      align-items: center
+      font-weight: 500
+      position: sticky
+      top: -2px
+      background: var(--site-bg)
+      padding-top: 2px
+      z-index 1
+      .item 
+        display: block
+      >span 
+        margin: 0.25rem 0
+        text-align: left
+      &:empty
+        display: none
+      .cap-action
+        hover-block 4px 4px
+        line-height: 0
+        color: var(--text-meta)
+        trans2: color background
+        .icon
+          fill: var(--text-meta)
+        &:hover
+          color: $color-hover
+          .icon
+            fill: $color-hover
+
+    .widget-body
+      margin: 0.5rem 0
+      color: var(--text-p1)
+      p
+        margin-top: .5em
+        margin-bottom: .5em
+        line-height: 1.5
+    .widget-header+.widget-body
+      margin-top: 0
+
+
+
+.l_left .widgets
+  .widget-wrap#recent .widget-body
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    margin-top: 0.25rem
+    a
+      line-height: 1.2
+      font-size: $fs-13
+      margin: 0.25rem 0
+      padding: 2px 0
+      .title  
+        font-size: $fs-13
+        color: var(--text-p2)
+      &:hover
+        color: $color-hover
+  .widget-wrap#related .widget-body a
+    margin-top: 0.5rem
+    margin-bottom: 1rem
+    .title 
+      font-weight: 700
+      font-size: $fs-14
+    .excerpt
+      -webkit-line-clamp: 3
+
+  .widget-wrap#tagcloud .widget-body
+    margin-top: 0.25rem
+    a  
+      word-break: break-word
+      color: var(--text-p2)
+      line-height: 1.5
+      &:hover
+        color: $color-hover
+  
+  .widget-wrap#timeline .widget-body
+    margin-top: 0.5rem
+    .tag-plugin.timeline .timenode
+      .header
+        margin-bottom: 0.5rem
+        txt-ellipsis()
+        .user-info
+          background: var(--block)
+          &:hover
+            background: $color-hover
+            color: var(--card)
+        &:before
+          display: none
+      &+.timenode
+        margin-top: 0.75rem
+      .body
+        max-height: 40vh

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

@@ -2,11 +2,25 @@
   background: var(--block)
   border-radius: $border-card
   padding: 2rem
+  position: relative
+  .nav-back
+    display: none
+    position: absolute
+    line-height: 1
+    overflow: hidden
+    left: 0.75rem
+    top: 0.75rem
+    align-items: center
+    @media screen and (max-width: $device-mobile-max)
+      display: flex
+    svg  
+      width: 1rem
+      height: 1rem
   .about-header
     display flex
     justify-content: center
     flex-wrap: wrap
-    margin: 1.5rem 0 3rem
+    margin: 1.5rem 0
     img
       object-fit: contain
     >img
@@ -27,27 +41,16 @@
   .about-body
     >p
       line-height: 1.5
-    .tag-plugin.navbar:last-child
-      text-align: center
-      nav.cap
-        margin-top: 1rem
-        background: var(--card)
-        box-shadow: $boxshadow-button
-        a
-          color: var(--text-p2)
-          &:hover
-            background: var(--block)
-          &.active 
-            background: var(--block)
-            box-shadow: none
-            color: var(--text-p1)
+      &:first-child
+        margin-top: 2.5rem
+    p+.tag-plugin.navbar .cap
+      margin-top: 1rem
   .about-header+.about-body
-    margin-top: 1.5rem
+    margin-top: 2rem
 
 @media screen and (max-width: $device-mobile)
   .tag-plugin.about
-    padding: 1.5rem 1rem
+    padding: 2rem 1rem
     .about-header
-      margin: 2.5rem 0 3rem
       p
         width 100%

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

@@ -47,43 +47,48 @@
   --theme-bg: #444
   color: var(--card) !important
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    .tag-plugin[color='red']
-      --theme-border: mix($c-red, $dark-card, 80)
-      --theme-bg: mix($c-red, $dark-card, 10)
+set_darkmode_tags()
+  .tag-plugin[color='red']
+    --theme-border: mix($c-red, $dark-card, 80)
+    --theme-bg: mix($c-red, $dark-card, 10)
+
+  .tag-plugin[color='orange']
+    --theme-border: mix($c-orange, $dark-card, 80)
+    --theme-bg: mix($c-orange, $dark-card, 10)
 
-    .tag-plugin[color='orange']
-      --theme-border: mix($c-orange, $dark-card, 80)
-      --theme-bg: mix($c-orange, $dark-card, 10)
+  .tag-plugin[color='yellow']
+    --theme-border: mix($c-yellow, $dark-card, 80)
+    --theme-bg: mix($c-yellow, $dark-card, 10)
 
-    .tag-plugin[color='yellow']
-      --theme-border: mix($c-yellow, $dark-card, 80)
-      --theme-bg: mix($c-yellow, $dark-card, 10)
+  .tag-plugin[color='green']
+    --theme-border: mix($c-green, $dark-card, 80)
+    --theme-bg: mix($c-green, $dark-card, 10)
 
-    .tag-plugin[color='green']
-      --theme-border: mix($c-green, $dark-card, 80)
-      --theme-bg: mix($c-green, $dark-card, 10)
+  .tag-plugin[color='cyan']
+    --theme-border: mix($c-cyan, $dark-card, 80)
+    --theme-bg: mix($c-cyan, $dark-card, 10)
 
-    .tag-plugin[color='cyan']
-      --theme-border: mix($c-cyan, $dark-card, 80)
-      --theme-bg: mix($c-cyan, $dark-card, 10)
+  .tag-plugin[color='blue']
+    --theme-border: mix($c-blue, $dark-card, 80)
+    --theme-bg: mix($c-blue, $dark-card, 10)
 
-    .tag-plugin[color='blue']
-      --theme-border: mix($c-blue, $dark-card, 80)
-      --theme-bg: mix($c-blue, $dark-card, 10)
+  .tag-plugin[color='purple']
+    --theme-border: mix($c-purple, $dark-card, 80)
+    --theme-bg: mix($c-purple, $dark-card, 10)
 
-    .tag-plugin[color='purple']
-      --theme-border: mix($c-purple, $dark-card, 80)
-      --theme-bg: mix($c-purple, $dark-card, 10)
+  .tag-plugin[color='light']
+    --theme-border: white
+    --theme-bg: #ddd
+    color: var(--card) !important
 
+  .tag-plugin[color='dark']
+    --theme-border: black
+    --theme-bg: #222
+    color: var(--text-p1) !important
 
-    .tag-plugin[color='light']
-      --theme-border: white
-      --theme-bg: #ddd
-      color: var(--card) !important
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    set_darkmode_tags()
 
-    .tag-plugin[color='dark']
-      --theme-border: black
-      --theme-bg: #222
-      color: var(--text-p1) !important
+if hexo-config('style.darkmode') == 'always'
+  set_darkmode_tags()