hexo-theme-stellar 1.6.1 → 1.9.0

package/source/css/_layout/list.styl

@@ -11,15 +11,18 @@
   trans1 box-shadow
   overflow: hidden
   background: var(--card)
+  position: relative
   .excerpt
     margin: 1rem 0
     >p
       margin: 1rem 0
+      line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
     align-items: center
     margin: .5rem 0
+    line-height: 1.5
     span+span
       margin-left: 0.5rem
     span.pin
@@ -28,49 +31,76 @@
         object-fit: contain
         height: 1.5em
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08), 0 2px 8px 0px rgba(0, 0, 0, 0.06), 0 4px 16px 0px rgba(0, 0, 0, 0.04)
+  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
 
 
 // common article
-.post-list article
+.post-list article.md
   padding: 1rem
+  p
+    color: var(--text-p2)
+    @media screen and (min-width: $device-mobile)
+      font-size: $fs-14
+
 
 // posts
-.post-list .post-card
-  .post-cover
-    overflow: hidden
-    margin-left: -1rem
-    margin-top: -1rem
-    margin-right: -1rem
+.post-list .post-card .post-cover
+  overflow: hidden
+  width: 'calc(100% + 2 * %s)' % 1rem
+  border-radius: 0
+  margin-left: -1rem
+  margin-top: -1rem
+  margin-right: -1rem
+  &:not(.lazy)
+    trans1: transform 1s
+  img
+    object-fit: cover
+    width: 100%
+    border-radius: 0
+    height: 280px
+    @media screen and (max-width: 900px)
+      height: 240px
+    @media screen and (max-width: $device-tablet)
+      height: 280px
+    @media screen and (max-width: $device-mobile)
+      height: 240px
+    @media screen and (max-width: $device-mobile-425)
+      height: 220px
+    @media screen and (max-width: $device-mobile-375)
+      height: 180px
+
+.post-list .post-card.post.photo
+  .cover
+    position: relative
+    line-height: 0
     img
-      object-fit: cover
       width: 100%
-      border-radius: 0
-      height: 280px
-      @media screen and (max-width: 900px)
-        height: 240px
-      @media screen and (max-width: $device-tablet)
-        height: 280px
-      @media screen and (max-width: $device-mobile)
-        height: 240px
-      @media screen and (max-width: $device-mobile-425)
-        height: 220px
-      @media screen and (max-width: $device-mobile-375)
-        height: 180px
-      &:not(.lazy)
-        trans1: transform 1s
-.post-list .post-card.post.photo .post-cover img
-  height: 400px
-  @media screen and (max-width: 900px)
-    height: 320px
-  @media screen and (max-width: $device-tablet)
-    height: 400px
-  @media screen and (max-width: $device-mobile)
-    height: 320px
-  @media screen and (max-width: $device-mobile-425)
-    height: 280px
-  @media screen and (max-width: $device-mobile-375)
-    height: 240px
+    .cover-info
+      padding: 1rem
+      position: absolute
+      line-height: 1.2
+      width: 'calc(100% - %s * 2)' % 1rem
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+      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))
+      &[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))
+      div+div
+        margin-top: 8px
+        @media screen and (max-width: $device-mobile)
+          margin-top: 4px
+      .cap
+        color: white
+        font-size: $fs-13
+      .title
+        font-weight: 500
+        font-size: $fs-h3
+  h2
+    margin: .25rem 0
+    font-size: $fs-h4
 
 
 // wiki

package/source/css/_layout/main.styl

@@ -1,9 +1,9 @@
 .l_main
   position: relative
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
-  @media screen and (min-width: 1200px)
+  @media screen and (min-width: 1400px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(0.75 * %s)" % var(--width-left)
+    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-tablet)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header

package/source/css/_layout/md.styl

@@ -10,16 +10,29 @@ article.md.excerpt
     font-size: $fs-14
     margin: 1em 0
 
+h1.article-title
+  margin-top: .5em
+  margin-bottom: 1em
+  line-height: 1.2
+  color: var(--text-p0)
+
 article.md.content
   position: relative
   margin-bottom: 2rem
+  display: flex
+  flex-direction: column
+  &.indent
+    >p:not([class])
+      text-indent: 'calc(%s * 2)' % $fs-p
+      text-align: justify
+    h1,h2,h3,h4,h5,h6
+      text-align: center
+    >h2:not([class])
+      align-self: center
+      border-bottom-style: dashed
+      border-bottom-color: $color-highlight
   >:first-child
-    margin-top: 0
-  h1.article-title
-    margin-top: .5em
-    margin-bottom: 1em
-    line-height: 1.2
-    color: var(--text-p0)
+    margin-top: 1rem
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
@@ -27,12 +40,14 @@ article.md.content
   h2,h3,h4,h5,h6
     color: var(--text-p0)
     padding-top: 1rem
-    margin-bottom: 1em
+    margin-bottom: .5rem
     line-height: 1.8
     &:hover
       a.headerlink:before
         opacity: 1
 
+
+
 .md
   ul:not(:last-child),
   ol:not(:last-child)
@@ -45,11 +60,17 @@ article.md.content
   p,blockquote,.tag-plugin,ul,ol,.highlight,table
     *
       --gap-p: .5rem
-  p,.tag-plugin
+  p,>ul:not(:last-child),>ol:not(:last-child)
+    margin-top: 'calc(%s - 4px)' % var(--gap-p)
+    margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
+  .tag-plugin,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
+  p,.tag-plugin
     .highlight,table
       --gap-p: 1rem
+  iframe
+    display: block
 
 // titles
 article.md.content
@@ -59,7 +80,7 @@ article.md.content
     position: absolute
     margin-left: -0.75em
   h2
-    margin-top: 3rem
+    margin-top: 2rem
     border-bottom: 1px solid var(--block-border)
     font-weight: 400
   h3
@@ -70,21 +91,13 @@ article.md.content
   h1+h2
     margin-top: -0.5rem
   h2+h3
-    margin-top: -1rem
+    margin-top: -0.5rem
   h3+h4
-    margin-top: -1rem
+    margin-top: -0.5rem
   h4+h5
-    margin-top: -1rem
+    margin-top: -0.5rem
   h5+h6
-    margin-top: -1rem
-
-// a
-article.md
-  p, li:not([class])
-    >a:not([class])
-      font-weight: 500
-      &:hover
-        text-decoration: underline
+    margin-top: -0.5rem
 
 article.md p
   font-size: $fs-p
@@ -93,6 +106,10 @@ article.md pre
   -webkit-font-smoothing: auto
   -moz-osx-font-smoothing: auto
 
+article.md
+  .center
+    align-self: center
+
 // div
 article.md>div
   margin: var(--gap-p) 0

package/source/css/_layout/pages/archives.styl

@@ -1,4 +1,5 @@
 .post-list #archive
+  padding: 1rem
   .archive-header
     display: inline-block
     font-family: $ff-code

package/source/css/_layout/partial/article-footer.styl

@@ -23,8 +23,6 @@
     ul
       margin: 0
       overflow: hidden
-      a:hover
-        text-decoration: underline
     .post-title
       margin: 0.5rem 0
       line-height: 1.2

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

@@ -5,9 +5,59 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  position: relative
+  &.post
+    height: inherit
+
 
 .l_cover .cover-wrap
   margin-bottom: 0
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    line-height: 1.2
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: 2rem 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
+
+.l_cover.post
+  .cover
+    z-index: -1
+    width: 100%
+    height: 30vh
+    max-width: $device-2k
+    min-height: 150px
+    max-height: 400px
+    @media screen and (max-width: $device-tablet)
+      height: 25vh
+    @media screen and (max-width: $device-mobile)
+      height: 20vh
+    @media screen and (min-width: $device-2k)
+      margin-top: 4rem
+      .img
+        border-radius: 2rem
+
+
+.l_cover.post .cover-wrap
+  z-index: 1
+  .article-title
+    text-align: center
+    padding: 1rem
+    margin: 1em 0 0 0
+    @media screen and (min-width: $device-2k)
+      font-size: 3rem
+
+
+.l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -18,15 +68,5 @@
       @media screen and (max-width: $device-mobile)
         max-width: 60%
   .cover-title
-    font-weight: 700
-    font-size: 1.5rem
-    margin: 1rem 0
     &:first-child
       font-size: 3rem
-  .description
-    margin: 1rem 0
-  .start-wrap
-    margin: 2rem 0
-    flex-shrink: 0
-    a.start
-      display: inline-block

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

@@ -9,6 +9,7 @@
 .page-footer .sitemap
   margin: .5rem 0 2rem
   display: grid
+  scrollbar-width: none
   grid-gap: 1rem 1rem
   grid-auto-flow: column dense
   overflow: scroll
@@ -36,3 +37,8 @@
     line-height: 1.2
   a
     text-decoration: underline
+    font-weight: 500
+    margin: inherit
+    padding: inherit
+    &:hover
+      background: inherit

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

@@ -42,6 +42,7 @@
       width: 40vw
       max-width: 460px
       border: 1px solid var(--block-hover)
+      z-index: 1
       .img
         min-width: 100%
         min-height: 140px

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

@@ -61,13 +61,13 @@
     if hexo-config('style.animated_avatar.animate') == 'always'
       div.bg
         opacity: 1 !important
-        animation: spin infinite 1s
+        animation: spin infinite 4s
         animation-timing-function: linear
     if hexo-config('style.animated_avatar.animate') == 'auto'
       &:hover
         div.bg
           opacity: 1 !important
-          animation: spin infinite 1s
+          animation: spin infinite 4s
           animation-timing-function: linear
 
   a.title
@@ -149,6 +149,7 @@ nav.menu
 .l_left .widgets
   overflow: scroll
   flex-grow: 1
+  scrollbar-width: none
   scrollbar(0, 0)
   z-index: 1
   .widget-wrap
@@ -164,7 +165,9 @@ nav.menu
       background: var(--site-bg)
       padding-top: 2px
       z-index 1
-      line-height: 2.4
+      line-height: 2
+      color: var(--text-p4)
+      font-size: $fs-14
       &:empty
         display: none
       .cap-action
@@ -186,11 +189,23 @@ nav.menu
         margin-top: .5em
         margin-bottom: .5em
         line-height: 1.5
-        >a:hover
-          text-decoration: underline
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
+
+  .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

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

@@ -42,6 +42,8 @@ details.folding[open]
       &:after
         content: '-'
   >div.body
+    display: flex;
+    flex-direction: column;
     padding: 1rem
     margin: 0 - 1rem
     margin-top: 0
@@ -57,6 +59,7 @@ details.folding[open]
 details.folding[child=codeblock]>div.body
   padding: 0
   background: transparent
+  overflow: hidden
   .highlight
     border: none
     border-radius: 0

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

@@ -27,7 +27,7 @@
       margin-top: 19px
       margin-bottom: 20px
     .frame
-      background-image: url(https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/frame/iphone11.svg);
+      background-image: url(https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/frame/iphone11.svg);
       width: 329px
       height: 658px
   &[focus='top']

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

@@ -2,7 +2,6 @@
   margin-top: 1rem
   margin-bottom: 1rem
   .image-bg
-    line-height: 0
     text-align: center
     border-radius: $border-image
     position: relative
@@ -11,7 +10,7 @@
       .image-download
         opacity: 1 !important
     img
-      display: inline-block
+      display: block
       object-fit: cover
     .image-download
       position: absolute

package/source/css/_layout/tag-plugins/inline-labels.styl

@@ -32,3 +32,6 @@
     line-height: 1
     font-weight: 700
     font-family: $ff-code
+  h1,h2,h3,h4
+    sup,sub
+      font-size: .85rem

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

@@ -0,0 +1,50 @@
+.md .tag-plugin.poetry
+  align-self: center
+  &[align=center]
+    align-items: center
+  >.title
+    font-weight: 500
+    font-size: 1rem
+    margin-top: var(--gap-p)
+  >.meta
+    color: var(--text-p2)
+    font-size: $fs-12
+    font-weight: 500
+    span+span
+      margin-left: 4px
+  >.body
+    margin: var(--gap-p) 0
+    border-top: 1px dashed var(--block-border)
+    border-bottom: 1px dashed var(--block-border)
+    p
+      font-size: $fs-14
+  >.footer
+    font-style: italic
+    color: var(--text-p4)
+    margin: var(--gap-p) 0
+    font-size: $fs-12
+
+// 描边修饰
+.md .tag-plugin.poetry
+  padding-left: 1rem
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    width: 4px
+    left: -4px
+    top: 4px
+    bottom: 4px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: 6px
+      bottom: 6px
+      border-radius: 4px
+      background: $color-highlight

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

@@ -0,0 +1,82 @@
+.md .tag-plugin.quot
+  text-align: center
+  position: relative
+  align-items: center
+.md .tag-plugin.quot:not(span)
+  display: flex
+  align-self: center
+  border-bottom: none
+  font-weight: 700
+  &:first-child
+    margin-top: 1.5rem
+  a.headerlink:before
+    content: ''
+  padding: 16px 24px 8px 24px
+  @media screen and (max-width: $device-mobile)
+    padding: 16px 20px 8px
+  line-height: 1.2
+
+// override
+article.md.content
+  .quot:not(span)
+    color: var(--text-p0)
+  h1.quot
+    font-size: $fs-h1
+    font-weight: 900
+    padding: 20px 32px 12px 32px
+    @media screen and (max-width: $device-mobile)
+      padding: 20px 24px 12px
+  h2.quot,h3.quot,h4.quot,h5.quot,h6.quot
+    font-size: $fs-h3
+  p.quot
+    font-size: $fs-h4
+
+// type=text
+.md .tag-plugin.quot[type=text]:not(span)
+  &:before,&:after
+    content: ""
+    position: absolute
+    width: 8px
+    height: 14px
+  &:before
+    top: 8px
+    left: 0
+    border-top: 6px solid $color-highlight
+    border-left: 6px solid $color-highlight
+  &:after
+    right: 0
+    bottom: 0
+    border-right: 6px solid $color-highlight
+    border-bottom: 6px solid $color-highlight
+article.md.content h1.quot[type=text]
+  &:before,&:after
+    width: 12px
+    height: 20px
+    border-width: 8px
+
+// type=icon
+.md .tag-plugin.quot[type=icon]:not(span)
+  .icon
+    height: 1.5em
+    display: inline-block
+    color: $color-highlight
+    border-radius: 0
+    &.prefix
+      margin-right: .5rem
+    &.suffix
+      margin-left: .5rem
+
+// inline quot
+.md span.tag-plugin.quot
+  font-weight: 500
+  &:before,&:after
+    color: $color-highlight
+    font-weight: 900
+  &:before
+    content: "「"
+    margin-left: -0.125em
+    margin-right: 0.125em
+  &:after
+    content: "」"
+    margin-left: 0.125em
+    margin-right: -0.125em

package/source/css/_plugins/comments/utterances.styl

@@ -1,3 +1,6 @@
 .cmt-body.utterances
   margin: 0 -4px
   width: 'calc(100% + %s)' % 8px
+
+.related-wrap#comments div.cmt-body svg.loading
+  top: 62px

package/source/css/_plugins/comments/waline.styl

@@ -0,0 +1,61 @@
+.cmt-body.waline
+  --waline-font-size: 0.9375rem;
+  /* 常规颜色 */
+  --waline-white: #fff;
+  --waline-light-grey: #999;
+  --waline-dark-grey: #666;
+  /* 主题色 */
+  --waline-theme-color: #3498db;
+  --waline-active-color: #2ecc71;
+  /* 布局颜色 */
+  --waline-color: #444;
+  --waline-bgcolor: #fff;
+  --waline-bgcolor-light: #f8f8f8;
+  --waline-bgcolor-hover: #f0f0f0;
+  --waline-border-color: #ddd;
+  --waline-disable-bgcolor: #f8f8f8;
+  --waline-disable-color: #bbb;
+  --waline-code-bgcolor: #282c34;
+  /* 特殊颜色 */
+  --waline-bq-color: #f0f0f0;
+  /* 头像 */
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+  /* 徽章 */
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.725em;
+  /* 信息 */
+  --waline-info-bgcolor: #f8f8f8;
+  --waline-info-color: #999;
+  --waline-info-font-size: 0.725em;
+  /* 渲染选择 */
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none;
+  
+
+  @media (prefers-color-scheme: dark)
+    --waline-white: #000;
+    --waline-light-grey: #666;
+    --waline-dark-grey: #999;
+    /* 布局颜色 */
+
+    --waline-color: #fff;
+    --waline-bgcolor: var(--block);
+    --waline-bgcolor-light: #272727;
+    --waline-border-color: #333;
+    --waline-disable-bgcolor: #444;
+    --waline-disable-color: #272727;
+    /* 特殊颜色 */
+    --waline-bq-color: #272727;
+    /* 其他颜色 */
+    --waline-info-bgcolor: #272727;
+    --waline-info-color: #666;
+
+.wl-count
+  @media (prefers-color-scheme: dark)
+    padding: .375em;
+    font-weight: bold;
+    font-size: 1.25em;
+    color: #fff;
+