//-----------------------------------------------------------------------------
// Site Nav

[role="navigation"] {
  @include trailer(1);
  background: $base2;
  background: rgba($base2,.5);
  font-style: italic;

  ul { @include inline-block-list; }

  a { 
    #{$link} {
      @extend .icon;
      display: block;
      padding: rhythm(.25) rhythm(.5); 
      color: $susy-bodycopy;
      &[href*='github'] { @include font-icon-image($icon-github-sign); }
      &[href*='twitter'] { @include font-icon-image($icon-twitter-sign); }
      &[href*='getting-started'] { 
        @include font-icon-image($icon-off); 
        .guides_getting-started &, .tutorial & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='reference'] { 
        @include font-icon-image($icon-list); 
        .guides_reference & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='sites-using-susy'] { 
        @include font-icon-image($icon-picture); 
        .sites-using-susy & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='demos'] { 
        @include font-icon-image($icon-cogs); 
        .demos & { color: $susy-bodycopy-dark-10; }
      }
    }
    #{$focus} {color: $susy-highlight-dark-20; }
  }

  @include at-breakpoint($break) {
    @include trailer(2);
  }
}

//-----------------------------------------------------------------------------
// Site Nav

[role="navigation"] {
  @include trailer(1);
  background: $base2;
  background: rgba($base2,.5);
  font-style: italic;

  ul { @include inline-block-list; }

  a {
    #{$link} {
      @extend %icon;
      display: block;
      padding: rhythm(.25) rhythm(.5);
      color: $susy-bodycopy;
      &[href*='github'] { @extend %icon-github; }
      &[href*='twitter'] { @extend %icon-twitter; }
      &[href*='stackoverflow'] { @extend %icon-comment; }
      &[href*='getting-started'] {
        @extend %icon-switch;
        .guides_getting-started &, .tutorial & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='reference'] {
        @extend %icon-list;
        .guides_reference & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='sites-using-susy'] {
        @extend %icon-pictures;
        .sites-using-susy & { color: $susy-bodycopy-dark-10; }
      }
      &[href*='demos'] {
        @extend %icon-cog;
        .demos & { color: $susy-bodycopy-dark-10; }
      }
    }
    #{$focus} {color: $susy-highlight-dark-20; }
  }

  @include at-breakpoint($break) {
    @include trailer(2);
  }
}

Add support link to stackoverflow
Add support link to stackoverflow
