hexo-theme-solitude 3.0.21 → 4.0.0

package/source/css/_page/_about/reward.styl

@@ -1,116 +1,234 @@
 #about-page
-  .author-content-item
-    &.single.reward
-      overflow unset
-      .author-content-item
-        .author-content-item-title
-          color var(--efu-red)
-
-      .reward-list-updateDate
-        color var(--efu-gray)
+  .author-content-item.single.reward
+    position relative
+    overflow hidden
+    padding 20px 40px
+    border var(--style-border-always)
+    border-radius 12px
+    background var(--efu-card-bg)
+    box-shadow var(--efu-shadow-border)
+
+    > *:not(.about-pointer-glow)
+      position relative
+      z-index 2
+
+    .author-content-item-tips
+      color var(--efu-secondtext)
+      font-size 14px
+      line-height 1.5
+
+    .author-content-item-title
+      display inline-block
+      margin-top 8px
+      color var(--efu-fontcolor)
+      font-size 36px
+      font-weight 700
+      line-height 1.4
+
+    .author-content-item-description
+      max-width calc(100% - 160px)
+      margin-top 8px
+      color var(--efu-fontcolor)
+      font-size 16px
+      line-height 1.8
+
+    .post-reward
+      position absolute
+      z-index 4
+      top 40px
+      right 40px
+
+      .reward-button
+        display flex
+        align-items center
+        gap 8px
+        width fit-content
+        height 48px
+        padding 8px 16px
+        border-radius 24px
+        background var(--efu-red)
+        box-shadow none
+        color var(--efu-white)
+        cursor pointer
+        font-size 16px
+        line-height 32px
+        transition filter .3s ease, transform .3s ease, box-shadow .3s ease
+
+        i
+          margin 0
+          color inherit
+          font-size 18px
+
+        &:hover,
+        &:focus-visible
+          filter brightness(1.08)
+          transform translateY(-2px)
+          box-shadow var(--efu-shadow-red)
+          outline none
+
+      .reward-main
+        top 60px
+        right 0
+        bottom auto
+        left auto
+        width fit-content
+
+        .reward-all::before
+          top -16px
+          bottom auto
+
+    .reward-list-all
+      display grid
+      grid-template-columns repeat(6, minmax(0, 1fr))
+      gap 8px
+      margin 24px 0 0
+
+    .reward-list-item
+      display flex
+      flex-direction column
+      justify-content space-between
+      min-width 0
+      height 96px
+      padding 20px
+      overflow hidden
+      border var(--style-border-always)
+      border-radius 12px
+      background var(--efu-card-bg)
+      box-shadow var(--efu-shadow-border)
+      color var(--efu-fontcolor)
+      transition border-color .3s ease, box-shadow .3s ease, transform .3s ease, background-color .3s ease
+
+      &:hover,
+      &:focus-visible
+        border-color var(--efu-red)
+        box-shadow var(--efu-shadow-red)
+        transform translateY(-2px)
+        outline none
+
+    .reward-list-item-name
+      overflow hidden
+      margin-bottom 8px
+      font-size 18px
+      font-weight 700
+      line-height 1.2
+      text-overflow ellipsis
+      white-space nowrap
+
+    .reward-list-bottom-group
+      display flex
+      align-items center
+      justify-content space-between
+      gap 8px
+      min-width 0
+
+    .reward-list-item-money
+      display flex
+      flex 0 0 auto
+      align-items center
+      justify-content center
+      min-height 24px
+      padding 4px 6px
+      border-radius 4px
+      color var(--efu-white)
+      font-size 12px
+      line-height 1
+      white-space nowrap
+
+      &.reward-list-item-money-low
+        background #303033
+
+      &.reward-list-item-money-medium
+        background #f0aa00
+
+      &.reward-list-item-money-high
+        background var(--efu-red)
+
+      .solitude
+        margin-right 3px
+        color inherit
+        font-size 13px
+
+    .reward-list-item-time
+      min-width 0
+      overflow hidden
+      color var(--efu-secondtext)
+      font-size 12px
+      line-height 1
+      text-overflow ellipsis
+      white-space nowrap
+
+    .reward-list-item-more
+      justify-content space-between
+      border-color transparent
+      background var(--efu-red)
+      box-shadow var(--efu-shadow-red)
+      color var(--efu-white)
+      font-size 18px
+      font-weight 700
+      line-height 1
+
+      i
+        display flex
+        align-items center
+        justify-content center
+        width 32px
+        height 32px
+        border-radius 50%
+        background var(--efu-white)
+        color var(--efu-red)
         font-size 14px
+        transition transform .3s ease
 
-      .author-content-item-description
-        font-size 16px
-        margin-top .5rem
+      &:hover,
+      &:focus-visible
+        border-color transparent
+        filter brightness(1.06)
+        color var(--efu-white)
 
-      .reward-list-all
-        display flex
-        flex-wrap wrap
-        flex-direction row
-        margin 1rem -.125rem .5rem
-
-        .post-reward
-          position absolute
-          right 1rem
-          top 1rem
-
-          .reward-main
-            top 60px
-            right 0
-            left auto
-            bottom auto
-            width fit-content
-
-            .reward-all::before
-              bottom auto
-              top -16px
-
-          .reward-button
-            padding 8px 12px
-            background var(--efu-red)
-            border-radius 12px
-            z-index 1
-            box-shadow initial
-            width fit-content
-            height fit-content
-            line-height 2
-
-            +maxWidth768()
-              display none
-
-          &:hover
-            .reward-button
-              filter brightness(1.1)
-
-        .reward-list-item
-          padding 1rem
-          border-radius 12px
-          border var(--style-border-always)
-          width calc((100% / 6) - .25rem)
-          margin 0 .125rem .5rem .125rem
-          box-shadow var(--efu-shadow-border)
-          display flex
-          flex-direction column
-          justify-content space-between
-
-          +maxWidth1200()
-            width calc((100% / 4) - .25rem)
-
-          +maxWidth900()
-            width calc((100% / 2) - .25rem)
-
-          +maxWidth768()
-            width calc((100% / 2) - .25rem)
-
-          .reward-list-item-name
-            font-size 1rem
-            font-weight 700
-            line-height 1
-            margin-bottom .25rem
-            white-space nowrap
-            overflow hidden
-            text-overflow ellipsis
-
-          .reward-list-bottom-group
-            display flex
-            align-items center
-            justify-content space-between
-
-          .reward-list-item-money
-            padding 4px
-            background var(--efu-fontcolor)
-            color var(--efu-card-bg)
-            font-size 12px
-            line-height 1
-            display flex
-            align-items center
-            justify-content center
-            border-radius 4px
-            margin-right 2px
-            white-space nowrap
-
-            .solitude
-              font-size 14px
-              margin-right 2px
-              color var(--efu-card-bg)
-
-          .reward-list-item-time
-            font-size 12px
-            color var(--efu-secondtext)
-            white-space nowrap
+        i
+          transform translateX(3px)
 
     .reward-list-tips
+      margin-top 24px
+
       p
+        margin 0
+        color var(--efu-secondtext)
         font-size 12px
-        color var (--efu-secondtext)
+
+  +maxWidth1200()
+    .author-content-item.single.reward
+      .reward-list-all
+        grid-template-columns repeat(4, minmax(0, 1fr))
+
+  +maxWidth900()
+    .author-content-item.single.reward
+      .reward-list-all
+        grid-template-columns repeat(2, minmax(0, 1fr))
+
+  +maxWidth768()
+    .author-content-item.single.reward
+      padding 20px
+
+      .author-content-item-title
+        font-size 30px
+
+      .author-content-item-description
+        max-width none
+        font-size 15px
+
+      .post-reward
+        display none
+
+      .reward-list-all
+        margin-top 20px
+
+      .reward-list-item
+        height 92px
+        padding 16px
+
+      .reward-list-item-name
+        font-size 16px
+
+      .reward-list-tips
+        margin-top 20px

package/source/css/_page/_about/skills.styl

@@ -15,7 +15,7 @@
       margin-top 40px
       display flex
       flex-wrap nowrap
-      animation rowleft-quarter 30s linear infinite
+      animation rowleft 60s linear infinite
 
     .skills-style-group
       position relative
@@ -31,6 +31,8 @@
       flex-wrap wrap
       flex-direction row
       margin-top 10px
+      max-height 310px
+      overflow hidden
 
     &:hover
       .skills-style-group
@@ -47,7 +49,7 @@
       margin-top 10px
       background var(--efu-background)
       border-radius 40px
-      padding 4px 12px 4px 8px
+      padding 8px 12px 8px 8px
       border var(--style-border)
       box-shadow var(--efu-shadow-border)
 
@@ -71,4 +73,4 @@
 
     .skill-name
       font-weight 700
-      line-height 1
+      line-height 1

package/source/css/_page/_home/category-bar.styl

@@ -1,102 +1,176 @@
 #category-bar
-  padding .4rem .7rem
-  background var(--efu-card-bg)
-  border-radius 12px
+  position relative
   display flex
-  white-space nowrap
-  overflow hidden
-  border var(--style-border)
-  transition 0.3s
-  height 50px
-  width 100%
+  align-items center
   justify-content space-between
+  width 100%
+  min-height 0
+  margin 0
+  padding 0
+  overflow hidden
+  white-space nowrap
+  background transparent
+  border 0
+  border-radius 0
   user-select none
+  transition .3s
+
+.category-bar-items
+  position relative
+  display flex
   align-items center
-  margin-bottom .5rem
+  gap 10px
+  height auto
+  overflow-x auto
+  overflow-y hidden
+  white-space nowrap
+  scrollbar-width none
+
+  &::-webkit-scrollbar
+    display none
+
+.category-bar-item
+  a
+    position relative
+    display inline-flex
+    align-items center
+    justify-content center
+    gap 4px
+    min-height 38px
+    padding 8px 18px
+    overflow hidden
+    color var(--efu-fontcolor)
+    font-size 14px
+    font-weight 700
+    line-height 1
+    background var(--efu-card-bg)
+    border var(--style-border-always)
+    border-radius 999px
+    transition .3s
 
-  +minWidth1300()
     &:hover
-      border var(--style-border-hover)
+      color var(--efu-white)
+      background var(--efu-main)
+
+  &.select
+    a
+      color var(--efu-card-bg)
+      background var(--efu-main)
+      border-color var(--efu-main)
       box-shadow var(--efu-shadow-main)
 
-  +minWidth1200()
-    animation: slide-in .6s .3s backwards;
+.category-bar-link-icon
+  display inline-flex
+  align-items center
+  justify-content center
+  width 14px
+  height 14px
 
-  +maxWidth768()
-    margin-bottom .5rem
-    margin-top .5rem
-    border-radius 0
-    background var(--efu-background)
-    padding 0 1rem
-    border none
+  i
+    font-size 13px
 
-  .category-bar-right
-    display flex
-    align-items center
+.category-bar-more-group
+  position relative
+  z-index 2
+  display flex
+  align-items center
+  flex-shrink 0
+  gap 6px
+
+.category-bar-next
+  display inline-flex
+  align-items center
+  justify-content center
+  flex-shrink 0
+  width 38px
+  min-width 38px
+  height 38px
+  min-height 38px
+  padding 0
+  overflow hidden
+  color var(--efu-fontcolor)
+  background var(--efu-card-bg)
+  border var(--style-border-always)
+  border-radius 50%
+  cursor pointer
+  transition .3s
+
+  i
+    font-size 14px
+
+.category-bar-more
+  position relative
+  display inline-flex
+  align-items center
+  justify-content center
+  min-height 38px
+  padding 8px 18px
+  overflow hidden
+  color var(--efu-fontcolor)
+  font-size 14px
+  font-weight 700
+  line-height 1
+  background var(--efu-card-bg)
+  border var(--style-border-always)
+  border-radius 999px
+  transition .3s
+
+.category-bar-next:hover, .category-bar-more:hover
+  color var(--efu-white)
+  background var(--efu-main)
+
+[data-theme='dark']
+  .home-category-bar .category-bar-item:not(.select) a::after,
+  .home-category-bar .category-bar-more::after,
+  .home-category-bar .category-bar-next::after
+    content ''
+    position absolute
+    top 0
+    left 0
+    right 0
+    height 50%
+    border-radius inherit
+    background linear-gradient(to bottom, var(--current-banner-theme, var(--efu-theme)) 0, transparent 100%)
+    opacity .3
+    pointer-events none
+
+@media (max-width: 768px)
+  .home-category-bar
+    position static
+    width 100%
+    margin 0 !important
+    padding 0
+    background var(--efu-background)
 
-    +maxWidth768()
-      display none
-
-    .category-bar-next
-      margin-left 8px
-      cursor pointer
-      height 30px
-      width 30px
-      display flex
-      border-radius 8px
-      align-items center
-      justify-content center
-      transition .3s
-
-    .category-bar-more
-      margin-left 4px
-      font-weight 700
-      border-radius 8px
-      padding 0 8px
-
-    div:hover, a:hover
-      background var(--efu-secondbg-bg)
-      color var(--efu-lighttext)
+  #category-bar
+    height auto
+    margin 0
+    padding 0
+    background transparent
+    border 0
 
   .category-bar-items
-    white-space nowrap
-    overflow-x scroll
-    overflow-y hidden
-    display flex
-    border-radius 8px
-    align-items center
-    height 30px
-    scrollbar-width: none
-    +maxWidth768()
-      height 44px
-      gap 6px
-
-    &::-webkit-scrollbar
-      display: none
-
-    .category-bar-item
-      a:hover
-        background var(--efu-main)
-        color var(--efu-white)
-
-      a
-        padding .1rem .5rem
-        margin-right 6px
-        font-weight 700
-        border-radius 8px
-        display flex
-        align-items center
-        height 30px
-
-        +maxWidth768()
-          border-radius 50px
-          background var(--efu-card-bg)
-          border var(--style-border-always)
-          padding 21px 16px
-
-      &.select
-        order -1
-
-        a
-          background var(--efu-theme)
-          color var(--efu-white)
+    width 100%
+    gap 6px
+    padding 0 16px
+    flex-wrap nowrap
+
+  .category-bar-item
+    a
+      flex-shrink 0
+      min-height 38px
+      padding 8px 18px
+      color var(--efu-fontcolor)
+      font-size 14px
+      background var(--efu-card-bg)
+      border-radius 50px
+      box-shadow none
+
+    &.select a
+      color var(--efu-white)
+      background var(--efu-main)
+      border-color var(--efu-main)
+      box-shadow none
+
+  .category-bar-next, .category-bar-more
+    display none