hexo-theme-redefine-x 2.8.5

package/source/css/layout/article-content.styl

@@ -0,0 +1,257 @@
+@require '../common/variables'
+
+$arrow-icon-width = 16px
+$post-nav-max-width = 220px
+$article-title-font-size = 3.2rem
+$temp-toc-width = hexo-config('global.sidebar_width')
+$toc-container-width = $temp-toc-width ? convert($temp-toc-width) : 210px
+$without-toc-container-width = calc(100% - $temp-toc-width)
+$gap = 30px
+
+.post-page-container
+  gap 0px
+
+  +redefine-mobile()
+    overflow-x hidden
+
+
+  &.show-toc
+    gap 30px
+
+    .toc-content-container
+      display block
+      opacity 1
+      transition opacity 0.2s ease-in 0.2s
+      width $toc-container-width
+
+      &:hover::-webkit-scrollbar-thumb
+        border 3px solid rgba(183, 183, 183, 0.3)
+
+      &::-webkit-scrollbar
+        width 6px
+        height 6px
+        transition all 0.2s ease
+        display block
+
+      &::-webkit-scrollbar-track
+        background transparent
+        border none
+
+      &::-webkit-scrollbar-thumb
+        border-radius 20px
+        border 3px solid rgba(183, 183, 183, 0)
+        transition all 0.2s ease
+
+    .article-content-container
+      width calc(100% - 210px) !important
+
+  +redefine-tablet()
+    .toc-content-container
+      display none !important
+
+    .article-content-container
+      width 100% !important
+
+    &.show-toc
+      .toc-content-container
+        display none
+
+      .article-content-container
+        width 100% !important
+
+  .article-content-container
+    width 100%
+    transition width 0.2s ease
+    redefine-container(
+      false,
+      0,
+      0,
+      0,
+      30px
+    )
+
+    +redefine-mobile()
+      padding 1.2rem 0.2rem
+      box-shadow none !important
+      max-width 100vw
+
+    .article-header .avatar img
+          border-radius: $redefine-border-radius-medium * 0.87
+          width 100%
+          height 100%
+          // background var(--avatar-background-color)
+
+    .article-header, .article-header-meta-info
+      margin-top 16px
+
+      +redefine-tablet()
+        transform scale(0.9)
+        transform-origin left top
+
+    .article-content
+      margin-top $spacing-unit
+      padding-bottom 10px
+      word-wrap break-word
+      border-bottom 1px solid var(--border-color)
+      color var(--default-text-color)
+
+      &>:first-child
+        margin-top 0 !important
+
+    .article-prev, .article-next
+
+        a
+          position relative
+          display block
+          width 100%
+          height 100%
+          box-sizing border-box
+
+          &.prev
+            padding-left $arrow-icon-width
+
+          &.next
+            padding-right $arrow-icon-width
+
+          .arrow-icon
+            position absolute
+            top 0
+            height 100%
+            width $arrow-icon-width
+
+            &.left
+              left 0
+
+            &.right
+              right 0
+
+          .title
+            width 100%
+            height 100%
+
+      .post-nav-item
+        display none
+
+        +redefine-tablet()
+          display inline-block
+
+      .post-nav-title-item
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+
+        +redefine-tablet()
+          display none
+
+    .recommended-article
+      overflow visible !important
+
+      .recommended-mobile
+        display none
+        +redefine-tablet()
+          display block
+
+      .recommended-desktop
+        display block
+        +redefine-tablet()
+          display none
+
+      .recommended-article-group
+        padding 10px 0
+        display flex
+        justify-content space-between
+        flex-wrap wrap
+        overflow visible !important
+
+        @media screen and (max-width $device-tablet)
+          height 190px
+          overflow scroll
+
+          &::-webkit-scrollbar
+            width 0 !important
+
+          -ms-overflow-style none
+
+        .recommended-article-item
+          redefine-container(
+            false,
+            0,
+            0,
+            10px,
+            0
+          )
+          box-shadow var(--redefine-box-shadow-flat)
+          padding 12px !important
+          display flex
+          flex-wrap wrap
+          align-content center
+          justify-content center
+          align-items center
+          overflow hidden
+          width 32%
+          max-height 200px
+          margin-top: $gap * 0.5
+          margin-right 0
+
+          +redefine-tablet()
+            width 49%
+
+          img
+            display flex
+            width calc(100% + 24px)
+            height 150px
+            object-fit cover
+            border-radius $redefine-border-radius-medium-top
+            margin -12px -12px 0 -12px !important
+
+          span
+            margin-top 0.5rem
+            display block
+            display -webkit-box
+            -webkit-box-orient vertical
+            -webkit-line-clamp 1
+            overflow hidden
+
+  .toc-content-container
+    white-space nowrap
+    opacity 0
+    position sticky
+    top: $navbar-height + $spacing-unit
+    // border-radius $redefine-border-radius-large
+    border-radius $redefine-border-radius-none
+    // display none
+    // visibility hidden
+    // width $toc-container-width
+    width 0
+    height auto
+    max-height calc(100vh - 210px)
+    //margin-left 30px
+    // z-index $z-index-6
+    overflow-y auto
+    overflow-x hidden
+    float right
+    padding 10px
+    box-sizing border-box
+    box-shadow none !important
+    transition opacity 0.3s ease-out 0.3s
+    hover-style(
+      false,
+      0,
+      0
+    )
+    transition-t('display', '0', '0.3', 'ease-out')
+
+    +redefine-tablet()
+      left 0 !important
+      display none !important
+
+  figure.image-caption
+    img
+      margin-bottom 0
+
+    figcaption
+      margin-top 5px
+      margin-bottom 10px
+      text-align center
+      font-size 0.9rem
+      color var(--third-text-color)

package/source/css/layout/bookmarks.styl

@@ -0,0 +1,8 @@
+.bookmark-nav-item {
+  &.active {
+    background-color: var(--second-background-color);
+    color: var(--primary-color);
+    border-color: var(--second-background-color);
+    transform: scale(1.02);
+  }
+} 

package/source/css/layout/category-content.styl

@@ -0,0 +1,21 @@
+@require '../common/variables'
+
+$category-name-font-size = 2.8rem
+
+.category-name
+  color var(--second-text-color)
+  font-size $category-name-font-size
+
+  i
+    color var(--second-text-color)
+
+  font-weight 600
+  padding-bottom 20px
+  margin-bottom $spacing-unit
+  border-bottom 1px solid var(--shadow-color-1)
+
+  +redefine-tablet()
+    font-size: $category-name-font-size * 0.9
+
+  +redefine-mobile()
+    font-size: $category-name-font-size * 0.8

package/source/css/layout/category-list.styl

@@ -0,0 +1,119 @@
+
+.category-header
+  margin 6px 0 36px 0
+  font-size 3.2rem
+  padding 0
+  line-height 1
+  font-weight bold
+  color var(--second-text-color)
+
+.category-list-content
+  .all-category-list
+    display flex
+    padding-left 16px
+    flex-wrap wrap
+    justify-content center
+    gap 28px
+
+    &>.all-category-list-item // first level
+      font-size 1.5rem
+      font-weight 600
+      padding 28px
+      cursor pointer
+      width 40%
+
+      background-color var(--second-background-color)
+      border-radius $redefine-border-radius-medium
+      box-shadow var(--redefine-box-shadow-flat)
+      overflow hidden
+      transition all 0.2s ease
+
+      +redefine-tablet()
+        width 80%
+
+      +redefine-mobile()
+        width 80%
+
+      &:hover
+        background-color var(--background-color)
+        box-shadow var(--redefine-box-shadow)
+        transform scale(1.01)
+        transition all 0.2s ease
+        color var(--primary-color)
+
+      span.all-category-list-count
+        color var(--third-text-color)
+        margin-left 8px
+        background-color var(--third-background-color)
+        padding 1px 10px
+        border-radius $redefine-border-radius-small
+        border solid 1px var(--border-color)
+
+      &>.all-category-list-link
+        border-bottom 2px solid var(--border-color)
+
+      &>.all-category-list-child // second level
+        font-weight 550
+        font-size 1.3rem
+        margin-left 20px
+        border-left 2px solid var(--border-color)
+        padding-left 16px
+        max-height 0
+        overflow hidden
+        transition all 0.2s ease
+
+        li
+          &::before
+            content ''
+
+          margin-bottom 10px
+
+          &:last-child
+            margin-bottom 0
+
+        &>li>.all-category-list-child // third level
+          font-weight 400
+          font-size 1.2rem
+          margin-left 20px
+          margin-top 15px
+          border-left 2px solid var(--border-color)
+          padding-left 16px
+          max-height 0
+          overflow hidden
+          transition all 0.2s ease
+
+          li
+            &::before
+              content ''
+
+            margin-bottom 10px
+
+            &:last-child
+              margin-bottom 0
+
+          &>li>.all-category-list-child // fourth level
+            margin-left 10px
+            margin-top 15px
+            border-left 2px solid var(--border-color)
+            padding-left 20px
+            max-height 0
+            overflow hidden
+            transition all 0.2s ease
+
+            li
+              &::before
+                content ''
+
+              margin-bottom 10px
+
+              &:last-child
+                margin-bottom 0
+
+            &>li>.all-category-list-child // fifth level
+              margin-left 10px
+              margin-top 15px
+              border-left 2px solid var(--border-color)
+              padding-left 20px
+              max-height 0
+              overflow hidden
+              transition all 0.2s ease

package/source/css/layout/home-content.styl

@@ -0,0 +1,114 @@
+@require '../common/variables'
+
+.home-content-container
+  if (hexo-config('home.sidebar.enable') && hexo-config('home.sidebar.position') == 'right')
+    margin-left $spacing-unit
+
+    +redefine-tablet()
+      margin-left 0
+
+    +redefine-mobile()
+      margin-left 0
+
+  if (hexo-config('home.sidebar.enable') && hexo-config('home.sidebar.position') == 'left')
+    margin-right $spacing-unit
+
+    +redefine-tablet()
+      margin-right 0
+
+    +redefine-mobile()
+      margin-right 0
+
+  .seo-reader-text
+    border 0
+    clip rect(1px, 1px, 1px, 1px)
+    -webkit-clip-path inset(50%)
+    clip-path inset(50%)
+    height 1px
+    margin -1px
+    overflow hidden
+    padding 0
+    position absolute !important
+    width 1px
+    word-wrap normal !important
+    word-break normal
+
+  .home-article-list
+    .home-article-item
+      position relative
+      redefine-container(
+        true,
+        1.015,
+        1.015,
+        0px,
+        38px
+      )
+
+      .home-article-thumbnail img
+          width 100%
+          height 100%
+          object-fit cover
+          position absolute
+          top 50%
+          transform translateY(-50%)
+
+      .home-article-title
+        position relative
+        font-weight 600
+        font-size 1.4rem
+        line-height 1.5
+        color var(--second-text-color)
+        font-family $english-font-family, $chinese-font-family, 'Noto Sans SC', sans-serif
+
+        margin 0
+
+        +redefine-tablet()
+          font-size 1.3rem
+
+        +redefine-mobile()
+          font-size 1.2rem
+
+      .home-article-content
+        word-wrap break-word
+        text-align justify
+        color var(--default-text-color)
+
+      .home-article-meta-info-container
+        display flex
+        justify-content space-between
+        align-items center
+        font-size 0.92rem
+        color var(--third-text-color)
+
+        .home-article-meta-info
+          letter-spacing 0.5px
+
+          span
+            margin-right 10px
+
+            &:last-child
+              margin-right 0
+
+            ul, li
+              display inline
+
+          .home-article-category
+            +redefine-mobile()
+              display none
+
+          .home-article-tag
+            +redefine-tablet()
+              display none
+
+        hr
+          border none
+          flex 1
+          height 1px
+          background var(--border-color)
+          margin 0 10px
+
+        a
+          color var(--third-text-color)
+
+          &:hover
+            color var(--primary-color)

package/source/css/layout/home-sidebar.styl

@@ -0,0 +1,126 @@
+@require '../common/variables'
+
+.home-sidebar-container
+  width 240px
+  height auto
+  // background-color #bbb
+  margin 0 $spacing-unit
+
+  +redefine-tablet()
+    margin 0 ($spacing-unit * 0.5)
+
+  +redefine-mobile()
+    display none
+
+  .sticky-container
+    top $navbar-height
+
+  .sidebar-content
+    redefine-container(
+      false,
+      1.02,
+      1.02,
+      20px,
+      0
+    )
+
+    &[marginTop]
+      margin-top: $spacing-unit * 0.6
+
+    .avatar img
+        width 80px
+        height 80px
+        border-radius $redefine-border-radius-large
+        box-shadow var(--redefine-box-shadow-flat)
+        border 1px solid var(--border-color)
+        padding 1px
+
+        &:hover
+          box-shadow var(--redefine-box-shadow)
+
+    .author
+
+      .name
+        text-align center
+        font-size 1.2rem
+        font-weight 600
+        color var(--second-text-color)
+
+      .label
+        text-align center
+        font-size 0.8rem
+        color var(--third-text-color)
+
+  .sidebar-links
+    overflow hidden
+    redefine-container(
+      false,
+      1.02,
+      1.02,
+      15px,
+      0
+    )
+
+    &[marginTop]
+      margin-top: $spacing-unit * 0.6
+
+    .site-info
+      background-color var(--second-background-color)
+      margin -15px -15px 10px -15px
+      border-radius $redefine-border-radius-large-top
+      padding 15px
+      border-bottom 1px solid var(--border-color)
+
+      .site-name
+        font-size 1.2rem
+        font-weight 500
+        color var(--second-text-color)
+        font-family 'Chillax-Variable', sans-serif
+        text-align center
+        if hexo-config('global.fonts.title.enable') {
+          font-family hexo-config('global.fonts.title.family')
+        }
+
+      .announcement
+        font-size 0.9rem
+        color var(--third-text-color)
+        text-align center
+        margin-top 10px
+        margin-bottom 5px
+
+    .links
+      padding 5px 0
+      display flex
+      justify-content center
+      align-items center
+      color var(--second-text-color)
+      text-align left
+      border-radius $redefine-border-radius-small
+      cursor pointer
+      font-family $default-font-family
+
+      .link-name
+        font-weight 500
+
+      .icon-space
+        margin-right 5px
+
+      &:hover
+        color var(--primary-color)
+        background-color var(--second-background-color)
+
+      .icon
+        font-size 1.2rem
+
+      .label
+        font-size 0.8rem
+
+    .announcement-outside
+      display flex
+      justify-content center
+      align-items center
+      margin-top 10px
+      margin-bottom 5px
+      padding 5px 0
+      color var(--second-text-color)
+      text-align center