hexo-theme-solitude 3.0.5 → 3.0.7

package/source/css/_layout/aside.styl

@@ -1,4 +1,12 @@
 #aside-content
+  display flex
+  flex-direction column
+  gap var(--gap)
+  animation slide-in .6s .3s backwards
+
+  .hide-aside &
+    display none
+
   +minWidth1200()
     width 300px
   if hexo-config('aside.position') == 0
@@ -16,170 +24,218 @@
     .card-widget:not(#card-toc)
       display: none
 
-  +minWidth1300()
-    animation slide-in .6s .3s backwards
-    if hexo-config('aside.position') == 0
-      padding-right .5rem
-    else
-      padding-left .5rem
-
-  .item-headline
-    padding-bottom 0
-    margin-left 8px
-    font-size 1em
-    font-weight 700
-    display flex
-    align-items center
-
-    i
-      font-size 16px
-      max-width 20px
-
-    span
-      margin-left 4px
-
-    + div, + ul
-      padding 0
-      user-select none
-
   .card-widget
-    box-shadow var(--efu-shadow-border)
+    border-radius var(--radius)
+    transition all .3s
+    overflow hidden
     background var(--efu-card-bg)
+    box-shadow var(--efu-shadow-black)
     border var(--style-border)
-    transition 0.3s
-    border-radius 12px
-    position relative
-    overflow hidden
-    margin-top .5rem
-    padding .5rem .7rem
+    user-select none
 
-    &:hover
-      box-shadow var(--efu-shadow-border)
+    .item-headline
+      padding-bottom 0
+      margin-left 8px
+      font-size 1em
+      font-weight 700
+      display flex
+      align-items center
+      gap 5px
 
-  > .card-widget
-    &:first-child
-      transition 0.3s
-      margin-top 0
+      i
+        font-size 18px
 
-  .sticky_layout
-    top calc(60px + .5rem)
-    position sticky
-    z-index 10
-    transition: top .3s ease 0s
+    .card-content
+      padding 1rem 1.2rem
+      min-height 320px
+      height 320px
+      position relative
+      user-select none
+      display flex
+      flex-direction column
+      gap var(--gap)
+
+.card-info
+  position relative
+  &::before
+    background linear-gradient(-25deg, var(--efu-main), var(--efu-main-op-deep))
+    position absolute
+    width 100%
+    height 100%
+    left 0
+    top 0
+    content ''
+
+  &:hover
+    .avatar, .sticker
+      transform scale(0)
+
+    .description
+      opacity 1
 
-  #author-info__sayhi
-    text-align center
+  .sayhi
     width fit-content
-    color var(--efu-white)
-    background var(--efu-white-op)
-    backdrop-filter blur(10px)
     font-size 12px
-    padding 2px 8px
-    border-radius 12px
+    background var(--efu-white-op)
+    border-radius var(--radius)
     cursor pointer
-    user-select none
-    transition .3s
-    margin auto
     min-width 100px
+    padding 2px 10px
+    color var(--efu-white)
+    transition all .3s
 
-    / [data-theme=dark] &
-      background var(--efu-black)
-      color var(--efu-white)
-
-      &:hover
-        color var(--efu-white)
+    [data-theme='dark'] &
+        background var(--efu-black)
 
     &:hover
-      background var(--efu-card-bg)
+      background var(--efu-white)
       color var(--efu-main)
       transform scale(1.1)
+      transition all .3s
 
-      &:active
-        transform scale(.97)
-        opacity .8
-
-  .card-info-social-icons
-    margin 0
-    display flex
-    justify-content flex-start
-    flex-direction row
-    flex-wrap nowrap
-    cursor pointer
-
-    .social-icon
-      margin 0
-      margin-left 8px
-      color var(--efu-fontcolor)
-      font-size 1.4em
-      cursor pointer
-      display flex
+      [data-theme='dark'] &
+        background var(--efu-black)
+        color var(--efu-white)
+      
+  .avatar
+    width 118px
+    height 118px
+    min-width 118px
+    min-height 118px
+    right calc(50% - 59px)
+    top 90px
+    position absolute
+    transition cubic-bezier(.69,.39,0,1.21) .3s
+    transform-origin bottom
+
+    img
+      border-radius 50%
+      width 100%
+      height 100%
+      border 5px solid var(--efu-card-bg)
+      overflow hidden
 
-    i
-      transition all .3s ease 0s
-      padding 8px
-      border-radius 32px
-      cursor pointer
-      background var(--efu-white-op)
-      color var(--efu-card-bg)
-      width 40px
-      height 40px
+    .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 ease-out .2s
+      background var(--efu-white)
+      border-radius 50%
+  
+  .description
+    width 100%
+    opacity 0
+    transition .3s
+    color var(--efu-card-bg)
+    display flex
+    flex-direction column
+    line-height 1.5
+    gap var(--gap)
+
+  .bottom-group
+    position absolute
+    left 0
+    bottom 0
+    width 100%
+    padding 1rem
+    display flex
+    justify-content space-between
+    
+    .left
+      flex 1
 
-      &:hover
-        background var(--efu-white)
-        transform scale(1.1)
-        color var(--efu-main)
-        box-shadow none
+      .name
+        font-weight 700
+        color var(--efu-card-bg)
+        font-size 20px
+        line-height 1
+        margin-bottom 5px
 
-      / [data-theme=dark] &
-        background var(--efu-black-op)
+      .desc
+        font-size 12px
+        color var(--efu-card-bg)
+        opacity .6
+        line-height 1
+    
+    .social-icons
+      flex 1
+      display flex
+      justify-content flex-end
+      gap 5px
+
+      .social-icon
+        color var(--efu-fontcolor)
+        cursor pointer
+        display flex
+        transition all .3s
 
         &:hover
-          background-color var(--efu-black)
+          transform scale(1.1)
+          i
+            color var(--efu-main)
+            background var(--efu-white)
+
+        i
+          background var(--efu-white-op)
           color var(--efu-white)
+          font-size 1rem
+          width 40px
+          height 40px
+          display flex
+          align-items center
+          justify-content center
+          transition all .3s ease 0s
+          padding 8px
+          border-radius 32px
 
-+minWidth900()
-  html.hide-aside .layout
-    -webkit-box-pack: center
-    justify-content: center
+          [data-theme='dark'] &
+            background var(--efu-black)
+            color var(--efu-white)
 
-    > div:first-child
-      width 100%
+.card-webinfo
+  padding .5rem 1rem
 
-  html.hide-aside .layout > .aside-content
-    display: none
+  / .webinfo-item
+    display flex
+    flex-direction row
+    justify-content space-between
+    user-select none
+    font-size 14px
 
-#aside-content
-  .card-toc
-    padding .5rem .5rem
+.card-tag-cloud
+  max-height 360px
+  overflow hidden
+  position relative
+  display flex
+  flex-direction row
+  flex-wrap wrap
+  gap 5px
+
+  a
+    color var(--efu-fontcolor)
+    padding 0 .3rem
+    font-size .8rem
+    border-radius 8px
+    transition .3s
 
     &:hover
-      box-shadow var(--efu-shadow-border)
+      background var(--efu-lighttext)
+      color var(--efu-card-bg)
+      box-shadow var(--efu-shadow-theme)
 
-    +minWidth900()
-      right 0 !important
+    sup
+      opacity .6
+      margin-left 2px
 
-    .toc-content
-      overflow-y auto
-      max-height calc(100vh - 300px)
-
-      &::before
-        position absolute
-        top .6rem
-        right 1.2rem
-        color #a9a9a9
-        content attr(progress-percentage)
-        font-style italic
-        font-size 1.2rem
-
-      .toc-link.active
-        border-left-color #0061cc
-        background #0079ff
-        color #fff
-
-  #card-toc
+#card-toc
     &:hover
       .toc-content
         .toc-link:not(.active) span
@@ -193,7 +249,7 @@
     +maxWidth1200()
       position: fixed
       right: 3rem
-      bottom: 10px
+      bottom: 1rem
       z-index: 100
       max-width: 380px
       max-height: calc(100% - 60px)
@@ -201,6 +257,7 @@
       transition: transform .3s
       transform: scale(0)
       transform-origin: right bottom
+      padding .5rem
 
       &.open
         transform: scale(1)
@@ -238,22 +295,17 @@
 
       .toc-item.active .toc-link
         opacity 1
-        border-radius 8px
 
       .toc-link
-        transition all .2s ease-in-out 0s
+        transition all .2s
         line-height 24px
         padding 8px
-        border-radius 12px
         color var(--efu-secondtext)
         min-height 40px
         display flex
         align-items center
-        cursor pointer
 
         &.active
-          border-radius 12px
-          border-left-color var(--efu-hovertext)
           background-color var(--efu-card-bg)
           color var(--efu-lighttext)
           font-weight 700
@@ -269,478 +321,73 @@
             filter blur(1px)
           transition .3s
 
-[data-theme=dark]
-  .toc
-    .toc-item.active .toc-link .toc-text
-      color: var(--efu-white)
-
-#aside-content
-  .card-widget
-    if hexo-config('aside.my_card.author.sticker')
-      &:hover
-        .avatar-sticker
-          opacity 0
-          transform scale(0)
-
-    &.card-recent-post
-      padding .4rem .6rem !important
-
-    &.card-info
-      padding 0 !important
-      box-shadow var(--efu-shadow-black)
-
-      > div.card-content
-        padding 1rem 1.2rem
-        min-height 320px
-        position relative
-
-  > .card-widget.card-info
-    &:before
-      background linear-gradient(-25deg, var(--efu-main), var(--efu-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(--efu-yellow)
-      transition 1.5s
-      min-height 160px
-      position relative
-      box-shadow var(--efu-shadow-yellow)
-
-      &:hover img
-        transform scale(1.03)
-
-  .card-info
-    if hexo-config('aside.my_card.author.sticker')
-      .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(--efu-card-bg)
-        border-radius 50%
-
-        img
-          width 26px
-          height 26px
-
-        ../ :hover .avatar-sticker
-          opacity 0
-          transform scale(0)
-
-    .author-info__desc
-      font-size 12px
-      color var(--efu-card-bg)
-      opacity .6
-      line-height 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(--efu-card-bg)
-
-      ../ :hover .avatar-img-group
-        opacity 0
-        transform scale(0)
-
-    .author-info__name
-      text-align left
-      font-weight 700
-      color var(--efu-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 left
-        color var(--efu-card-bg)
-
-        b
-          color var(--efu-card-bg)
-
-    .author-info__bottom-group
-      display flex
-      justify-content space-between
-      position absolute
-      padding 1.2rem
-      width 100%
-      left 0
-      bottom 0
-      align-items center
-
-      a.author-info__bottom-group-left:hover
-        opacity .8
-
-    .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(--efu-fontcolor)
-            font-size 1em
-
-          .length-num
-            margin-top -.3rem
-            color var(--efu-fontcolor)
-            font-size 1.4em
-
-        &:hover
-          background #000
-          border-radius 5px
-
-    img.avatar-img
-      width 108px
-      height 108px
-      object-fit cover
-      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)
-
-#aside-content
-  .card-allinfo
-
-    hr
-      display flex
-      position relative
-      margin .5rem 0
-      border 1px dashed var(--efu-theme-op)
-
-    .item-headline
-      display none
-
-    .card-tag-cloud
-      max-height $tag_cloud_limit * .4rem
-      overflow hidden
-      position relative
-
-      &.all-tags
-        max-height none
-
-        &:after
-          display none
-
-      &:after
-        content ""
-        position absolute
-        bottom 0
-        left 0
-        right 0
-        height 150px
-        background-image linear-gradient(to top, var(--efu-card-bg), transparent)
-        pointer-events none
-
-      a
-        display inline-block
-        padding 0 0.3rem
-        font-size .8rem
-        border-radius 8px
-
-        sup
-          opacity .6
-          margin-left 2px
-
-        &:hover
-          background var(--efu-theme)
-          color var(--efu-white) !important
-          box-shadow var(--efu-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
+.sticky_layout
+  position sticky
+  top calc(60px + var(--gap))
+  transition top 0s
+  display flex
+  flex-direction column
+  gap var(--gap)
 
-    span#more-tags-btn
+.card-recent-post
+  padding .5rem
+  .aside-list
+    .aside-list-item
+      padding 2px 6px 8px 6px
+      border-radius 12px
       transition .3s
-      width 100%
-      text-align center
-      background var(--efu-secondbg)
-      color var(--efu-fontcolor)
-      border-radius 8px
-      display flex
-      justify-content center
-      font-size 14px
-      padding 4px 0
-      border var(--style-border-always)
-      box-shadow var(--heo-shadow-border)
+      margin 4px 0
       cursor pointer
+      display flex
+      align-items flex-start
 
       &:hover
         background var(--efu-main)
+        color var(--efu-white)
+        box-shadow var(--efu-shadow-main)
 
-  .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(--efu-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(--efu-theme)
-            color var(--efu-card-bg)
-            border-radius 5px
-            box-shadow: var(--efu-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
-
-
-#aside-content .card-tag-cloud a.highlight
-  color var(--efu-lighttext)
-  font-weight 500
+        .content a
+          color var(--efu-white)
 
-#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
+      .thumbnail
+        border-radius 8px
+        border var(--style-border)
         display flex
-        align-items flex-start
+        align-items center
+        overflow hidden
+        width 2.1em
+        height 2.1em
+        margin-top 4px
 
-        &:hover
-          background var(--efu-main)
-          color var(--efu-white)
-          transition .3s
-          box-shadow var(--efu-shadow-main)
+        img
+          width 140%
+          height 140%
+          transition all .6s ease
+          object-fit cover
 
-          .content a
-            color var(--efu-white)
+      .content
+        flex 1
+        padding-left 10px
+        word-break break-all
+        display flex
+        flex-direction column
 
-        .thumbnail
-          -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
-          border-radius 8px
-          border var(--style-border)
-          display flex
-          align-items center
+        .title
+          display -webkit-box
+          -webkit-box-orient vertical
+          font-weight 700
+          margin 4px 0
+          font-size 95%
+          line-height 1.3
+          -webkit-line-clamp 2
           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
-            display -webkit-box
-            -webkit-box-orient vertical
-            font-weight 700
-            margin 4px 0
-            font-size 95%
-            line-height 1.3
-            -webkit-line-clamp 2
-            overflow hidden
-            text-overflow ellipsis
-
-          .article-recent_post_categories
-            font-size 12px
-            font-weight 700
-            opacity .6
-            line-height 1
-
-
-favicon = hexo-config('aside.flip.favicon')
-face = hexo-config('aside.flip.face')
-faceback = hexo-config('aside.flip.backface')
-backcolor = convert(hexo-config('aside.flip.backcolor'))
-
-#aside-content
-  .card-widget.card-platform
-    background backcolor
-    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
-
-    &:hover
-      #flip-content
-        transform rotateY(180deg)
-
-    #flip-wrapper
-      perspective 1000
-      position relative
-      width 235px
-      height 110px
-      z-index 1
-
-    #flip-wrapper #flip-content
-      width 100%
-      height 100%
-      transform-style preserve-3d
-      transition cubic-bezier(0, 0, 0, 1.29) 0.3s
+          text-overflow ellipsis
 
-    #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%
-
-  .card-widget.card-adsense
-    padding 0
+        .categories
+          font-size 12px
+          font-weight 700
+          opacity .6
+          line-height 1
 
 if hexo-config('comment.newest_comment.enable')
   .card-recent-comment
@@ -751,6 +398,15 @@ if hexo-config('comment.newest_comment.enable')
       &:hover
         color var(--efu-lighttext)
         transition .3s
+      .thumbnail
+        border-radius 8px
+        border var(--style-border)
+        display flex
+        align-items center
+        overflow hidden
+        width 2.1em
+        height 2.1em
+        margin-top 4px
 
     .aside-list-item
       padding: .5rem
@@ -769,14 +425,25 @@ if hexo-config('comment.newest_comment.enable')
         height: 60px
         margin-right: 8px
         border-radius: 12px
+        img
+          width 140%
+          height 140%
+          transition all .6s ease
+          object-fit cover
 
       .content
         max-width: calc(100% - 68px)
         line-height 1.5
+        flex 1
+        padding-left 10px
+        word-break break-all
+        display flex
+        flex-direction column
 
         .comment
           overflow hidden
           text-overflow ellipsis
+        .title
           display -webkit-box
           font-size 14px
           -webkit-line-clamp 2
@@ -787,32 +454,16 @@ if hexo-config('comment.newest_comment.enable')
           &:hover
             color var(--efu-lighttext)
             transition .3s
+          font-weight 700
+          margin 4px 0
+          font-size 95%
+          line-height 1.3
+          -webkit-line-clamp 2
+          overflow hidden
+          text-overflow ellipsis
 
         .datetime
+        .categories
           font-size 12px
           color var(--efu-secondtext)
-          margin-top auto
-
-.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
-
-.webinfo
-  .webinfo-item-title
-    display flex
-
-    i
-      line-height: 2
-      margin-right: 6px
-      width: 16px
-      text-align: center
-      font-size: 16px
+          margin-top auto