hexo-theme-stellar 1.10.0 → 1.12.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
@@ -75,7 +77,6 @@
     font-weight: 900
     color: inherit
     line-height: 1.2
-    font-family: $ff-logo
     display: block
     position: relative
     .main
@@ -135,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
@@ -146,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,26 +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
+      &: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()

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

@@ -0,0 +1,62 @@
+.tag-plugin.folders
+  display: block
+  margin: 1rem 0
+  border-radius: $border-block
+  font-size: $fs-14
+  border: 1px solid var(--theme-border)
+  overflow: hidden
+  .folder
+    display: block
+    font-size: $fs-14
+    background: var(--block)
+    &:last-child summary
+      border-bottom: none
+  summary
+    display: block
+    cursor: pointer
+    color: var(--text-p2)
+    font-weight: 500
+    position: relative
+    line-height: 1.2
+    outline: none
+    padding: 0.75rem 1rem
+    border-bottom: 1px solid var(--theme-border)
+    &:last-child
+      border-bottom: none
+    >
+      p,h1,h2,h3,h4,h5,h6
+        display: inline
+        border-bottom: none !important
+    &:hover
+      color: var(--text-p0)
+      background: var(--block-hover)
+      &:after
+        position: absolute
+        content: '+'
+        text-align: center
+        top: 50%
+        transform: translateY(-50%)
+        right: 1rem
+
+
+.tag-plugin.folders details[open]
+  background: none
+  &:last-child 
+    summary
+      border-bottom: 1px solid var(--theme-border)
+    .body
+      border-bottom: none
+  >summary
+    color: var(--text-p1)
+    background: var(--block-hover)
+    &:hover:after
+      content: '-'
+      
+  >div.body
+    padding: 1rem
+    border-bottom: 1px solid var(--theme-border)
+    font-size: $fs-15
+    >:first-child
+      margin-top: 0
+    >:last-child
+      margin-bottom: 0

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

@@ -14,8 +14,8 @@
   cursor: pointer
   min-width 280px
   max-width: 100%
-  width: 320px
-  @media screen and (max-width: $device-mobile-375)
+  width: 350px
+  @media screen and (max-width: $device-mobile-425)
     width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-block
@@ -35,54 +35,68 @@
   text-align: justify
 
 .md .link-card
-  line-height: 1.2
-  > div
-    pointer-events: none
+  >.left
+    overflow: hidden
+    margin: 0.75rem 0 0.75rem 0.75rem
+    .title
+      font-size: $fs-14
+    span+span 
+      margin-top: 0.25rem
+  >.right
+    width: 2.75rem
+    height: 2.75rem
+    margin: 0.75rem
+    overflow: hidden
+    flex-shrink: 0
   >.top
     display: flex
-    margin: .75rem 1rem .25rem
+    margin: .75rem 0.75rem .25rem
     overflow: hidden
     max-width: 'calc(100% - %s * 2)' % 1rem
     align-items: center
     .img
       line-height: 0
       height: 16px
-      width: 20px
-      margin-right: 4px
+      width: 16px
+      border-radius: 16px
+      margin-right: 8px
       background-repeat: no-repeat
       background-size: contain
       background-position: left center
-    .desc
-      opacity: .75
-      line-height: 1.5
     span
       txt-ellipsis()
       max-width: 100%
   >.bottom
-    margin: 0 1rem .75rem 1rem
+    margin: 0 0.75rem 0.75rem 0.75rem
     .title
       font-size: $fs-15
       margin: 4px 0 8px 0
-  >.right
-    width: 2.5rem
-    height: 2.5rem
-    margin: .75rem
+
+.md .link-card
+  line-height: 1.2
+  .title
+    display: -webkit-box
+    -webkit-box-orient: vertical
     overflow: hidden
+    -webkit-line-clamp: 2
+  .cap
     flex-shrink: 0
-  >.left
+    color: var(--text-p3)
+  .link
+    line-height: 1.5
+    opacity: .75
+    txt-ellipsis()
+  .desc
+    display: -webkit-box
+    -webkit-box-orient: vertical
     overflow: hidden
-    margin: .5rem 0 .5rem 1rem
-    .title
-      font-size: $fs-14
-      margin: 1px 0 5px 0
-    .desc
-      flex-shrink: 0
-      txt-ellipsis()
+    -webkit-line-clamp: 3
+  .img
+    border-radius: 4px
+
   span
     margin: 0
     display: block
-  span.title
+  .title
     font-weight: 500
     color: var(--text-p1)
-  span.desc
-    color: var(--text-p3)

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

@@ -1,16 +1,22 @@
 .md .tag-plugin.navbar
+  text-align: center
   nav.cap
     margin: 0
     padding: 1px
-    background: var(--block)
+    background: var(--card)
+    box-shadow: $boxshadow-button
     border-radius: 6px
     display: inline-flex
     max-width: 100%
     a
       margin: 1px
       padding: 0.25em 0.75rem
+      color: var(--text-p2)
       &:after
         display: none
-      &:hover,&.active
-        background: var(--card)
-        color: var(--text-p1)
+      &:hover
+        background: var(--block)
+      &.active 
+        background: var(--block)
+        box-shadow: none
+        color: var(--text-p1)

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

@@ -47,4 +47,4 @@
       top: 6px
       bottom: 6px
       border-radius: 4px
-      background: $color-highlight
+      background: $color-accent

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

@@ -3,7 +3,7 @@
   position: relative
   align-items: center
 .md .tag-plugin.quot:not(span)
-  display: flex
+  display: inline-flex
   align-self: center
   border-bottom: none
   font-weight: 700
@@ -41,13 +41,13 @@ article.md.content
   &:before
     top: 8px
     left: 0
-    border-top: 6px solid $color-highlight
-    border-left: 6px solid $color-highlight
+    border-top: 6px solid $color-accent
+    border-left: 6px solid $color-accent
   &:after
     right: 0
     bottom: 0
-    border-right: 6px solid $color-highlight
-    border-bottom: 6px solid $color-highlight
+    border-right: 6px solid $color-accent
+    border-bottom: 6px solid $color-accent
 article.md.content h1.quot[type=text]
   &:before,&:after
     width: 12px
@@ -59,9 +59,10 @@ article.md.content h1.quot[type=text]
   .icon
     height: 1.5em
     display: inline-block
-    color: $color-highlight
+    color: $color-accent
     border-radius: 0
     &.prefix
+      margin-left: -0.5rem
       margin-right: .5rem
     &.suffix
       margin-left: .5rem
@@ -70,7 +71,7 @@ article.md.content h1.quot[type=text]
 .md span.tag-plugin.quot
   font-weight: 500
   &:before,&:after
-    color: $color-highlight
+    color: $color-accent
     font-weight: 900
   &:before
     content: "「"

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

@@ -0,0 +1,28 @@
+.md .tag-plugin.split
+  margin: 0.5rem 0
+.tag-plugin.split
+  display: grid
+  grid-gap: 16px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+  >div>
+    p   
+      line-height: 1.5
+    :first-child
+      margin-top: 0
+    :last-child
+      margin-bottom: 0
+    p:first-child
+      margin-top: -0.25em
+    p:last-child
+      margin-bottom: -0.25em
+    
+
+.tag-plugin.split
+  &[bg]>div
+    padding: 1rem
+    border-radius: $border-card
+  &[bg='block']>div
+    background: var(--block)
+  &[bg='card']>div
+    background: var(--card)
+    box-shadow: $boxshadow-card