hexo-theme-stellar 1.10.0 → 1.12.0

package/source/css/_common/base.styl

@@ -12,8 +12,8 @@ a
   &:hover
     color: $color-hover
 
-p:not([class]) 
-  text-align: justify
+.md p:not([class]) 
+  text-align: convert(hexo-config('style.text-align'))
 
 hr
   color: var(--text-meta)
@@ -53,3 +53,6 @@ table:not([class])
     trans()
     &:hover
       background: var(--block)
+
+*[ff=title]
+  font-family: $ff-logo

package/source/css/_common/blur.styl

@@ -5,6 +5,9 @@ if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)
     :root
       --blur-bg: alpha(black, .5)
+if hexo-config('style.darkmode') == 'always'
+  :root
+    --blur-bg: alpha(black, .5)
 
 .blur
   background: var(--blur-bg)

package/source/css/_common/device.styl

@@ -24,6 +24,8 @@
   if hexo-config('style.darkmode') == 'auto'
     @media (prefers-color-scheme: dark)
       --blur-bg: alpha(#555, .6)
+  if hexo-config('style.darkmode') == 'always'
+    --blur-bg: alpha(#555, .6)
 
 .sidebar-toggle.mobile
   cursor: pointer

package/source/css/_common/highlight.styl

@@ -20,7 +20,7 @@ article.md .highlight, pre:not([class]):has(>code)
   font-family: $ff-code
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
-    min-width: 280px
+    min-width: 180px
 
 article.md .highlight
   position: relative

package/source/css/_common/loading.styl

@@ -15,6 +15,19 @@ svg.loading
       transform:rotate(360deg)
 
 .loading-wrap
-  min-height: 50px
-  margin: 2rem 0
-  text-align: center
+  margin: 0
+  text-align: center
+  background: var(--block)
+  border-radius: $border-card
+  position relative
+  padding: 2rem
+  svg  
+    margin: 4px
+  &:after 
+    content: hexo-config('style.loading.loading')
+    color: var(--text-p1)
+    display: block
+    font-size: 14px
+  &.error
+    &:after
+      content: hexo-config('style.loading.error')

package/source/css/_common/title.styl

@@ -25,19 +25,6 @@ h6
 .fs12
   font-size: $fs-12
 
-.post-list
-  .post-title
-    font-weight: 500
-    margin: .75rem 0 .5rem
-    line-height: 1.2
-    font-size: $fs-h3
-    border-bottom: none
-    color: var(--text-p0)
-    trans1 color
-  .wiki .post-title
-    margin-top: 0.5rem
-    font-weight: 700
-
 .widgets
   .post-title
     margin: 0.75rem 0

package/source/css/_custom.styl

@@ -1,33 +1,30 @@
 @require('_defines/const')
 
 // 通用主题色
-$color-theme = #1BCDFC
-$color-link = #2196f3
-$color-button = #1BCDFC
-$color-hover = #ff5722
-$color-highlight = #ff5722
-$color-inner = #fff
-$color-cat = #FF7844
-$color-cat-hover = darken($color-cat, 20)
+$color-theme = convert(hexo-config('style.color.common.theme'))
+$color-accent = convert(hexo-config('style.color.common.accent'))
+$color-link = convert(hexo-config('style.color.common.link'))
+$color-button = convert(hexo-config('style.color.common.button'))
+$color-hover = convert(hexo-config('style.color.common.hover'))
 
 // 浅色
-$light-site-bg = convert(hexo-config('style.theme.light'))
-$light-block = #f2f2f2
-$light-title = #000
-$light-text = #333
-$light-code = #111
-$light-card = white
+$light-background = convert(hexo-config('style.color.light.background'))
+$light-block = convert(hexo-config('style.color.light.block'))
+$light-card = convert(hexo-config('style.color.light.card'))
+$light-title = convert(hexo-config('style.color.light.title'))
+$light-text = convert(hexo-config('style.color.light.text'))
+$light-code = convert(hexo-config('style.color.light.code'))
 
 // 深色
-$dark-site-bg = convert(hexo-config('style.theme.dark'))
-$dark-block = darken(saturate($dark-site-bg, 40%), 2)
-$dark-title = #fff
-$dark-text = #eee
-$dark-code = #ff7043
-$dark-card = lighten(saturate($dark-site-bg, 50%), 10)
+$dark-background = convert(hexo-config('style.color.dark.background'))
+$dark-block = convert(hexo-config('style.color.dark.block'))
+$dark-card = convert(hexo-config('style.color.dark.card'))
+$dark-title = convert(hexo-config('style.color.dark.title'))
+$dark-text = convert(hexo-config('style.color.dark.text'))
+$dark-code = convert(hexo-config('style.color.dark.code'))
 
 // 移动端深色背景（OLED调成纯黑可以省电）
-$dark-site-bg-mobile = black
+$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
 
 
 // @font-face
@@ -51,7 +48,7 @@ if hexo-config('style.font-family.logo')
 
 
 // font size
-$fs-root = 16px
+$fs-root = convert(hexo-config('style.font-size'))
 $fs-15 = .9375rem
 $fs-14 = .875rem
 $fs-13 = .8125rem
@@ -72,14 +69,14 @@ $border-image = 6px
 
 // 可以动态变化的属性
 :root
-  --width-left: 256px
+  --width-left: 288px
   --width-main: 720px
   --gap-l: 16px
   --gap-p: .75rem // gap for paragraph
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
-    --width-left: 320px
+    --width-left: 352px
     --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
@@ -87,10 +84,10 @@ $border-image = 6px
     --gap-l: 64px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
-    --width-left: 220px
+    --width-left: 252px
   // iPad 竖屏
   @media screen and (max-width: $device-mobile-max)
-    --width-left: 256px
+    --width-left: 288px
 
 
 

package/source/css/_defines/theme.styl

@@ -1,14 +1,14 @@
 :root
-  --site-bg: $light-site-bg
+  --site-bg: $light-background
   --block: $light-block
   --block-border: darken($light-block, 5)
   --block-hover: darken($light-block, 2)
   --text-p0: $light-title
   --text-p1: $light-text
-  --text-p2: mix($light-text, $light-site-bg, 80)
-  --text-p3: mix($light-text, $light-site-bg, 60)
-  --text-p4: mix($light-text, $light-site-bg, 35)
-  --text-meta: mix($light-text, $light-site-bg, 20)
+  --text-p2: mix($light-text, $light-background, 80)
+  --text-p3: mix($light-text, $light-background, 60)
+  --text-p4: mix($light-text, $light-background, 35)
+  --text-meta: mix($light-text, $light-background, 20)
   --text-code: $light-code
   --card: $light-card
   --theme-highlight: darken($color-theme, 5)
@@ -16,22 +16,22 @@
 
 set_darkmode()
   :root
-    --site-bg: $dark-site-bg
+    --site-bg: $dark-background
     --block: $dark-block
     --block-border: lighten($dark-block, 6)
     --block-hover: darken($dark-block, 4)
     --text-p0: $dark-title
-    --text-p1: mix($dark-text, $dark-site-bg, 85)
-    --text-p2: mix($dark-text, $dark-site-bg, 70)
-    --text-p3: mix($dark-text, $dark-site-bg, 45)
-    --text-p4: mix($dark-text, $dark-site-bg, 35)
-    --text-meta: mix($dark-text, $dark-site-bg, 30)
+    --text-p1: mix($dark-text, $dark-background, 85)
+    --text-p2: mix($dark-text, $dark-background, 70)
+    --text-p3: mix($dark-text, $dark-background, 45)
+    --text-p4: mix($dark-text, $dark-background, 35)
+    --text-meta: mix($dark-text, $dark-background, 30)
     --text-code: $dark-code
     --card: $dark-card
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
     @media screen and (max-width: $device-mobile-max)
-      --site-bg: $dark-site-bg-mobile
+      --site-bg: $dark-background-mobile
       --card: darken($dark-card, 6)
       --block: darken($dark-block, 4)
       --block-border: lighten($dark-block, 2)

package/source/css/_layout/list.styl

@@ -1,6 +1,25 @@
 // list
 .post-list
   margin: 1rem
+  .post-title
+    margin-top: 1.5rem
+  .post-title:first-child
+    margin-top: .5rem
+
+.post-list
+  .post-title
+    font-weight: 500
+    margin: .75rem 0
+    line-height: 1.2
+    font-size: $fs-h3
+    border-bottom: none
+    color: var(--text-p0)
+    trans1 color
+    @media screen and (max-width: $device-mobile)
+      font-size: $fs-h4
+      margin: 0.5rem 0
+  .wiki .post-title
+    margin-top: 0.5rem
 
 // card
 .post-list .post-card
@@ -14,14 +33,18 @@
   position: relative
   .excerpt
     margin: 1rem 0
+    @media screen and (max-width: $device-mobile)
+      margin: 0.5rem 0
     >p
       margin: 1rem 0
+      @media screen and (max-width: $device-mobile)
+        margin: 0.5rem 0
       line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
     align-items: center
-    margin: .5rem 0
+    margin: 0.25rem 0
     line-height: 1.5
     span+span
       margin-left: 0.5rem
@@ -37,10 +60,11 @@
 // common article
 .post-list article.md
   padding: 1rem
+  @media screen and (max-width: $device-mobile)
+    padding: 0.5rem 1rem
   p
     color: var(--text-p2)
-    @media screen and (min-width: $device-mobile)
-      font-size: $fs-14
+    font-size: $fs-14
 
 
 // posts
@@ -51,6 +75,7 @@
   margin-left: -1rem
   margin-top: -1rem
   margin-right: -1rem
+  background: var(--block)
   &:not(.lazy)
     trans1: transform 1s
   img
@@ -76,7 +101,7 @@
     img
       width: 100%
     .cover-info
-      padding: 1rem
+      padding: 1.5rem 1rem
       position: absolute
       line-height: 1.2
       width: 'calc(100% - %s * 2)' % 1rem
@@ -84,20 +109,26 @@
       color: white
       &[position=top]
         top: 0
-        background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3),rgba(0,0,0,0))
+        background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2),rgba(0,0,0,0))
       &[position=bottom]
         bottom: 0
-        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0.4))
+        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.3))
       div+div
-        margin-top: 8px
-        @media screen and (max-width: $device-mobile)
-          margin-top: 4px
+        margin-top: 4px
       .cap
         color: white
         font-size: $fs-13
       .title
         font-weight: 500
         font-size: $fs-h3
+      @media screen and (max-width: $device-mobile)
+        padding: 1rem
+        div+div
+          margin-top: 2px
+        .title
+          font-size: $fs-h4
+        .cap
+          font-size: $fs-12
   h2
     margin: .25rem 0
     font-size: $fs-h4

package/source/css/_layout/md.styl

@@ -24,7 +24,7 @@ article.md.content
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
-      text-align: justify
+      text-align: convert(hexo-config('style.text-align'))
       a
         text-indent: 0
     h1,h2,h3,h4,h5,h6
@@ -32,7 +32,7 @@ article.md.content
     >h2:not([class])
       align-self: center
       border-bottom-style: dashed
-      border-bottom-color: $color-highlight
+      border-bottom-color: $color-accent
   >:first-child
     margin-top: 0
   h1:not(:first-child)

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

@@ -0,0 +1,36 @@
+.widget-wrap#repo-info
+  .widget-body
+    a.repo
+      display: block
+      padding: 0.75rem 0.5rem
+      color: var(--text-p2)
+      background: var(--card)
+      border-radius: $border-block
+      box-shadow: $boxshadow-card
+      trans2 box-shadow transform
+      >div+div
+        margin-top: 0.5rem
+      span
+        color: var(--text-p2)
+      &:hover
+        box-shadow: $boxshadow-card-float
+        transform: translateY(-1px)
+    a.repo
+      svg
+        margin-right: 4px
+      .flex-row
+        display: flex 
+        align-items: center
+      .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
+        grid-gap: 2px
+        grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)

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