hexo-theme-solitude 1.2.6 → 1.3.1

package/source/css/_page/_home/recent-post.styl

@@ -0,0 +1,204 @@
+#recent-posts
+  position relative
+  +minWidth1300()
+    display flex
+    flex-wrap wrap
+    justify-content space-between
+    align-items flex-start
+    align-content flex-start
+    -webkit-user-select none
+    transition width .3s
+
+  +maxWidth768()
+    padding 0 1rem
+
+  > .recent-post-item
+    box-shadow var(--sco-shadow-light2black)
+    display flex
+    align-items center
+    animation slide-in .6s .4s backwards
+    transition all .3s ease 0s
+    overflow hidden
+    height fit-content
+    background var(--sco-card-bg)
+    border-radius 12px
+    cursor pointer
+    border var(--style-border)
+    margin 1rem 0 1rem
+
+    +minWidth1300()
+      flex-direction column
+      width calc(100% / 2 - .5rem)
+      margin-top .25rem
+      margin-bottom .75rem
+      box-shadow var(--sco-shadow-border)
+
+    +maxWidth768()
+      margin 1.5rem 0
+      border-radius 12px
+      margin-top 0.5rem
+      border var(--style-border-always)
+      box-shadow var(--sco-shadow-border)
+      display block
+      position relative
+      clip-path inset(0 0 0 0 round 12px)
+
+    &:hover
+      box-shadow var(--sco-shadow-main)
+      border var(--style-border-hover)
+
+      .post_cover img.post_bg
+        transform scale(1.03)
+        transition .3s ease-in-out
+        filter brightness(.85)
+
+      .recent-post-info-top .article-title
+        color var(--sco-theme)
+
+    .post_cover
+      transition 1s
+      width 100%
+      overflow: hidden
+      height: 100%
+
+      +minWidth1300()
+        height 225px
+
+      +maxWidth1300()
+        width 75%
+        display flex
+        height 220px
+
+      +maxWidth768()
+        width 100%
+        height 170px
+        border-radius 5px 8px 0 0
+
+      a
+        min-width 100%
+        min-height 100%
+
+      img.post_bg
+        width 100%
+        height 100%
+        object-fit cover
+
+        +maxWidth1300()
+          min-width 100%
+          -webkit-backface-visibility hidden
+          -webkit-transform-style preserve-3d
+          min-height 100%
+          user-select none
+
+        +maxWidth768()
+          border-radius: 12px 12px 0 0
+
+    > .recent-post-info
+      height 174px
+      width 100%
+      cursor pointer
+      position relative
+      padding 0
+      display inline-block
+      overflow hidden
+
+      .recent-post-info-top
+        position relative
+        transition .3s
+        padding 0 32px
+        width 100%
+
+        .article-title
+          line-height 30px
+          margin-top 0
+          font-weight 700
+          margin-bottom 0
+          width 100%
+          transition .3s
+          font-size 1rem
+          -webkit-line-clamp 2
+          display -webkit-box
+          overflow hidden
+          -webkit-box-orient vertical
+
+        .recent-post-info-top-tips
+          display flex
+          margin-top 20px
+          user-select none
+
+          > .sticky-warp
+            display flex
+            position relative
+            margin-right 8px
+            justify-content center
+            align-items center
+            font-size 0.5rem
+
+            i
+              font-size .5rem
+              margin-right 3px
+
+          .original
+            display flex
+            color var(--sco-secondtext)
+            font-size .5rem
+            position relative
+            margin-right 8px
+
+          .unvisited-post
+            display flex
+            color var(--sco-secondtext)
+            font-size .5rem
+            position relative
+
+            &:visited
+              color var(--sco-card-bg)
+
+      > .article-meta-wrap
+        position absolute
+        bottom 16px
+        transition .3s
+        display flex
+        flex-direction row
+        flex-wrap nowrap
+        justify-content space-between
+        width 100%
+        left 0
+        padding 0 32px
+        white-space nowrap
+        color var(--sco-fontcolor)
+        font-size .7rem
+
+        > .article-meta
+          margin 0 8px 0 0
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
+          display flex
+
+          > .article-meta__tags
+            margin-right 8px
+            padding 0 .2rem 0 0
+            color var(--sco-fontcolor)
+
+        > .post-meta-date
+          right 0
+          text-align right
+
+          i
+            display none
+
+        .article-meta__separator
+          display none
+
+        a:hover
+          background-color var(--sco-none)
+          color var(--sco-lighttext)
+          cursor pointer
+          border-radius 4px
+
+        i
+          margin 0 .4rem 0 0
+
+        .sticky
+          color var(--sco-fontcolor)

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

@@ -0,0 +1 @@
+@import "./tenyear.styl"

package/source/css/_page/about/tenyear.styl

@@ -0,0 +1,56 @@
+.percentage-label
+  position absolute
+  left 0
+  font-size 14px
+  color var(--sco-card-bg)
+  font-weight bold
+  top 10px
+  white-space nowrap
+  transition left 0.5s linear
+  visibility hidden
+
+.time-labels
+  display flex
+  justify-content space-between
+  width 100%
+
+  > div
+    font-size 14px
+    color var(--sco-fontcolor)
+
+.tenyear-timeline
+  width 100%
+  background-color var(--sco-background)
+  position relative
+  overflow hidden
+  margin-bottom 20px
+  border-radius 0.5rem
+  height 2.5rem
+
+.progress
+  width 0
+  height 100%
+  background-color var(--sco-main)
+  position absolute
+  animation-delay -0.1s
+  border-radius 0.5rem
+  animation renamedProgressAnimation 2s linear forwards
+
+.past-time
+  animation renamedPastTimeAnimation 3s linear forwards
+  width 2px
+  height 20px
+  position absolute
+  transform-origin left
+
+@keyframes renamedProgressAnimation
+  0%
+    width 0
+  100%
+    width var(--progress-percentage, 0)
+
+@keyframes renamedPastTimeAnimation
+  0%
+    transform scaleX(0)
+  100%
+    transform scaleX(var(--past-time-percentage, 0))