Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save lewang/9883039 to your computer and use it in GitHub Desktop.
Save lewang/9883039 to your computer and use it in GitHub Desktop.
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----
@import "susy";
// body {}
// header {}
// nav {}
// article {}
// footer {}
// visuals
// -------
$pink: rgb(255, 0, 128);
html { background: white; }
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background:
linear-gradient(rgba($pink, .125), rgba($pink, .125)),
rgba($pink, .25);
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba($pink, .25) inset;
}
html {
background: white;
}
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background: linear-gradient(rgba(255, 0, 128, 0.125), rgba(255, 0, 128, 0.125)), rgba(255, 0, 128, 0.25);
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba(255, 0, 128, 0.25) inset;
}
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment