hexo-theme-solitude 1.2.6 → 1.3.1

package/source/css/_page/_home/home-top.styl

@@ -0,0 +1,541 @@
+// 首页顶部一坨 and 友链banner
+div#banners
+  display none
+  +minWidth1200()
+    display flex
+    width 100%
+    height 76%
+    background var(--sco-card-bg)
+    margin-bottom .5rem
+    border var(--style-border)
+    border-radius 12px
+    overflow hidden
+    position relative
+    box-shadow var(--sco-shadow-border)
+    flex-direction column
+    transition .3s
+    will-change transform
+    animation slide-in .6s .1s backwards
+
+    :not(.flink)&:hover
+      box-shadow var(--sco-shadow-main)
+
+    .banner-button-group
+      position absolute
+      right 2rem
+      top 2rem
+      display flex
+
+    .banner-button
+      padding 8px 12px
+      background var(--sco-fontcolor)
+      border-radius 12px
+      color var(--sco-card-bg)
+      display flex
+      align-items center
+      z-index 1
+      transition .3s
+      cursor pointer
+      box-shadow var(--sco-shadow-black)
+
+      &.secondary
+        background var(--sco-secondbg)
+        border var(--style-border-always)
+        color var(--sco-lighttext)
+        margin-right 1rem
+        box-shadow var(--sco-shadow-border)
+
+      &:hover
+        background var(--sco-theme)
+        color var(--sco-white)
+
+      i
+        margin-right 8px
+        font-size 1rem
+
+    .banners-title
+      top 2rem
+      left 1.5rem
+      position absolute
+      display flex
+      flex-direction column
+
+      &-big
+        font-size 36px
+        line-height 1
+        font-weight 700
+        margin-bottom 8px
+
+      &-small
+        font-size 12px
+        line-height 1
+        color var(--sco-secondtext)
+        margin-top 8px
+        margin-bottom .5rem
+
+    #banner-hover
+      position absolute
+      width 100%
+      height 100%
+      top 0
+      left 0
+      border-radius 12px
+      background var(--sco-theme)
+      color var(--sco-card-bg)
+      padding-left .5rem
+      display flex
+      flex-direction column
+      justify-content center
+      opacity 0
+      transition cubic-bezier(.71, .15, .16, 1.15) .6s
+
+      i
+        font-size 80px
+        opacity .4
+
+    &:hover
+      #banner-hover
+        opacity 1
+        padding-left 2rem
+        background var(--sco-theme-op-deep)
+        backdrop-filter blur(15px)
+        transform translateZ(0)
+        transition .3s
+        background-size 200%
+        cursor pointer
+
+    .flink
+      .banners-title
+        top 1.5rem
+
+    .bannerText
+      font-size 4rem
+      line-height 4rem
+      font-weight 700
+
+  .tags-group-all
+    display flex
+    transform rotate(-30deg)
+
+    &.nowrapMove
+      transform rotate(0)
+      padding-bottom 2rem
+
+      .tags-group-wrapper
+        margin-top: 7rem
+        animation: rowup 120s linear infinite
+
+      .tags-group-icon
+        border-radius 50%
+
+        img
+          min-width 100%
+          min-height 100%
+          border-radius 50%
+          object-fit cover
+
+    .tags-group-wrapper
+      margin-top: 5rem
+      display: flex
+      flex-wrap: nowrap
+      animation: rowup 60s linear infinite
+
+      /.tags-group-icon-pair
+        margin-left 1rem
+        user-select none
+
+        a img
+          border-radius 50%
+
+        .tags-group-icon
+          width 120px
+          height 120px
+          display flex
+          align-items center
+          justify-content center
+          color #fff
+          font-size 66px
+          font-weight 700
+          box-shadow var(--sco-shadow-blackdeep)
+
+          &:nth-child(even)
+            margin-top 1rem
+            transform translate(-60px)
+
+          img
+            width 60%
+
+#home_top
+  max-width 1400px
+  margin .5rem auto auto
+  padding 0 1.5rem
+
+  +maxWidth768()
+    padding 0
+    margin-top 0
+
+  // banner
+  if hexo-config('hometop.banner.enable')
+    .recent-top-post-group
+      border-radius 12px
+      overflow hidden
+      overflow-x auto
+      width 100%
+      margin-bottom 0
+      -webkit-user-select none
+
+      +maxWidth768()
+        border-radius 0
+
+      .recent-post-top
+        display flex
+        flex-direction row
+        flex-wrap nowrap
+        width 100%
+        overflow-x scroll
+
+        &::-webkit-scrollbar
+          display none
+
+        / #bannerGroup
+          display flex
+
+          +minWidth1200()
+            width calc(50% - .25rem)
+            margin-right .5rem
+            height calc(328px + .5rem)
+            display flex
+            flex-direction column
+            justify-content space-between
+
+          .categoryGroup
+            display flex
+            flex-direction column
+            justify-content space-between
+            min-width 200px
+            +minWidth1200()
+              flex-direction row
+              height 24%
+              animation slide-in .6s .2s backwards
+            +maxWidth768()
+              min-width 130px
+              margin-bottom .5rem
+              margin-left 1rem
+              max-height 164px
+              overflow hidden
+              position relative
+
+            .categoryItem
+              overflow hidden
+              transform scale(1)
+              transition all .8s cubic-bezier(.65, .15, .37, 1.19)
+              height 48%
+              border-radius 12px
+              +maxWidth768()
+                border-radius 0
+                height 47%
+                box-shadow none
+
+              &:nth-child(3)
+                display none
+              +minWidth1200()
+                width calc(100% / 3 - .33rem)
+                height 100%
+                margin-right .5rem
+
+                &:last-child
+                  margin-right 0
+
+                &:hover
+                  width 50%
+
+                &:nth-child(3)
+                  display flex
+
+              a.categoryButton
+                height 100%
+                width 100%
+                background var(--sco-card-bg)
+                border-radius 12px
+                display inline-block
+                text-align left
+                line-height 4em
+                font-weight 700
+                font-size .9rem
+                color var(--sco-white)
+                transition all .8s cubic-bezier(.39, .575, .565, 1)
+                transform scale(1)
+                overflow hidden
+                +maxWidth768()
+                  border-radius 8px
+
+                &:after
+                  top 50px
+                  width 1rem
+                  left 21px
+                  height 2px
+                  background var(--sco-white)
+                  content ""
+                  border-radius 1px
+                  position absolute
+
+                i
+                  font-size 5rem
+                  opacity .2
+                  position absolute
+                  right 0
+                  top 20%
+                  transition .3s
+                  width 100px
+                  text-align center
+                  filter blur(2px)
+                  transform scale(1) rotate(15deg)
+
+                  +maxWidth768()
+                    display none
+
+                &:hover
+                  i
+                    opacity .8
+                    transition .8s
+                    transition-delay .15s
+                    transform scale(1.03) rotate(0)
+                    font-size 2.5rem
+                    filter blur(0)
+
+                .categoryButtonText
+                  padding-left 21px
+
+                &.bikan
+                  background linear-gradient(to right, #358bff, #15c6ff)
+                  background-size 200%
+
+                  [data-theme=dark] &
+                    background linear-gradient(to right, #0653b8, #2fcbff)
+                    background-size 200%
+
+                &.remen
+                  background linear-gradient(to right, #f65, #ffbf37)
+                  background-size 200%
+
+                  [data-theme=dark] &
+                    background linear-gradient(to right, #e22a16, #da980c)
+                    background-size 200%
+
+                &.shiyong
+                  background linear-gradient(to right, #18e7ae, #1eebeb)
+                  background-size 200%
+
+                  [data-theme=dark] &
+                    background linear-gradient(to right, #099e74, #0ea4a4)
+                    background-size 200%
+
+  /.topGroup
+    display: flex
+
+    +minWidth1200()
+      display flex
+      flex-direction row
+      flex-wrap wrap
+      height calc(328px + .5rem)
+      align-content space-between
+      width calc(50% - 0.25rem)
+      position relative
+      animation slide-in .6s .1s backwards
+      overflow-x visible
+      gap 0.5rem
+
+    .recent-post-item
+      display flex
+      width 200px
+      flex-direction column
+      align-items flex-start
+      margin-left .5rem
+      background var(--sco-card-bg)
+      border-radius 12px
+      overflow hidden
+      min-width 200px
+      height 164px
+      max-height 164px
+      border var(--style-border-always)
+      transition .3s
+      position relative
+      box-shadow var(--sco-shadow-border)
+      +minWidth1300()
+        width calc(100% / 3 - 0.35rem)
+        margin-left 0
+
+      +minWidth1200()
+        display flex
+        width calc(100% / 3 - 0.35rem)
+        flex-direction column
+        align-items flex-start
+        margin-left 0
+        background var(--sco-card-bg)
+        border-radius 12px
+        overflow hidden
+        min-width 200px
+        height 164px
+        max-height 164px
+        border var(--style-border-always)
+        transition .3s
+        position relative
+        box-shadow var(--sco-shadow-border)
+
+      +maxWidth768()
+        border-radius 8px
+        box-shadow none
+        clip-path inset(0 0 0 0 round 8px)
+
+        &:last-child
+          margin-right 1rem
+
+      &:hover .post_cover a .recent-post-top-text
+        left 0
+
+      .post_cover
+        width 100%
+        -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+
+        a
+          height 100px
+          overflow hidden
+          display flex
+
+          img
+            object-fit cover
+            width 100%
+            background var(--sco-secondbg)
+
+          .recent-post-top-text
+            position absolute
+            top 0
+            left -50px
+            display flex
+            z-index 1
+            background var(--sco-theme)
+            color var(--sco-white)
+            padding 2px 8px
+            font-size .6rem
+            border-radius 0 0 12px 0
+            transition .3s
+            cursor pointer
+
+      .recent-post-info
+        padding .3rem .5rem .3rem .5rem
+        transition .3s
+
+        .article-title
+          -webkit-line-clamp 2
+          overflow hidden
+          display -webkit-box
+          -webkit-box-orient vertical
+          line-height 1.5
+          justify-content center
+          align-items flex-end
+          align-content center
+          font-weight 700
+          font-size .8rem
+          padding 0
+
+
+    .todayCard
+      display none
+
+      +minWidth1200()
+        position absolute
+        width 100%
+        z-index 3
+        height 100%
+        top 0
+        right 0
+        background var(--sco-card-bg)
+        border-radius 12px
+        margin-left 0.5rem
+        overflow hidden
+        transition .3s
+        display flex
+        cursor pointer
+        pointer-events all
+
+        &::after
+          position: absolute
+          content: ''
+          width: 100%
+          height: 100%
+          top: 0
+          left: 0
+          box-shadow 0 -109px 133px -9px $todayCardColor inset
+
+        &.hide
+          opacity: 0
+          pointer-events: none
+
+        .todayCard-info
+          position: absolute
+          bottom: 2rem
+          left: 2rem
+          z-index: 2
+          color: var(--sco-white)
+          max-width: 60%
+          transition: .3s
+
+          .todayCard-tips
+            opacity: .8
+            font-size: .6rem
+
+          .todayCard-title
+            font-size: 28px
+            font-weight: 700
+            line-height: 36px
+
+        .todayCard-cover
+          position: absolute
+          min-width: 100%
+          min-height: 100%
+          top: 0
+          left: 0
+          background-size: cover
+          z-index: -1
+          transition: .3s
+
+        .banner-button-group
+          position: absolute
+          right: 2rem
+          bottom: 2rem
+          display: flex
+          transition: .3s
+
+        .banner-button
+          background: var(--sco-white-op)
+          border-radius: 20px
+          color: var(--sco-white)
+          display: flex
+          align-items: center
+          z-index: 1
+          transition: .3s
+          cursor: pointer
+          backdrop-filter: saturate(180%) blur(20px)
+          transform: translateZ(0)
+          height: 40px
+          width: 118px
+          justify-content: center
+
+          i
+            margin-right: 8px
+            font-size: 22px
+
+          &:hover
+            background: var(--sco-theme)
+            color: var(--sco-white)
+
+        &.hide
+          .todayCard-info
+            bottom: 1rem
+            opacity: 0
+
+          .todayCard-cover
+            transform: scale(1.2)
+
+          .banner-button-group
+            bottom: 1rem

package/source/css/_page/_home/index.styl

@@ -0,0 +1,15 @@
+/**
+ * 首页样式
+ */
+// 首页顶部
+if hexo-config('hometop.banner.enable')
+  @import "home-top.styl"
+
+// 分类导航栏
+@import "category-bar.styl"
+
+// 首页文章列表
+@import "recent-post.styl"
+
+// 分页
+@import "pagination.styl"

package/source/css/_page/_home/pagination.styl

@@ -0,0 +1,176 @@
+#pagination
+  width 100%
+  +minWidth1300()
+    margin-top .25rem
+  +minWidth768()
+    overflow visible
+  +maxWidth768()
+    margin-bottom 0
+    margin-top 0
+
+  .pagination
+    text-align center
+    +minWidth768()
+      display flex
+      position relative
+      justify-content center
+    +maxWidth768()
+      display flex
+
+    .extend
+      +maxWidth768()
+        width 100%
+        height 2.5rem
+        margin .2rem 0 1rem 0
+        border-radius 12px
+        line-height 2.5rem
+        background var(--sco-card-bg)
+        border var(--style-border-always)
+        box-shadow var(--sco-shadow-border)
+
+      i
+        +maxWidth768()
+          display none
+
+  .page-number
+    display inline-block
+    margin 0 .2rem
+    min-width 1.2rem
+    height 1.2rem
+    text-align center
+    line-height 1.2rem
+
+    +minWidth768()
+      width 2rem
+      background var(--sco-card-bg)
+      height 2rem
+      line-height calc(2rem - 2px)
+      border-radius 8px
+      margin 0 .3rem
+      box-shadow var(--sco-shadow-border)
+      border var(--style-border)
+      transition .3s
+      &:hover
+        color var(--sco-theme)
+        border var(--style-border-hover)
+        box-shadow var(--sco-shadow-main)
+    +maxWidth768()
+      display none
+
+    &.current
+      background var(--sco-theme)
+      color var(--sco-white)
+      border-radius 5px
+
+      +minWidth768()
+        background var(--sco-theme)
+        border var(--style-border-hover)
+        box-shadow var(--sco-shadow-theme)
+
+        &:hover
+          background var(--sco-theme)
+          box-shadow var(--sco-shadow-theme)
+          color var(--sco-white)
+
+  a.extend.next, a.extend.prev
+    +minWidth768()
+      width 4rem
+      height 2rem
+      line-height 1.9rem
+      border-radius 8px
+      background var(--sco-card-bg)
+      box-shadow var(--sco-shadow-border)
+      position absolute
+      border var(--style-border)
+      display flex
+      align-items center
+      justify-content center
+      overflow hidden
+      transition .3s
+
+      i
+        transition .3s
+
+  a.extend
+    &:hover
+      color var(--sco-theme)
+      border var(--style-border-hover)
+      box-shadow var(--sco-shadow-main)
+
+    &.next
+      right 0
+      +minWidth768()
+        .pagination_tips_next
+          margin-left -32px
+          transition .3s ease-out 0s
+          opacity 0
+
+      &:hover
+        .pagination_tips_next
+          margin-left 2px
+          opacity 1
+          white-space nowrap
+
+    &.prev
+      left 0
+      +minWidth768()
+        .pagination_tips_prev
+          margin-right -32px
+          transition .3s ease-out 0s
+          opacity 0
+
+      &:hover
+        .pagination_tips_prev
+          margin-right 2px
+          opacity 1
+          white-space nowrap
+
+  .toPageGroup
+    display flex
+    position relative
+    margin 0 .3rem
+    +maxWidth768()
+      display none
+
+    a#toPageButton
+      display flex
+      position absolute
+      width 40px
+      height 40px
+      right 0
+      top 0
+      border-radius 8px
+      justify-content center
+      align-items center
+      transition .3s
+      background var(--sco-card-bg)
+      border var(--style-border-always)
+      cursor text
+      pointer-events none
+
+    &:focus-within a#toPageButton, &:hover a#toPageButton
+      width 30px
+      height 30px
+      right 4px
+      top 5px
+      background var(--sco-card-bg)
+      border 1px solid var(--sco-none)
+      border-radius 4px
+      opacity .2
+
+    input
+      width 40px
+      height 40px
+      border-radius 8px
+      border var(--style-border-always)
+      transition .3s
+      outline-style none
+      font-size 16px
+      padding-left 12px
+      background var(--sco-secondbg)
+      color var(--sco-fontcolor)
+
+      &:focus, /#pagination .toPageGroup:hover input
+        border var(--style-border-hover-always)
+        outline-style none
+        width 100px