hexo-theme-stellar 1.11.0 → 1.13.0

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,18 +3,21 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  padding: var(--gap-l)
-  padding-top: "calc(2 * %s)" % var(--gap-l)
-  height: "calc(100vh - 3 * %s)" % var(--gap-l)
+  height: "calc(100vh - 1 * %s)" % var(--gap-l)
+  .header
+    margin: var(--gap-l) var(--gap-l) 0
+  @media screen and (min-width: $device-mobile-max)
+    >.widgets:first-child>.widget-wrap:first-child
+      margin-top: "calc(2 * %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)
+    height: 100vh
+  
 
 .l_left[layout=wiki]
   padding-bottom: 0
-  height: "calc(100vh - 2 * %s)" % var(--gap-l)
+  height: 100vh
   @media screen and (max-width: $device-mobile-max)
-    height: "calc(100% - 1 * %s)" % var(--gap-l)
+    height: 100vh
   .widgets >:last-child
     margin-bottom: 6rem
 
@@ -134,7 +137,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 +148,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,103 @@
+.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
+        

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()

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/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

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

@@ -0,0 +1,32 @@
+.tag-plugin.split
+  display: grid
+  grid-gap: 16px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+  >.cell
+    margin: 1rem 0
+  >.cell>
+    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
+  @media screen and (max-width: $device-tablet)
+    display: block
+
+.tag-plugin.split
+  &[bg]>.cell
+    padding: 1rem
+    border-radius: $border-card
+  &[bg='block']>.cell
+    background: var(--block)
+  &[bg='card']>.cell
+    background: var(--card)
+    box-shadow: $boxshadow-card