Created
December 5, 2014 10:50
-
-
Save addyosmani/eef48dc08a78faa33d5f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav role='navigation' class="main-nav" id="main-nav"> | |
<ul id="main-nav-list"> | |
<li> | |
<a href="#"> | |
THE WORKSHOP | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
2013 SCHEDULE | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
ABOUT CSSWIZARDRY | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
CONTACT | |
</a> | |
</li> | |
</ul> | |
</nav> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
* { | |
box-sizing: border-box; | |
} | |
.main-nav { | |
border: 1px solid gray; | |
max-width: 580px; | |
/* IE10 Consumer Preview */ | |
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Mozilla Firefox */ | |
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Opera */ | |
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Webkit (Safari/Chrome 10) */ | |
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BFBFBF)); | |
/* Webkit (Chrome 11+) */ | |
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* W3C Markup, IE10 Release Preview */ | |
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BFBFBF 100%); | |
border-radius: 5px; | |
ul { | |
margin: 0; | |
padding: 0; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
font-family: Roboto, Helvetica; | |
list-style: none; | |
border-radius: 8px; | |
} | |
li { | |
border-right: 1px solid #ccc; | |
text-transform: uppercase; | |
font-size: 7px; | |
} | |
li:last-child{ | |
border-right: none; | |
} | |
a { | |
padding: 1.15rem 1.3rem; | |
font-size: 12px; | |
max-width: 140px; | |
font-weight: bold; | |
text-decoration: none; | |
display: flex; | |
align-items: flex-start; | |
color: #333; | |
&:hover, &:focus { | |
background: #ccc; | |
color: black; | |
svg { | |
fill: green; | |
} | |
span { | |
color: black; | |
} | |
} | |
} | |
span { | |
display: block; | |
font-weight: normal; | |
color: #888; | |
margin: 0.25rem 0 0 0; | |
} | |
&.outlines { | |
* { | |
outline: 1px solid rgba(red, 0.5); | |
} | |
} | |
} | |
@media (min-width: 1000px) { | |
.main-nav { | |
a { | |
max-width: 500px; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
.main-nav { | |
border: 1px solid gray; | |
max-width: 580px; | |
/* IE10 Consumer Preview */ | |
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Mozilla Firefox */ | |
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Opera */ | |
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* Webkit (Safari/Chrome 10) */ | |
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BFBFBF)); | |
/* Webkit (Chrome 11+) */ | |
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%); | |
/* W3C Markup, IE10 Release Preview */ | |
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BFBFBF 100%); | |
border-radius: 5px; | |
} | |
.main-nav ul { | |
margin: 0; | |
padding: 0; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
font-family: Roboto, Helvetica; | |
list-style: none; | |
border-radius: 8px; | |
} | |
.main-nav li { | |
border-right: 1px solid #ccc; | |
text-transform: uppercase; | |
font-size: 7px; | |
} | |
.main-nav li:last-child { | |
border-right: none; | |
} | |
.main-nav a { | |
padding: 1.15rem 1.3rem; | |
font-size: 12px; | |
max-width: 140px; | |
font-weight: bold; | |
text-decoration: none; | |
display: flex; | |
align-items: flex-start; | |
color: #333; | |
} | |
.main-nav a:hover, .main-nav a:focus { | |
background: #ccc; | |
color: black; | |
} | |
.main-nav a:hover svg, .main-nav a:focus svg { | |
fill: green; | |
} | |
.main-nav a:hover span, .main-nav a:focus span { | |
color: black; | |
} | |
.main-nav span { | |
display: block; | |
font-weight: normal; | |
color: #888; | |
margin: 0.25rem 0 0 0; | |
} | |
.main-nav.outlines * { | |
outline: 1px solid rgba(255, 0, 0, 0.5); | |
} | |
@media (min-width: 1000px) { | |
.main-nav a { | |
max-width: 500px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav role='navigation' class="main-nav" id="main-nav"> | |
<ul id="main-nav-list"> | |
<li> | |
<a href="#"> | |
THE WORKSHOP | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
2013 SCHEDULE | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
ABOUT CSSWIZARDRY | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
CONTACT | |
</a> | |
</li> | |
</ul> | |
</nav> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment