hexo-theme-solitude 1.1.3 → 1.2.2

package/source/css/_post/relatedPost.styl

@@ -0,0 +1,160 @@
+.relatedPosts
+  margin-top: 2rem
+  -webkit-user-select: none
+
+  > .relatedPosts-list
+    > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: var(--sco-main)
+      vertical-align: bottom
+
+    .cover
+      width: 360px
+      min-width: 45%
+      height: 100%
+      transition: all .6s ease 0s
+      object-fit: cover
+      filter: brightness(.9)
+      max-width: 45%
+
+      &::after
+        content: ' '
+        display: block
+        position: absolute
+        z-index: 0
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        background: url(https://bu.dusays.com/2023/03/03/6401a79030db5.png) 50%
+        background-size: cover
+
+    .content
+      padding: 0 1rem
+      width: 100%
+
+      .date
+        color: var(--light-grey)
+        font-size: 90%
+
+      .title
+        color: var(--sco-white)
+        -webkit-line-clamp: 2
+        margin-right: auto
+
+    a
+      display: flex
+      width: 100%
+      height: 100%
+
+  > .headline
+    margin-bottom: .8rem
+    font-weight: 700
+    font-size: 20px
+    display: flex
+    align-items: center
+
+    span
+      margin-right: auto
+      margin-left: 8px
+
+    a
+      font-weight: 400
+
+  &-link
+    display: block
+    justify-content: space-between
+    margin-left: 8px
+    font-size: 13px
+
+.relatedPosts-list
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  flex-direction: column
+
+@media screen and (max-width: 768px)
+  .relatedPosts
+    > .relatedPosts-list
+      > div
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
+
+@media screen and (max-width: 600px)
+  .relatedPosts
+    > .relatedPosts-list
+      > div
+        width: calc(100% - 4px)
+
+@media screen and (min-width: 768px)
+  #post
+    > div.relatedPosts
+      > div.relatedPosts-list
+        > div
+          -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+          border-radius: 12px
+
+  .relatedPosts
+    > .headline
+      font-size: .8em
+
+  @media screen and (max-width: 1300px)
+    #post
+      > div.relatedPosts
+        > div.relatedPosts-list
+          > div:nth-child(7)
+            display: none
+
+          > div:nth-child(8)
+            display: none
+
+.relatedPosts
+  > .relatedPosts-list
+    > div
+      background: var(--sco-secondbg)
+      border: var(--style-border)
+      transition: .3s
+      cursor: pointer
+      overflow: hidden
+      width: 100%
+      margin-bottom: 8px
+
+      &:hover
+        background: var(--sco-main)
+
+      .content
+        .title
+          color: var(--sco-fontcolor)
+          font-weight: 700
+          line-height: 1.5
+          -webkit-line-clamp: 4
+          font-size: .9rem
+          text-align: left
+          overflow: hidden
+
+        .date
+          color: var(--sco-fontcolor)
+          display: none
+
+      &:hover
+        a
+          .title
+            color: var(--sco-white)
+
+@media screen and (max-width: 768px)
+  .relatedPosts
+    display: none
+
+    > .relatedPosts-list
+      > div
+        border-radius: 4px
+
+@media screen and (min-width: 768px)
+  .relatedPosts
+    margin-top: 1rem

package/source/css/_post/reward.styl

@@ -0,0 +1,217 @@
+.reward-main
+  animation: .3s ease .1s 1 normal both running donate_effcet
+
+.post-reward
+  position: relative
+  margin-top: 4rem
+  text-align: center
+
+  &:hover
+    > .reward-main
+      display: block
+
+  .reward-main
+    position: absolute
+    bottom: 40px
+    left: -96px
+    z-index: 100
+    display: none
+    padding: 0 0 15px
+    width: fit-content
+
+    .reward-all
+      display: inline-block
+      margin: 0
+      padding: 1rem .5rem
+      border-radius: 4px
+      background: var(--sco-maskbgdeep)
+
+      &:before
+        position: absolute
+        bottom: -10px
+        left: 0
+        width: 100%
+        height: 20px
+        content: ""
+
+      &:after
+        position: absolute
+        right: 0
+        bottom: 2px
+        left: 0
+        margin: 0 auto
+        width: 0
+        height: 0
+        border-top: 13px solid var(--reward-pop)
+        border-right: 13px solid transparent
+        border-left: 13px solid transparent
+        content: ""
+
+      .reward-item
+        display: inline-block
+        padding: 0 8px
+        list-style-type: none
+        vertical-align: top
+
+        img
+          width: 130px
+          height: 130px
+
+        .post-qr-code-desc
+          padding-top: .4rem
+          width: 130px
+          color: #858585
+
+  .reward-button
+    background: var(--sco-red)
+    color: var(--sco-white)
+    padding: 0 16px
+    height: 40px
+    line-height: 39px
+    box-shadow: var(--sco-shadow-red)
+    display: inline-block
+    cursor: pointer
+    transition: all .4s ease 0s
+
+  &:hover
+    .reward-button
+      color: var(--sco-white)
+      background: var(--sco-theme)
+      box-shadow: none
+
+  .reward-main
+    .reward-all
+      .reward-item
+        .post-qr-code-desc
+          padding-top: 0
+          margin-top: -8px
+          margin-bottom: 8px
+
+  .reward-main
+    .reward-all
+      border-radius: 12px
+      background: var(--sco-card-bg)
+      border: var(--style-border-always)
+      padding: .8rem
+      display: flex
+      box-shadow: var(--sco-shadow-border)
+      flex-direction: column
+      align-items: center
+
+.reward-dec
+  font-size: .6rem
+
+.reward-text
+  margin-bottom: 0
+  font-weight: 700
+
+a.reward-main-btn
+  background: var(--sco-secondbg)
+  color: var(--sco-fontcolor)
+  display: flex
+  flex-direction: column
+  border-radius: 12px
+  padding: 4px 0
+  border: var(--style-border-always)
+  margin: 8px
+  width: 100%
+
+  &:hover
+    color: var(--sco-white)
+    background: var(--sco-red)
+    background-image: url(https://bu.dusays.com/2023/11/01/6541f7aeb5752.gif)
+    box-shadow: var(--sco-shadow-red)
+
+.reward-title
+  font-weight: 700
+  color: var(--sco-red)
+
+.reward-link.mode
+  background: var(--sco-green)
+  color: var(--sco-white)
+  padding: 0 16px
+  height: 40px
+  line-height: 39px
+  box-shadow: var(--sco-shadow-green)
+  border-radius: 8px
+  margin-left: .5rem
+  text-align: center
+  transition: .3s
+
+  a
+    color: var(--sco-white)
+
+  i
+    margin-right: 4px
+
+  &:hover
+    background: var(--sco-theme)
+    box-shadow: none
+
+.post-reward
+  margin-top: 0
+  display: flex
+  justify-content: center
+
+  &:hover
+    > .reward-main
+      display: none
+
+  .reward-main
+    z-index: 1003
+
+@media screen and (min-width: 768px)
+  .post-reward:hover
+    > .reward-main
+      display: flex !important
+      justify-content: left
+
+@media screen and (max-width: 768px)
+  .post-reward
+    .reward-main
+      justify-content: center !important
+      position: fixed
+      bottom: 0
+      left: 0
+      right: 0
+      z-index: 1003
+      width: 100%
+      margin: auto
+      padding: 0
+
+    .reward-main
+      .reward-all
+        width: 100%
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-around
+        padding: 30px 0 60px 0
+        border-radius: 12px 12px 0 0
+
+  #post
+    .tag_share
+      .post-meta__tags
+        margin: 0 .5rem 0 0
+
+  a.reward-main-btn
+    margin: 4px auto
+
+.post-reward
+  .reward-main
+    .reward-all:after
+      display: none
+
+.reward-group
+  display: flex
+  margin-top: .5rem
+
+.post-reward
+  .reward-main
+    .reward-all
+      .reward-item:first-child
+        img
+          border-color: var(--sco-green)
+
+      .reward-item:last-child
+        img
+          border-color: var(--sco-blue)

package/source/css/_search/algolia-search.styl

@@ -0,0 +1,154 @@
+.search-dialog
+  position fixed
+  top 5rem
+  left 50%
+  z-index 1001
+  display none
+  margin-left -15rem
+  padding 1rem
+  width 30rem
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition 0.3s
+  border-radius 8px
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-theme)
+
+  +maxWidth768()
+    top 0
+    left 0
+    margin 0
+    width 100%
+    height 100%
+
+  .search-close-button
+    position absolute
+    top 0.8rem
+    right 1rem
+    color var(--sco-gray)
+    font-size 1.4em
+    line-height 1
+    cursor pointer
+    transition color .2s ease-in-out 0s
+
+    &:hover
+      color var(--sco-main)
+
+  #algolia-input-panel
+    margin-bottom 8px
+
+  .search-box, .ais-SearchBox
+    padding-top 8px
+    max-width 100%
+    position relative
+    width 100%
+    min-width 100%
+
+    input, .ais-SearchBox-input
+      height 100%
+      width 100%
+      padding 0.25rem 0.7rem
+      outline 0
+      border var(--style-border)
+      border-radius 8px
+      background var(--sco-secondbg)
+      color var(--sco-fontcolor)
+
+      &:focus
+        border var(--style-border-hover)
+
+  .ais-Pagination
+    .ais-Pagination-item--disabled
+      visibility hidden
+
+  #search-results
+    padding 8px
+    max-height calc(80vh - 130px)
+    overflow-y auto
+
+    +maxWidth768()
+      max-height 80vh !important
+
+  .ais-Hits-list
+    padding 0
+
+  .ais-Hits-item
+    margin 10px 0
+
+  .algolia-hit-item-content
+    margin 0
+    padding-left 10px
+    font-size 14px
+    color var(--sco-gray)
+
+  .algolia-hit-item-link
+    width auto
+    max-width 100%
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    font-weight bold
+
+  mark
+    color var(--sco-theme)
+    font-style normal
+    background var(--sco-card-bg)
+
+  .ais-Hits--empty
+    text-align center
+    font-weight 600
+
+  .ais-Pagination-list
+    margin 0.2rem 0 0
+    padding 0
+    text-align center
+
+  .ais-Pagination-item.pagination-item
+    margin 0 0.2rem
+    padding 0
+    display inline-block
+
+    a
+      border-radius 4px
+      background var(--sco-main)
+      color var(--sco-white)
+      cursor pointer
+      display inline-block
+      min-width 1.2rem
+      text-align center
+      line-height 1.2rem
+
+  .search-dialog__title
+    padding 0 0 0.7rem
+    color var(--sco-main)
+    font-size 1.4em
+    line-height 1
+
+  #algolia-tips
+    padding-top 12px
+    color var(--sco-secondtext)
+    right 0
+    margin auto
+
+    #algolia-stats
+      margin-bottom 10px
+      color var(--sco-gray)
+      font-size .8rem
+      font-weight bold
+
+  #algolia-search-results
+    padding-top 8px
+
+#search-mask
+  position fixed
+  inset 0
+  z-index 1000
+  display none
+  background rgba(0, 0, 0, 0.6)
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)

package/source/css/_search/local-search.styl

@@ -0,0 +1,131 @@
+.search-dialog
+  position fixed
+  top 5rem
+  left 50%
+  z-index 1001
+  display none
+  margin-left -15rem
+  padding 1rem
+  width 30rem
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition 0.3s
+  border-radius 8px
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-theme)
+
+  +maxWidth768()
+    top 0
+    left 0
+    margin 0
+    width 100%
+    height 100%
+
+  .search-dialog-title
+    font-weight 700
+    color var(--sco-main)
+    padding 0 0 0.7rem
+    font-size 1.4em
+    line-height 1
+
+  .search-close-button
+    position absolute
+    top 0.8rem
+    right 1rem
+    color var(--sco-gray)
+    font-size 1.4em
+    line-height 1
+    cursor pointer
+    transition color .2s ease-in-out 0s
+
+    &:hover
+      color var(--sco-main)
+
+  #search-results
+    max-height calc(80vh - 130px)
+    overflow-y auto
+    margin-top 8px
+
+    .search-result-list
+      .search-result-title
+        padding-left 0
+        font-weight 700
+        position relative
+        transition color .2s ease-in-out 0s
+
+        &:hover
+          color var(--sco-main)
+
+    +maxWidth768()
+      max-height 80vh !important
+
+  #search-pagination
+    .pagination-list
+      margin 0.2rem 0 0
+      padding 0
+      text-align center
+
+      .pagination-item
+        color var(--sco-fontcolor)
+        display inline-block
+        min-width 1.2rem
+        height 1.2rem
+        text-align center
+        line-height 1.2rem
+        cursor pointer
+
+        &:hover
+          color var(--sco-main)
+
+        &.select
+          border-radius 4px
+          background var(--sco-main)
+          color var(--sco-white)
+          cursor default
+
+          &:hover
+            color var(--sco-white)
+
+  #search-tips
+    padding-top 12px
+    color var(--sco-secondtext)
+    right 0
+    margin auto
+
+    .search-result-count
+      color var(--sco-gray)
+
+      b
+        color var(--sco-main)
+
+  .search-box
+    position relative
+    margin 0 auto
+    max-width 100%
+    width 100%
+    padding-top 8px
+    margin-bottom 8px
+
+    input
+      height 100%
+      width 100%
+      border-radius 8px
+      border var(--style-border)
+      padding 0.25rem 0.7rem;
+      outline 0
+      background var(--sco-secondbg)
+      color var(--search-input-color)
+
+#search-mask
+  position fixed
+  inset 0
+  z-index 1000
+  display none
+  background rgba(0, 0, 0, 0.6)
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)