hexo-theme-solitude 1.1.0 → 1.2.1

package/source/css/_widgets/aside/allinfo.styl

@@ -0,0 +1,134 @@
+#aside-content
+  .card-webinfo
+    .webinfo
+      .webinfo-item-title
+        display flex
+
+        i
+          line-height: 2 !important
+          margin-right: 6px
+          width: 16px
+          text-align: center
+          font-size: 16px !important
+
+      .webinfo-item
+        display flex
+        justify-content space-between
+        white-space nowrap
+        -webkit-box-align center
+        align-items center
+        padding .1rem .5rem 0
+
+        div:first-child
+          -webkit-box-flex 1
+          flex 1 1 0
+          padding-right 1rem
+
+
+  .card-allinfo
+
+    hr
+      display flex
+      position relative
+      margin 1rem 0
+      border 1px dashed var(--sco-theme-op)
+
+    .item-headline
+      display none
+
+    .card-tag-cloud
+      a
+        display inline-block
+        padding 0 0.3rem
+        font-size .8rem
+        border-radius 8px
+
+        sup
+          opacity .6
+          margin-left 2px
+
+        &:hover
+          background var(--sco-theme)
+          color var(--sco-white) !important
+          box-shadow var(--sco-shadow-theme)
+          cursor pointer
+          border-radius 5px
+
+        &.tags-cloud-more
+          width 100%
+          text-align center
+          border-radius 8px !important
+          border var(--style-border)
+          margin-top 8px
+          font-size 16px !important
+
+  .card-archives
+    ul.card-archive-list
+      margin 0
+      padding 0
+      list-style none
+      display: flex
+      flex-direction: row
+      justify-content: space-between
+      flex-wrap: wrap
+
+      > .card-archive-list-item
+        width 100%
+        flex 0 0 48%
+
+        a
+          display inline-block
+          padding .15rem .5rem
+          width 100%
+          color var(--sco-fontcolor)
+          transition all .4s ease 0s
+          border-radius: 8px
+          margin: 4px 0
+          flex-direction: column
+          align-content: space-between
+          border: var(--style-border)
+
+          &:hover
+            background-color var(--sco-theme)
+            color var(--sco-card-bg)
+            border-radius 5px
+            box-shadow: var(--sco-shadow-theme)
+            padding: .15rem .5rem
+            border: var(--style-border-hover)
+            cursor pointer
+
+          span
+            display inline-block
+            vertical-align bottom
+
+            &:last-child
+              text-align right
+              margin-left: 4px
+
+          .card-archive-list-count-group
+            display flex
+            flex-direction row
+
+            span.card-archive-list-count
+              ext-align left
+              font-size 1.1rem
+              line-height 0.9
+              font-weight bold
+
+            .card-archive-list-count-unit
+              width auto
+              text-align left
+              font-size 14px
+              font-weight 700
+
+          .card-archive-list-date
+            font-size 14px
+            opacity .6
+
+
+if hexo-config('aside.tags.highlight')
+  for tag in highlightTags
+    tag = '"/tags/' + tag + '/"'
+    #aside-content .card-tag-cloud a[href*={tag}]
+      color var(--sco-lighttext)
+      font-weight 500

package/source/css/_widgets/aside/flip.styl

@@ -0,0 +1,68 @@
+favicon = hexo-config('aside.flip.favicon')
+face = hexo-config('aside.flip.face')
+faceback = hexo-config('aside.flip.backface')
+
+#aside-content
+  .card-widget.card-platform
+    background var(--sco-main)
+    display flex
+    justify-content center
+    align-content center
+    padding 0
+    cursor pointer
+    border none
+    height 110px
+    border var(--style-border)
+    transition 0.6s
+
+    &:before
+      position absolute
+      width 100%
+      height 100%
+      left 0
+      top 0
+      background url(favicon) center center no-repeat
+      content ''
+      background-size cover
+      transition .2s cubic-bezier(.45, .04, .43, 1.21)
+
+    &:hover:before
+      top 100%
+      opacity 0
+      transition .3s ease-out
+
+    #flip-wrapper
+      perspective 1000
+      position relative
+      width 235px
+      height 110px
+      z-index 1
+
+    #flip-wrapper:hover #flip-content
+      transform rotateY(180deg)
+
+    #flip-wrapper #flip-content
+      width 100%
+      height 100%
+      transform-style preserve-3d
+      transition cubic-bezier(0, 0, 0, 1.29) 0.3s
+
+    #flip-wrapper #flip-content .face
+      position absolute
+      width 100%
+      height 100%
+      -webkit-backface-visibility hidden
+      backface-visibility hidden
+      background url(face) center center no-repeat
+      background-size 100%
+
+    #flip-wrapper #flip-content .face.back
+      display block
+      -webkit-transform rotateY(180deg)
+      transform rotateY(180deg)
+      box-sizing border-box
+      background url(faceback) center center no-repeat
+      background-size 100%
+
+    [data-theme='dark'] #aside-content .card-widget.card-platform
+      background var(--sco-card-bg)

package/source/css/_widgets/aside/history.styl

@@ -0,0 +1,35 @@
+#aside-content
+  .card-history
+    .swiper-wrapper
+      flex-direction column
+
+    .history_slide
+      text-align left
+      display flex !important
+      flex-direction column
+      align-items flex-start
+
+    #history-baidu > .blog-slider__pagination
+      display none
+
+    .history_slide_time
+      color var(--sco-secondtext)
+      font-size 14px
+      font-style italic
+      font-weight lighter
+
+    .history_slide_link
+      line-height 1.5
+      -webkit-line-clamp 2
+      display -webkit-box
+      overflow hidden
+      -webkit-box-orient vertical
+
+      a
+        color var(--sco-main)
+        padding 0 4px
+        border-radius 4px
+
+        &:hover
+          color var(--sco-white)
+          background var(--sco-main)

package/source/css/_widgets/aside/index.styl

@@ -0,0 +1,156 @@
+#aside-content
+  width 300px
+
+  > .card-widget:first-child
+    transition: .3s
+    border: none
+    box-shadow: none
+    background: var(--sco-main)
+    margin-top: 0
+
+  .card-archives ul.card-archive-list > .card-archive-list-item a span,
+  .card-categories ul.card-category-list > .card-category-list-item a span,
+  .card-info .card-info-data > .card-info-data-item a .headline,
+  #pagination .next_info,
+  #pagination .prev_info,
+  #sidebar #sidebar-menus .menus_items .site-page,
+  #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-desc,
+  .flink#article-container .flink-list > .flink-list-item a .flink-item-name,
+  .limit-one-line
+    text-overflow ellipsis
+    white-space nowrap
+
+  .aside-list > .aside-list-item .content > .comment,
+  .aside-list > .aside-list-item .content > .name,
+  .aside-list > .aside-list-item .content > .title,
+  #error-wrap .error-content .error-info .error_subtitle,
+  #post-info .post-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .article-title,
+  #recent-posts > .recent-post-item > .recent-post-info > .content,
+  .article-sort-item-title,
+  .limit-more-line,
+  .relatedPosts > .relatedPosts-list .content .title,
+  figure.gallery-group .gallery-group-name,
+  figure.gallery-group p
+    display -webkit-box
+    -webkit-box-orient vertical
+
+  .author-info__description,
+  .author-info__name,
+  #site-name,
+  #site-subtitle,
+  #site-title
+    font-family "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+
+  +minWidth900()
+    padding-left 15px
+
+  +maxWidth1200()
+    display none
+
+  +minWidth1300()
+    padding-left 1rem
+    animation slide-in .6s .3s backwards
+
+  .card-widget.card-power, .card-widget.card-history, .card-widget.card-welcome
+    padding: .4rem .6rem !important
+
+  .item-headline
+    padding-bottom
+    margin-left 8px
+    font-size 1rem
+    font-weight 700
+    display flex
+    align-items center
+
+    i
+      font-size 18px
+      max-width 20px
+
+    span
+      margin-left 4px
+
+    + div, + ul
+      padding 0
+      -webkit-user-select none
+
+  .card-widget
+    box-shadow var(--sco-shadow-border)
+    background var(--sco-card-bg)
+    border var(--style-border)
+    transition 0.3s
+    border-radius 12px
+    position relative
+    overflow hidden
+    margin-top 1rem
+    padding 1rem 1.2rem
+
+    &:hover
+      box-shadow var(--sco-shadow-border)
+
+    > .card-widget
+      &:first-child
+        transition 0.3s
+        border none
+        margin-top 0
+
+  .sticky_layout
+    top 80px
+    transition top 0s
+
+    +minWidth900()
+      position sticky
+      top: 20px
+      transition: top .3s ease 0s
+
+    +minWidth1300()
+      top calc(60px + 1rem)
+
+.page
+  .sticky_layout
+    display flex
+    -webkit-box-orient vertical
+    flex-direction column
+
+
+#page-header.nav-visible + .layout > .aside-content > .sticky_layout
+  top 70px
+  transition top .5s ease 0s
+
+  +minWidth900()
+    position sticky
+
+  +minWidth1300()
+    top calc(60px + 1rem)
+
++minWidth900()
+  html.hide-aside .layout
+    -webkit-box-pack: center
+    justify-content: center
+
+  html.hide-aside .layout > .aside-content
+    display: none
+
+@import "toc.styl"
+
+if "about" in aside
+  @import "info.styl"
+
+if "allInfo" in aside
+  @import "allinfo.styl"
+
+if "wlcome" in aside
+  @import "welcome.styl"
+
+if "history" in aside
+  @import "history.styl"
+
+if "power" in aside
+  @import "power.styl"
+
+if "newestPost" in aside
+  @import "newPost.styl"
+
+if "flip" in aside
+  @import "flip.styl"

package/source/css/_widgets/aside/info.styl

@@ -0,0 +1,263 @@
+#aside-content
+  .card-widget
+    &:hover
+      .avatar-sticker
+        opacity: 0
+        transform: scale(0)
+
+    &.card-recent-post
+      padding: .4rem .6rem !important
+
+    &.card-info
+      padding 0 !important
+      box-shadow var(--sco-shadow-black)
+
+      > div.card-content
+        padding 1rem 1.2rem
+        min-height 320px
+        position relative
+
+  > .card-widget.card-info
+    &:before
+      background linear-gradient(-25deg, var(--sco-main), var(--sco-main-op-deep), var(--sco-main), var(--sco-main-op-deep))
+      background-size 400%
+      position absolute
+      width 100%
+      height 100%
+      left 0
+      top 0
+      content ''
+      animation gradient 15s ease infinite
+
+    > div.card-content
+      padding 1rem 1.2rem
+      min-height 320px
+      position relative
+
+    > div.card-info-avatarimg
+      overflow hidden
+      background var(--sco-yellow)
+      transition 1.5s
+      min-height 160px
+      position relative
+      box-shadow var(--sco-shadow-yellow)
+
+      &:hover img
+        transform: scale(1.03)
+
+  .card-info
+    .avatar-sticker
+      position absolute
+      bottom 2px
+      right 2px
+      width 33px
+      height 33px
+      line-height 34px
+      z-index 0
+      display flex
+      align-items center
+      justify-content center
+      transition .3s .2s
+      transform scale(1)
+      background var(--sco-white)
+      border-radius 50%
+
+      svg
+        width 26px
+        height 26px
+
+      ../:hover .avatar-sticker
+        opacity 0
+        transform scale(0)
+
+    .author-info__desc
+      font-size 12px
+      color var(--sco-card-bg)
+      opacity .6
+      line-height 1.5
+      -webkit-line-clamp 2
+      display -webkit-box
+      overflow hidden
+      -webkit-box-orient vertical
+
+    #author-info__sayhi
+      text-align center
+      width fit-content
+      color var(--sco-white)
+      background var(--sco-white-op)
+      font-size 12px
+      padding 2px 8px
+      border-radius 12px
+      cursor pointer
+      -webkit-user-select none
+      transition .3s
+      margin auto
+      min-width 100px
+
+      &:hover
+        background var(--sco-card-bg)
+        color var(--sco-fontcolor) !important
+        transform scale(1.1)
+
+    .card-info-avatar.is-center
+      flex-direction column
+      display flex
+      align-items flex-start
+
+    .avatar-img-group
+      width: 118px
+      height: 118px
+      right: calc(50% - 59px)
+      top: 90px
+      border-radius: 500px
+      position: absolute
+      transition: cubic-bezier(.69, .39, 0, 1.21) .3s
+      transform-origin: bottom
+      border: 5px solid var(--sco-card-bg)
+
+      ../:hover .avatar-img-group
+        opacity: 0
+        transform: scale(0)
+
+    .author-info__name
+      text-align left
+      font-weight 700
+      color var(--sco-card-bg)
+      font-size 20px
+      line-height 1
+      margin-bottom 5px
+
+    .author-info__top-group
+      display flex
+      height 28px
+      width 100%
+
+    .author-info__description_group
+      position: absolute
+      top: 50px
+      width: 100%
+      left: 0
+      padding: 1.2rem
+      opacity: 0
+      transition: .3s
+
+      ../:hover .author-info__description_group
+        opacity: 1
+
+      .author-info__description
+        line-height: 1.38
+        margin: .3rem 0
+        text-align: justify
+        color: rgba(255, 255, 255, .8)
+
+        b
+          color: var(--sco-white)
+
+      .author-info__description2
+        line-height: 1.38
+        margin: .3rem 0
+        text-align: justify
+        width: 100%
+        z-index: 2
+        color: rgba(255, 255, 255, .8)
+
+        b
+          color: var(--sco-white)
+
+    .author-info__bottom-group
+      display: flex
+      justify-content: space-between
+      position: absolute
+      padding: 1.2rem
+      width: 100%
+      left: 0
+      bottom: 0
+      align-items: center
+
+    .card-info-data
+      display table
+      margin .7rem 0 .2rem
+      width 100%
+      table-layout fixed
+
+      > div:nth-child(0) > a > div.headline
+        font-weight: 700
+
+      > .card-info-data-item
+        display table-cell
+        transition: .3s
+
+        a
+          .headline
+            color var(--sco-fontcolor)
+            font-size 1em
+
+          .length-num
+            margin-top -.3rem
+            color var(--text-highlight-color)
+            font-size 1.4em
+
+        &:hover
+          background #000
+          border-radius 5px
+
+    .card-info-social-icons
+      margin .3rem 0 -.3rem
+      display: flex
+      justify-content: flex-start
+      flex-direction: row
+      flex-wrap: nowrap
+      cursor: pointer
+
+      .social-icon
+        margin 0 .5rem
+        color var(--sco-fontcolor)
+        font-size 1.4em
+        cursor pointer
+        display flex
+
+      i
+        transition all .3s ease 0s
+        padding 8px
+        border-radius 32px
+        cursor: pointer
+        background: var(--sco-white-op)
+        color: var(--sco-white)
+        font-size: 1rem
+        width: 40px
+        height: 40px
+        display: flex
+        align-items: center
+        justify-content: center
+
+        +minWidth1300()
+          color var(--sco-white)
+          background var(--sco-black-op)
+
+        &:hover
+          background var(--sco-white)
+          transform scale(1.1)
+          color var(--sco-main)
+          box-shadow none
+
+    img.avatar-img
+      width 118px
+      right 0
+      top 0
+      border-radius 500px
+      position absolute
+      opacity 1
+      transition .3s
+
+[data-theme=dark] #aside-content
+  > .card-widget.card-info
+    border: var(--style-border-always)
+
+  .card-info
+    .card-info-social-icons
+      i
+        color: var(--sco-card-bg)
+
+        &:hover
+          background var(--sco-card-bg)
+          color var(--sco-fontcolor)

package/source/css/_widgets/aside/newPost.styl

@@ -0,0 +1,55 @@
+#aside-content
+  .card-recent-post
+    .aside-list
+      .aside-list-item
+        padding 2px 6px 8px 6px
+        border-radius 12px
+        transition .3s
+        margin 4px 0
+        cursor pointer
+        display flex
+        align-items flex-start
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-white)
+          transition .3s
+          box-shadow var(--sco-shadow-main)
+
+          .content a
+            color var(--sco-white)
+
+        .thumbnail
+          -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+          border-radius 8px
+          border var(--style-border)
+          display flex
+          align-items center
+          overflow hidden
+          width 2.1em
+          height 2.1em
+          margin-top 4px
+
+          img
+            width 140%
+            height 140%
+            transition all .6s ease 0s
+            object-fit cover
+
+        .content
+          -webkit-box-flex 1
+          flex 1 1 0
+          padding-left 10px
+          word-break break-all
+          display flex
+          flex-direction column
+
+          .title
+            font-weight 700
+            padding 2px 0
+            margin-bottom 8px
+            color var(--sco-fontcolor)
+            font-size 95%
+            line-height 1.3
+            -webkit-line-clamp 2
+            overflow hidden