Task #1

by chris5marsh

HTML

<nav class="main-nav">
    <ul>
        <li><a href="#">The Workshop</a></li>
        <li><a href="#">2013 Schedule</a></li>
        <li class="current"><a href="#">About CSSWizardry</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

SCSS

.main-nav {
    font-size:12px;
    font-family:Helvetica, Arial, sans-serif;
    ul {
        list-style:none;
        margin:0;
        padding:0;
        overflow:hidden;
        border:1px solid #999;
        border-radius:3px;
        background-color: #eee;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ccc));
        background-image: -webkit-linear-gradient(#eee, #ccc);
        background-image: -moz-linear-gradient(#eee, #ccc);
        background-image: -o-linear-gradient(#eee, #ccc);
        background-image: linear-gradient(#eee, #ccc);
        background-repeat: repeat-y;
        display:inline-block;
    }
    li {
        float:left;
        &:first-child a {
            border-left:0;
        }
        &:last-child a {
            border-right:0;
        }
    }
    a {
        font-weight:bold;
        display:block;
        line-height:3em;
        text-transform:uppercase;
        text-align:center;
        padding:0 20px;
        color:#333232;
        border-left:1px solid #fff;
        border-right:1px solid #999;
        text-shadow:1px 1px 1px #fff;
        text-decoration:none;
    }
    li.current {
        a {
          background-color: #eee;
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#aaa));
          background-image: -webkit-linear-gradient(#ccc, #aaa);
          background-image: -moz-linear-gradient(#ccc, #aaa);
          background-image: -o-linear-gradient(#ccc, #aaa);
          background-image: linear-gradient(#ccc, #aaa);
          background-repeat: repeat-y;
        }
    }
}