//  HEADER  ///////////////////////////////////////////////////////////////////
//
//  Set the position, size, and behaviour of the site header, including the
//  site title and navigation menu.
//

@import 'base';

$header-height: 4rem  !default;

.site-header {
  width: 100%;
  text-align: center;
  color: $header-text;

  a {
    color: inherit;
  }

  h1 {
    background: $header-color;
    line-height: $header-height;
    font-weight: normal;
  }

  nav {
    background: $menu-color;
    width: 100%;
    line-height: 1/2 * $header-height;

    a {
      display: inline-block;
      padding: 0 2rem;
    }

    .current-menu-item {
      font-weight: bold;
    }
  }

  input,
  label { // Hamburger menu hide/show.
    display: none;
  }


  @include mobile {
    label { // Hamburger menu icon
      display: block;
      position: absolute;
      top: 0;
      padding-right: $gutter-fraction * 100%;
      width: 100%;
      height: $header-height;
      text-align: right;
      line-height: $header-height;
      font-size: 200%;
    }

    input:not(:checked) + nav {
      max-height: 0;
    }

    nav a {
      width: 50%;
      line-height: 2/3 * $header-height;
    }
  }
}

//  HEADER  ///////////////////////////////////////////////////////////////////
//
//  Set the position, size, and behaviour of the site header, including the
//  site title and navigation menu.
//

@import 'base';

$header-height: 4rem  !default;

.site-header {
  width: 100%;
  text-align: center;
  color: $header-text;

  a {
    color: inherit;
  }

  h1 {
    background: $header-color;
    line-height: $header-height;
    font-weight: normal;
  }

  nav {
    background: $menu-color;
    width: 100%;
    line-height: 1/2 * $header-height;

    a {
      display: inline-block;
      padding: 0 2rem;
    }

    .current-menu-item {
      font-weight: bold;
    }
  }

  input,
  label { // Hamburger menu hide/show.
    display: none;
  }


  @include mobile {
    h1 {
      text-align: left;
      padding: 0 $gutter-fraction * 100%;
    }

    label { // Hamburger menu icon
      display: block;
      position: absolute;
      top: 0;
      padding-right: $gutter-fraction * 100%;
      width: 100%;
      height: $header-height;
      text-align: right;
      line-height: $header-height;
      font-size: 200%;
    }

    input:not(:checked) + nav {
      max-height: 0;
    }

    nav a {
      width: 50%;
      line-height: 2/3 * $header-height;
    }
  }
}

Fix header alignment on mobile
Fix header alignment on mobile
