hexo-theme-keep/source/css/layout/_partial/header.styl

$logo-title-font-size = 2rem
$pc-search-icon-font-size = 1.5rem
$menu-bar-line-height = 2.5px
$logo-image-box-width = 46px

.header-wrapper {
  display flex
  align-items center
  justify-content center
  box-sizing border-box
  width 100%
  height 100%
  padding-top $scroll-progress-bar-height
  background var(--background-color-1)

  hover-style(false, 0, 0)

  .header-content {
    position relative
    z-index $z-index-5
    display flex
    flex-direction row
    align-items center
    justify-content space-between
    width $main-content-width
    max-width $content-max-width
    height 100%
    transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")


    &.has-first-screen {
      max-width $has-fs-content-max-width
    }

    .has-toc & {
      max-width $has-toc-content-max-width
    }

    +keep-tablet() {
      width $main-content-width-tablet
    }

    +keep-mobile() {
      width $main-content-width-mobile
    }

    .left {
      display flex
      align-items center
      transition-t("transform", "0", "0.2", "linear")

      .header-shrink & {
        transform scale(0.72)
        transform-origin left
      }


      if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) {
        .logo-image {
          width $logo-image-box-width
          height $logo-image-box-width
          margin-right 8px


          +keep-tablet() {
            width $logo-image-box-width * 0.9
            height $logo-image-box-width * 0.9
          }

          +keep-mobile() {
            width $logo-image-box-width * 0.8
            height $logo-image-box-width * 0.8
          }

          img {
            width 100%
            border-radius 6px
          }
        }
      }

      .logo-title {
        color var(--text-color-1)
        font-weight bold
        font-size $logo-title-font-size
        line-height 1
        letter-spacing 1px

        +keep-tablet() {
          font-size $logo-title-font-size * 0.9
        }

        +keep-mobile() {
          font-size $logo-title-font-size * 0.8
        }
      }
    }


    .right {

      .pc {

        .menu-list {
          display flex
          align-items center

          +keep-tablet() {
            display none
          }


          .menu-item {
            position relative
            float left
            margin-left 2rem
            color var(--text-color-3)
            font-size 1rem
            cursor pointer

            &:first-child {
              margin-left 0
            }


            a:hover
            .active {

              &::after {
                position absolute
                bottom -10px
                left 50%
                width 100%
                height 2px
                background var(--primary-color)
                transform translateX(-50%)
                content ''
                transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear")

                .header-shrink & {
                  bottom -($header-shrink-height / 2 - 12)
                }
              }
            }

            &.search {
              margin-left 26px
              font-size $pc-search-icon-font-size

              i {
                color var(--text-color-3)
              }
            }
          }
        }
      }


      .mobile {
        display flex
        align-items center
        justify-content space-between

        .icon-item {
          position relative
          display none
          width 20px
          height 20px
          margin-left 12px
          color var(--text-color-3)
          font-size 18px
          cursor pointer

          i {
            color var(--text-color-3)
          }

          &:first-child {
            margin-left 0
          }

          +keep-tablet() {
            display flex
            align-items center
            justify-content center
          }
        }

        .menu-bar {

          .menu-bar-middle {
            position relative
            width 18px
            height $menu-bar-line-height
            background var(--text-color-3)

            .header-drawer-show & {
              background transparent
            }


            &::before
            &::after {
              position absolute
              left 0
              width 100%
              height $menu-bar-line-height
              background var(--text-color-3)
              content ''
              transition-t("transform", "0", "0.38", "ease")
            }


            &::before {
              top -6px

              .header-drawer-show & {
                transform translateY(6px) rotate(45deg)
              }
            }


            &::after {
              bottom -6px

              .header-drawer-show & {
                transform translateY(-6px) rotate(-45deg)
              }
            }
          }
        }
      }
    }
  }


  .header-drawer {
    position absolute
    top 0
    left 0
    z-index $z-index-2
    width 100%
    padding $header-height 0 20px 0
    background var(--background-color-1)
    transform scaleY(0)
    transform-origin top
    transition-t("transform", "0", "0.38", "ease")

    .header-drawer-show & {
      transform scaleY(1)
    }

    .drawer-menu-list {
      display flex
      flex-direction column
      align-items center
      justify-content flex-start

      .drawer-menu-item {
        height 38px
        margin 6px 0
        font-size 1rem

        a {
          padding 6px 20px
          color var(--text-color-3)
          border-radius 20px

          &:hover {
            color var(--text-color-2)
            border 1px solid var(--text-color-3)
          }


          &.active {
            color var(--text-color-2)
            border 1px solid var(--text-color-3)
          }
        }
      }
    }
  }


  .window-mask {
    position absolute
    top 0
    z-index $z-index-1
    width 100%
    height 100vh
    background rgba(0, 0, 0, 0.4)
    visibility hidden
    opacity 0
    transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease")

    .header-drawer-show & {
      visibility visible
      opacity 1
    }
  }
}

.header-drawer-show {
  overflow hidden
}