#page-header
  position: relative
  width: 100%
  background-color: $light-blue
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
  transition: all .5s

  // index
  &.full_page
    min-height: $index_top_img_height
    background-attachment: fixed

    #site-info
      position: absolute
      top: $index_site_info_top
      padding: 0 .5rem
      width: 100%

  #site-title,
  #site-subtitle,
  #scroll-down .scroll-down-effects
    text-align: center
    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
    line-height: 1.5

  #site-title
    margin: 0
    color: var(--white)
    font-size: 1.85em

    +minWidth768()
      font-size: 2.85em

  #site-subtitle
    color: var(--light-grey)
    font-size: 1.15em

    +minWidth768()
      font-size: 1.72em

  #site_social_icons
    display: none
    margin: 0 auto
    width: 15rem
    text-align: center

    +maxWidth768()
      display: block

    .social-icon
      margin: 0 .5rem
      color: var(--light-grey)
      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
      font-size: 1.43em
      cursor: pointer

  #scroll-down
    position: absolute
    bottom: 0
    width: 100%
    cursor: pointer

    .scroll-down-effects
      position: relative
      width: 100%
      color: var(--light-grey)
      font-size: 30px

  // page
  &.not-home-page
    min-height: 20rem

    +maxWidth768()
      height: 14rem

  #page-site-info
    position: absolute
    top: 10rem
    padding: 0 .5rem
    width: 100%

    +maxWidth768()
      top: 7rem

  // post
  &.post-bg
    min-height: 20rem

    +maxWidth768()
      height: 18rem

    &:before
      position: absolute
      top: 0
      left: 0
      display: block
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .5)
      content: ''

  #post-info
    position: absolute
    bottom: 5rem
    padding: 0 8%
    width: 100%
    text-align: center

    +maxWidth900()
      bottom: 1.5rem
      text-align: left

    +maxWidth768()
      bottom: 1.1rem
      padding: 0 1.1rem

  &.not-top-img
    margin-bottom: .5rem
    min-height: 60px
    background: 0

    #nav
      background: rgba(255, 255, 255, .8)
      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)

      a
        color: var(--font-color)
        text-shadow: none

  &.nav-fixed
    #nav
      position: fixed
      top: -60px
      z-index: 91
      background: rgba(255, 255, 255, .8)
      box-shadow: 0 5px 6px -5px alpha($grey, .6)
      transition: transform .2s ease-in-out, opacity .2s ease-in-out

      a,
      #site-name,
      #toggle-menu
        color: var(--font-color)
        text-shadow: none

        &:hover
          color: $light-blue

  &.nav-visible
    #nav
      transition: all .5s
      transform: translate3d(0, 100%, 0)

    & + .layout
      & > .aside-content > .sticky_layout
        top: 70px
        transition: top .5s

// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
  background-attachment: scroll !important

#page
  h1.page-title
    margin: .4rem 0 1rem

// for not top_img
#post
  & > #post-info
    margin-bottom: 1.5rem

    .post-title
      padding-bottom: .2rem
      border-bottom: 1px solid var(--light-grey)
      color: var(--text-highlight-color)

      .post-edit-link
        float: right

    #post-meta,
    #post-meta a
      color: #78818a

#post-info
  .post-title
    @extend .limit-more-line
    margin-bottom: .4rem
    color: var(--white)
    font-weight: normal
    font-size: 2.5em
    line-height: 1.5
    -webkit-line-clamp: 3

    +maxWidth768()
      font-size: 1.72em

    .post-edit-link
      padding-left: .5rem

  #post-meta
    color: var(--light-grey)
    font-size: 95%

    +minWidth768()
      > .meta-secondline
        > span:first-child
          display: none

    +maxWidth768()
      font-size: 90%

      > .meta-firstline,
      > .meta-secondline
        display: inline

    .post-meta
      &-separator
        margin: 0 .25rem

      &-icon
        margin-right: .2rem

      &-label
        if hexo-config('post_meta.post.label')
          margin-right: .2rem
        else
          display: none

    a
      color: var(--light-grey)
      transition: all .3s ease-out

      &:hover
        color: $text-hover
        text-decoration: underline

    if hexo-config('post_meta.post.date_format') == 'relative'
      time
        display: none

#nav
  position: absolute
  top: 0
  z-index: 90
  display: flex
  flex-wrap: wrap
  align-items: center
  padding: 0 36px
  width: 100%
  height: 60px
  font-size: 1.3em
  opacity: 0
  transition: all .5s

  +maxWidth768()
    padding: 0 16px

  &.show
    opacity: 1

  #blog_name
    flex: 1

  #toggle-menu
    display: none
    padding: .1rem 0 0 .3rem
    vertical-align: top

    &:hover
      color: var(--white)

  a
    color: var(--light-grey)

    &:hover
      color: var(--white)

  #site-name
    text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
    font-weight: bold
    cursor: pointer

  .menus_items
    display: inline

    .menus_item
      position: relative
      display: inline-block
      padding: 0 0 0 .7rem

      &:hover
        .menus_item_child
          display: block

        i.expand
          transform: rotate(180deg) !important

      i.expand
        padding: 4px
        transition: transform .3s

      .menus_item_child
        position: absolute
        right: 0
        display: none
        margin-top: 8px
        padding: 0
        width: max-content
        background-color: var(--sidebar-bg)
        box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
        animation: sub_menus .3s .1s ease both

        &:before
          position: absolute
          top: -8px
          left: 0
          width: 100%
          height: 20px
          content: ''

        li
          list-style: none

          &:hover
            background: var(--text-bg-hover)

          a
            display: inline-block
            padding: .3rem .7rem
            width: 100%
            color: var(--font-color) !important
            text-shadow: none !important

  &.hide-menu
    #toggle-menu
      display: inline-block !important

      .site-page
        font-size: inherit

    .menus_items
      position: absolute
      left: 0
      visibility: hidden
      opacity: 0

    #search-button span
      display: none !important

  #search-button
    display: inline
    padding: 0 0 0 .7rem

  .site-page
    position: relative
    padding-bottom: .3rem
    text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
    font-size: .78em
    cursor: pointer

    &:not(.child)
      &:after
        position: absolute
        bottom: 0
        left: 0
        z-index: -1
        width: 0
        height: 3px
        background-color: lighten($theme-color, 30%)
        content: ''
        transition: all .3s ease-in-out

      &:hover
        &:after
          width: 100%