hexo-theme-redefine-x 2.8.5

package/source/css/layout/_partials/footer.styl

@@ -0,0 +1,59 @@
+@require '../../common/variables'
+
+.footer
+  .odometer.odometer-auto-theme, .odometer.odometer-theme-default
+    display inline-block
+    vertical-align baseline
+    position relative
+
+  .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit
+    display inline-block
+    vertical-align baseline
+    position relative
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer
+    display inline-block
+    vertical-align baseline
+    visibility hidden
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner
+    text-align left
+    display block
+    position absolute
+    top 0
+    left 0
+    right 0
+    bottom 0
+    overflow hidden
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon
+    display block
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner
+    display block
+    -webkit-backface-visibility hidden
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value
+    display block
+
+  .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value
+    position absolute
+
+  .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner
+    transition transform 999ms
+
+  .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner
+    transform translateY(-100%)
+
+  .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner
+    transform translateY(-100%)
+
+  .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner
+    transition transform 999ms
+    transform translateY(0)
+
+  .odometer.odometer-auto-theme, .odometer.odometer-theme-default
+    line-height 1.1em
+
+  .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value
+    text-align center

package/source/css/layout/_partials/home-banner.styl

@@ -0,0 +1,48 @@
+$temp-title-fs = hexo-config('home_banner.text_style.title_size')
+$title-font-size = $temp-title-fs ? convert($temp-title-fs) : 2.8rem
+$temp-subtitle-fs = hexo-config('home_banner.text_style.subtitle_size')
+$subtitle-font-size = $temp-subtitle-fs ? convert($temp-subtitle-fs) : 1.4rem
+$temp-line-height = hexo-config('style.first_screen.line_height')
+$line-height = $temp-line-height ? $temp-line-height : 1.2
+$home-banner-icon-size = 1.6rem
+
+@require '../../common/variables'
+
+.home-banner-background
+  //background var(--home-banner-img) center center / cover no-repeat
+  transition filter 0.3s ease
+
+.home-banner-container
+  font-family 'Chillax-Variable', sans-serif
+  position relative
+  box-sizing border-box
+  width 100%
+  min-height 100vh
+  overflow hidden
+  will-change transform
+
+  .content
+    position relative
+    box-sizing border-box
+    min-height 90vh
+
+    .description
+      font-size $title-font-size
+      line-height $line-height
+      color var(--home-banner-text-color)
+
+      p
+        margin 0
+        opacity 0.9
+        font-family 'Geist Variable', sans-serif
+        font-weight 350
+
+        i
+          font-size $subtitle-font-size
+          font-style normal
+
+        span
+          font-size: $subtitle-font-size * 1.05
+
+      +redefine-tablet()
+        font-size: $title-font-size * 0.9

package/source/css/layout/_partials/image-viewer.styl

@@ -0,0 +1,37 @@
+.image-viewer-container
+  position fixed
+  left 0
+  top 0
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content center
+  background rgba(0, 0, 0, 0)
+  visibility hidden
+  z-index $z-index-8
+  padding 6%
+  box-sizing border-box
+  backdrop-filter blur(0px)
+  -webkit-backdrop-filter blur(0px)
+  transition-t('visibility, background,backdrop-filter', '0, 0,0', '0.3, 0.3,0.3', 'ease, ease,ease')
+
+  &.active
+    background rgba(0, 0, 0, 0.3)
+    backdrop-filter blur(10px)
+    -webkit-backdrop-filter blur(10px)
+    visibility visible
+
+    img
+      cursor grab
+      transform scale(1)
+      opacity 1
+      padding 2px
+      background var(--background-color)
+
+  img
+    max-width 100%
+    max-height 100%
+    transform scale(0.5)
+    opacity 0
+    transition-t('transform, opacity', '0,0', '0.3,0.3', 'ease')

package/source/css/layout/_partials/local-search.styl

@@ -0,0 +1,137 @@
+$icon-size = 1.2rem
+
+@require '../../common/variables'
+
+.search-pop-overlay
+  position fixed
+  display flex
+  height 100%
+  width 100%
+  left 0
+  top 0
+  background rgba(0, 0, 0, 0)
+  visibility hidden
+  z-index $z-index-8
+  transition-t('visibility, background', '0, 0', '0.3, 0.3', 'ease, ease')
+
+  &.active
+    visibility visible
+    background rgba(0, 0, 0, 0.35)
+
+    .search-popup
+      transform scale(1)
+
+  .search-popup
+    background var(--background-color)
+    border-radius 5px
+    height 80%
+    width 70%
+    margin auto
+    transform scale(0)
+    z-index $z-index-6
+    transition-t('transform', '0', '0.3', 'ease')
+
+    +redefine-tablet()
+      width 80%
+
+    +redefine-mobile()
+      width 90%
+
+    .search-header
+      background var(--fourth-text-color)
+      border-top-left-radius 2px
+      border-top-right-radius 2px
+      display flex
+      padding 10px
+
+      .search-input-field-pre, .popup-btn-close
+        font-size $icon-size
+        padding 0 10px
+        display flex
+        align-items center
+
+      .search-input-field-pre
+        cursor pointer
+        color var(--third-text-color)
+
+      .popup-btn-close
+        color var(--default-text-color)
+
+      .search-input-container
+        flex-grow 1
+        padding 2px
+
+        .search-input
+          background transparent
+          border 0
+          outline 0
+          width 100%
+          font-size 1.2rem
+          color var(--default-text-color)
+
+          &::-webkit-search-cancel-button
+            display none
+
+      .popup-btn-close
+        cursor pointer
+
+        &:hover .fas, far, fab
+          color var(--first-text-color)
+
+    #search-result
+      display flex
+      height calc(100% - 55px)
+      overflow auto
+      padding 5px 25px
+
+      .search-result-list
+        width 100%
+        height 100%
+        font-size 1rem
+
+        li
+          border-bottom 1px dashed var(--border-color)
+          padding 10px 0
+          margin 10px 0
+          box-sizing border-box
+
+          &:last-child
+            border-bottom none
+
+          .search-result-title
+            position relative
+            font-weight bold
+            margin-bottom 10px
+            padding-left 16px
+            display flex
+            align-items center
+
+            &::after
+              content ''
+              position absolute
+              width 5px
+              height 5px
+              border-radius $redefine-border-radius-full
+              top 50%
+              transform translateY(-50%)
+              left 0
+              background var(--default-text-color)
+
+          .search-result
+            line-height 2rem
+            margin 0
+            padding-left 16px
+            word-wrap break-word
+
+          a
+            &:hover
+              color var(--default-text-color)
+
+          .search-keyword
+            border-bottom 1px dashed var(--primary-color)
+            color var(--primary-color)
+            font-weight bold
+
+      #no-result
+        color var(--third-text-color)
+        margin auto

package/source/css/layout/_partials/navbar.styl

@@ -0,0 +1,309 @@
+$logo-title-font-size = 1.7rem
+$desktop-search-icon-font-size = 1.5rem
+$navbar-bar-line-height = 2.5px
+$logo-image-box-width = 34px
+
+@require '../../common/variables'
+
+.navbar-container
+  font-family 'Chillax-Variable', sans-serif
+  width 100%
+  height 100%
+  box-sizing border-box
+  display flex
+  align-items center
+  justify-content center
+  background $nav-color-bg
+  -webkit-backdrop-filter blur(10px)
+  backdrop-filter blur(10px)
+  padding-top $scroll-progress-bar-height
+  hover-style(
+    false,
+    0,
+    0
+  )
+
+  .navbar-content
+    position relative
+    height 100%
+    width 100%
+    max-width $navbar-width-pages
+    display flex
+    flex-direction row
+    justify-content space-between
+    align-items center
+    z-index $z-index-5
+    transition max-width 0.3s ease
+
+    &.has-home-banner
+      max-width $navbar-width-home
+
+    .left
+      display flex
+      align-items center
+      //transform-origin bottom
+      //transition-t('transform', '0', '0.15', 'ease')
+      //
+      //.navbar-shrink &
+      //  transform scale(0.9)
+      //  transform-origin bottom
+
+      if (hexo-config('defaults.logo') && hexo-config('defaults.logo') != '')
+        //.logo-image
+          //width $logo-image-box-width
+          //height $logo-image-box-width
+          //margin-right 12px
+          //
+          //+redefine-tablet()
+          //  width: $logo-image-box-width * 0.9
+          //  height: $logo-image-box-width * 0.9
+          //
+          //+redefine-mobile()
+          //  width: $logo-image-box-width * 0.8
+          //  height: $logo-image-box-width * 0.8
+          //
+          //img
+          //  border-radius 6px
+          //  width 100%
+
+      .logo-title
+        font-size $logo-title-font-size
+        font-weight 520
+        //letter-spacing 1px
+        line-height 1
+        color var(--first-text-color)
+        transform translateY(1px)
+        if hexo-config('global.fonts.title.enable') {
+          font-family hexo-config('global.fonts.title.family')
+        }
+
+        h1
+          margin 0
+          font-size $logo-title-font-size
+          font-weight 520
+          //letter-spacing 1px
+          line-height 1
+          color var(--first-text-color)
+          transform translateY(1px)
+
+          +redefine-tablet()
+            font-size: $logo-title-font-size * 0.9
+
+          +redefine-mobile()
+            font-size: $logo-title-font-size * 0.8
+
+        +redefine-tablet()
+          font-size: $logo-title-font-size * 0.9
+
+        +redefine-mobile()
+          font-size: $logo-title-font-size * 0.8
+
+    .right
+      .desktop
+        .navbar-list
+          display flex
+          gap 24px
+          align-items center
+
+          +redefine-tablet()
+            display none
+
+          .navbar-item
+            float left
+            // padding 5px
+            position relative
+            font-size 1rem
+            font-weight 500
+            cursor pointer
+            color var(--default-text-color)
+
+            a
+              display block
+              padding 5px
+
+            a .fa-chevron-down
+              transform rotate(0deg)
+              transition transform 0.3s ease
+
+            a, .active
+              &::after
+                content ''
+                position absolute
+                bottom -5px
+                left 50%
+                width 100%
+                height 2px
+                transform translate3d(-50%, -5px, 0)
+                border-radius $redefine-border-radius-large
+                background var(--primary-color)
+                opacity 0
+                transition-t('transform, bottom, opacity', '0.2, 0.2, 0.2', '0.2, 0.2, 0.2', 'ease, ease, ease')
+
+                .navbar-shrink &
+                  bottom -($navbar-shrink-height / 2 - 17)
+
+            &:hover a .fa-chevron-down
+              transform rotate(180deg)
+
+            &:hover .has-dropdown
+              &::after
+                display none !important
+
+            &:hover a, .active
+              &::after
+                transform translate3d(-50%, 0, 0)
+                opacity 1
+                transition-t('transform, bottom, opacity', '0, 0, 0', '0.2, 0.2, 0.2', 'ease, ease, ease')
+
+                .navbar-shrink &
+                  bottom -($navbar-shrink-height / 2 - 17)
+
+            &.search
+              font-size $desktop-search-icon-font-size
+              margin-left 26px
+
+              i
+                color var(--default-text-color)
+
+            .sub-menu
+              position absolute
+              right auto
+              left 50%
+              -webkit-transform translate(-50%, 0)
+              -o-transform translate(-50%, 0)
+              transform translate(-50%, 0)
+              margin-top 0px
+              width auto
+              text-align center
+              list-style none
+              padding 0 10px
+              border-radius $redefine-border-radius-large
+              // visibility hidden
+              max-height 0px
+              overflow hidden
+              transition-t('all', '0', '0.2', 'linear')
+
+              li a
+                white-space nowrap
+                color var(--default-text-color)
+                font-size 1rem
+                padding 3px 15px
+                display block
+                text-align center
+                border-radius 8px
+                transition-t('all', '0', '0.2', 'linear')
+
+                &:hover
+                  color var(--primary-color)
+                  background-color var(--third-background-color)
+
+        .navbar-list .navbar-item:hover .sub-menu
+          // visibility visible
+          max-height 500px
+          transition-t('all', '0', '0.2', 'ease')
+          redefine-container(
+            false,
+            0,
+            0,
+            10px,
+            5px
+          )
+
+      .mobile
+        display flex
+        justify-content space-between
+        align-items center
+
+        .icon-item
+          display none
+          position relative
+          cursor pointer
+          font-size 18px
+          margin-left 12px
+          width 20px
+          height 20px
+          color var(--default-text-color)
+
+          i
+            color var(--default-text-color)
+
+          &:first-child
+            margin-left 0
+
+          +redefine-tablet()
+            display flex
+            justify-content center
+            align-items center
+
+        .navbar-bar
+          .navbar-bar-middle
+            width 18px
+            height $navbar-bar-line-height
+            position relative
+            background var(--default-text-color)
+
+            .navbar-drawer-show &
+              background transparent
+
+            &::before, &::after
+              content ''
+              position absolute
+              left 0
+              width 100%
+              height $navbar-bar-line-height
+              background var(--default-text-color)
+              transition-t('transform', '0', '0.38', 'ease')
+
+            &::before
+              top -6px
+
+              .navbar-drawer-show &
+                transform translateY(6px) rotate(45deg)
+
+            &::after
+              bottom -6px
+
+              .navbar-drawer-show &
+                transform translateY(-6px) rotate(-45deg)
+
+  .navbar-drawer
+    padding $navbar-height 0 20px 0
+    transform translateX(100%)
+    transform-origin top
+    z-index $z-index-2
+    height 100vh
+    overflow-y auto
+    transition-t('transform', '0', '0.38', 'ease')
+
+    .navbar-drawer-show &
+      transform translateX(0)
+
+  .window-mask
+    position absolute
+    top 0
+    width 100%
+    height 100vh
+    background rgba(0, 0, 0, 0.4)
+    z-index $z-index-1
+    visibility hidden
+    opacity 0
+    transition-t('transform, opacity', '0, 0', '0.38, 0.38', 'ease, ease')
+
+    .navbar-drawer-show &
+      visibility visible
+      opacity 1
+
+.navbar-drawer-show
+  overflow hidden
+
+.icon-rotated {
+  transform: rotate(90deg);
+}
+
+.transition-navbar
+  transition max-width 0.3s ease-out
+
+html.is-animating
+  .transition-navbar
+    max-width $navbar-width-pages !important
+    transition max-width 0.2s ease-out