hexo-theme-reimu/source/css/_partial/header.styl

A Hakurei Reimu style Hexo theme

#header
  min-height: 400px
  height: banner-height
  position: relative

  img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 150%
    z-index: -2
    user-select: none
    display: block
    object-fit: cover
    transition: 0.3s
    -webkit-mask: linear-gradient(to top, transparent, #fff 50%)
    mask: linear-gradient(to top, transparent, #fff 50%)

    @media mg-large
      height: 120%

    @media mg-normal
      height: 100%

#header-outer
  height: 100%
  position: relative
  max-width: 100%

[data-theme="dark"]
  #header-nav:hover
    background: var(--color-header-background)

#header-nav
  position: fixed
  top: 0
  left: 0
  right: 0
  display: flex
  justify-content: center
  background: var(--color-header-background)
  box-shadow: var(--shadow-card)
  transition: background 1s, top .3s
  z-index: 200

  &:hover
    background: rgba(255, 255, 255, 0.95)

  &.header-nav-hidden
    top: -80px

#header-title
  font-family: font-basic
  font-weight: 700
  text-align: center
  position: absolute
  top: 50%
  margin: logo-size * -0.5 2.5% 0
  width: 95%

$logo-text
  text-decoration: none
  color: #fff

#logo
  @extend $logo-text
  font-size: logo-size
  font-weight: 700
  letter-spacing: 2px
  display: inline-block
  transform: translateY(-20%)
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, .7);

  @media mg-large
    font-size: 35px

  @media mq-tablet
    font-size: 30px

  @media mq-mobile
    font-size: 30px

#subtitle
  @extend $logo-text
  font-size: subtitle-size
  font-weight: 400
  letter-spacing: 1px
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7)

  @media mg-large
    font-size: 15px

  @media mq-tablet
    font-size: 14px

  @media mq-mobile
    font-size: 13px

#subtitle-wrap
  margin-top: subtitle-size

#main-nav
  display: flex
  align-items: center

$nav-link
  color: var(--red-0)
  opacity: 0.8
  text-decoration: none
  transition: 0.2s
  padding: 20px 15px

$nav-link-wrap
  @extend $nav-link
  padding: 0 15px
  display: flex
  transition: .3s

  &:hover
    opacity: 1

  @media mg-large
    padding: 0 10px

  @media mg-normal
    padding: 0 4px

.nav-icon
  @extend $nav-link
  text-align: center
  font-size: font-size
  width: font-size
  height: font-size
  will-change: transform
  &:hover
    opacity: 1
    transform: scale(1.1)

[data-theme="dark"]
  .main-nav-link, .nav-icon, .main-nav-link-wrap
    color: var(--red-2)

.main-nav-link-wrap
  @extend $nav-link-wrap
  @media mg-normal
    display: none

  &:hover .main-nav-icon:before
    transform: rotate(90deg) scale(1.1)

  &:hover .main-nav-icon
    transform: scale(1.1)

  &:hover .main-nav-icon.rotate
    transform: rotate(90deg) scale(1.1)

.main-nav-link
  @extend $nav-link
  letter-spacing: 1px
  font-weight: 700
  opacity: 0.7

.main-nav-icon
  @extend $nav-link
  cursor: var(--cursor-pointer) !important
  padding: 15px 5px
  display: flex
  align-items: center
  font-size: 24px
  font-weight: 400
  transition: transform 0.3s, color 0.3s
  will-change: transform

  &.rotate
    transform: rotate(90deg)

  &:before
    font-size: 24px
    font-weight: 400
    transform: rotate(90deg)
    transition: transform 0.3s, color 0.3s
    will-change: transform

#main-nav-toggle
  display: none

  @media mg-normal
    display: block

#sub-nav, #i18n-nav
  display: flex
  align-items: center

#nav-sun-btn:before, #nav-moon-btn:before, #nav-circle-half-stroke-btn:before
  font-weight: 700

#i18n-nav
  margin-left: 8px

.custom-dropdown {
  position: relative;
}

.select-selected {
  padding: 14px;
  color: var(--red-2);
  cursor: var(--cursor-pointer) !important;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 5px;
  background-color: var(--color-wrap);
  margin-top: 5px;
  display: none;
  z-index: 1;
  font-size: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.select-items li {
  list-style: none;
  padding: 10px;
  cursor: var(--cursor-pointer) !important;
  color: var(--red-2);
  transition: 1s;
}

.select-items li:hover {
  color: #fff;
  background: var(--red-1);
}

.select-items.show {
  display: block;
}

.select-items li.selected {
  background: var(--red-1);
  color: #fff;
}