// (C) Copyright Collin Doering 2013
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

// File: _header.sass
// Author: Collin J. Doering <rekahsoft@gmail.com>
// Date: Dec 10, 2013
// Description: Styling for header (navigation and banner)

#logo-background
  @include background(linear-gradient(#cef, #cff), $fallback: #cef)
  padding: 0.75em 0

#logo
  background: url('/images/logo-banner.svg')
  background-repeat: no-repeat
  background-position: 50%
  background-size: contain
  height: 175px

@include keyframes(nav-slide)
  from
    background-position: 0 0
  to
    background-position: 304px 0

#nav
  border: 2px solid
  border-width: 2px 0 2px 0
  background: url('/images/diagonal-stripes.png')
  @include animation(nav-slide 5s linear infinite)
  @include animation-play-state(paused)

#nav.loading
  @include animation-play-state(running)

#nav.loading-error
  // do something

#nav-menu
  text-align: center
  margin-bottom: 0

  li
    display: inline-block
    margin: 0
    padding: 10px 3em

    .menuitem
      display: block
      color: #eee
      font-size: 1.5em
      font-weight: bold
      text-decoration: none
      text-shadow: 0.5px 1px black
      @include transition-property(transform)
      @include transition-duration(20ms)
    .menuitem:hover
      color: #ddd
      @include transform(scale(1.1, 1.1))
    .menuitem:active
      @include transform(scale(0.95, 0.95))

  li.active
    .menuitem
      color: #fff
      text-shadow: 2px 2px black
      @include transform(scale(1.2, 1.2))
    .menuitem:hover
      @include transition(none)
    .menuitem:active
      @include transition(none)
      @include transform(scale(1.1, 1.1))