$bourbon-nav-background-color: #5b5e63 nav.bourbon +clearfix background-color: $bourbon-nav-background-color padding: 0 2em 0 1em +media(max-width em(510)) padding: 0 ul text-align: center +media(em(901)) float: left text-align: left li display: inline-block a background-position: 1em center background-repeat: no-repeat color: #fff display: inline-block font-weight: bold padding: 1em 1em 1em 3em +media(max-width em(515)) padding: 0.75em 0.5em text-align: center +media(max-width em(900)) display: block &:focus, &:hover background-color: darken($bourbon-nav-background-color, 10) color: #fff &.current background-color: darken($bourbon-nav-background-color, 5) $sites: bourbon, neat, bitters, breezeblocks @each $site in $sites &.#{$site} background-image: url("/images/bourbon-nav/#{$site}.png") +hidpi background-image: url("/images/bourbon-nav/#{$site}@2x.png") background-size: 20% +media(max-width em(515)) background-image: none h1 color: rgba(#fff, 0.6) float: right font-size: 1em +media(max-width em(900)) display: none a padding: 1em 0 &:hover background-color: transparent