Skip to content

Instantly share code, notes, and snippets.

@johno
Created September 15, 2016 19:23
Show Gist options
  • Save johno/9f5c6596a4d2fcf47cd8b8f27fad1100 to your computer and use it in GitHub Desktop.
Save johno/9f5c6596a4d2fcf47cd8b8f27fad1100 to your computer and use it in GitHub Desktop.
.pa0 { padding: 0rem; }
.ma0 { margin: 0rem; }
.pl0 { padding-left: 0rem; }
.ml0 { margin-left: 0rem; }
.pr0 { padding-right: 0rem; }
.mr0 { margin-right: 0rem; }
.pt0 { padding-top: 0rem; }
.mt0 { margin-top: 0rem; }
.pb0 { padding-bottom: 0rem; }
.mb0 { margin-bottom: 0rem; }
.pv0 { padding-top: 0rem;
padding-bottom: 0rem; }
.mv0 { margin-top: 0rem;
margin-bottom: 0rem; }
.ph0 { padding-left: 0rem;
padding-right: 0rem; }
.mh0 { margin-left: 0rem;
margin-right: 0rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa0-m { padding: 0rem; }
.ma0-m { margin: 0rem; }
.pl0-m { padding-left: 0rem; }
.ml0-m { margin-left: 0rem; }
.pr0-m { padding-right: 0rem; }
.mr0-m { margin-right: 0rem; }
.pt0-m { padding-top: 0rem; }
.mt0-m { margin-top: 0rem; }
.pb0-m { padding-bottom: 0rem; }
.mb0-m { margin-bottom: 0rem; }
.pv0-m { padding-top: 0rem;
padding-bottom: 0rem; }
.mv0-m { margin-top: 0rem;
margin-bottom: 0rem; }
.ph0-m { padding-left: 0rem;
padding-right: 0rem; }
.mh0-m { margin-left: 0rem;
margin-right: 0rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa0-l { padding: 0rem; }
.ma0-l { margin: 0rem; }
.pl0-l { padding-left: 0rem; }
.ml0-l { margin-left: 0rem; }
.pr0-l { padding-right: 0rem; }
.mr0-l { margin-right: 0rem; }
.pt0-l { padding-top: 0rem; }
.mt0-l { margin-top: 0rem; }
.pb0-l { padding-bottom: 0rem; }
.mb0-l { margin-bottom: 0rem; }
.pv0-l { padding-top: 0rem;
padding-bottom: 0rem; }
.mv0-l { margin-top: 0rem;
margin-bottom: 0rem; }
.ph0-l { padding-left: 0rem;
padding-right: 0rem; }
.mh0-l { margin-left: 0rem;
margin-right: 0rem; }
}
@media screen and (min-width: 128) {
.pa0-xl { padding: 0rem; }
.ma0-xl { margin: 0rem; }
.pl0-xl { padding-left: 0rem; }
.ml0-xl { margin-left: 0rem; }
.pr0-xl { padding-right: 0rem; }
.mr0-xl { margin-right: 0rem; }
.pt0-xl { padding-top: 0rem; }
.mt0-xl { margin-top: 0rem; }
.pb0-xl { padding-bottom: 0rem; }
.mb0-xl { margin-bottom: 0rem; }
.pv0-xl { padding-top: 0rem;
padding-bottom: 0rem; }
.mv0-xl { margin-top: 0rem;
margin-bottom: 0rem; }
.ph0-xl { padding-left: 0rem;
padding-right: 0rem; }
.mh0-xl { margin-left: 0rem;
margin-right: 0rem; }
}
.pa1 { padding: 2rem; }
.ma1 { margin: 2rem; }
.pl1 { padding-left: 2rem; }
.ml1 { margin-left: 2rem; }
.pr1 { padding-right: 2rem; }
.mr1 { margin-right: 2rem; }
.pt1 { padding-top: 2rem; }
.mt1 { margin-top: 2rem; }
.pb1 { padding-bottom: 2rem; }
.mb1 { margin-bottom: 2rem; }
.pv1 { padding-top: 2rem;
padding-bottom: 2rem; }
.mv1 { margin-top: 2rem;
margin-bottom: 2rem; }
.ph1 { padding-left: 2rem;
padding-right: 2rem; }
.mh1 { margin-left: 2rem;
margin-right: 2rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa1-m { padding: 2rem; }
.ma1-m { margin: 2rem; }
.pl1-m { padding-left: 2rem; }
.ml1-m { margin-left: 2rem; }
.pr1-m { padding-right: 2rem; }
.mr1-m { margin-right: 2rem; }
.pt1-m { padding-top: 2rem; }
.mt1-m { margin-top: 2rem; }
.pb1-m { padding-bottom: 2rem; }
.mb1-m { margin-bottom: 2rem; }
.pv1-m { padding-top: 2rem;
padding-bottom: 2rem; }
.mv1-m { margin-top: 2rem;
margin-bottom: 2rem; }
.ph1-m { padding-left: 2rem;
padding-right: 2rem; }
.mh1-m { margin-left: 2rem;
margin-right: 2rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa1-l { padding: 2rem; }
.ma1-l { margin: 2rem; }
.pl1-l { padding-left: 2rem; }
.ml1-l { margin-left: 2rem; }
.pr1-l { padding-right: 2rem; }
.mr1-l { margin-right: 2rem; }
.pt1-l { padding-top: 2rem; }
.mt1-l { margin-top: 2rem; }
.pb1-l { padding-bottom: 2rem; }
.mb1-l { margin-bottom: 2rem; }
.pv1-l { padding-top: 2rem;
padding-bottom: 2rem; }
.mv1-l { margin-top: 2rem;
margin-bottom: 2rem; }
.ph1-l { padding-left: 2rem;
padding-right: 2rem; }
.mh1-l { margin-left: 2rem;
margin-right: 2rem; }
}
@media screen and (min-width: 128) {
.pa1-xl { padding: 2rem; }
.ma1-xl { margin: 2rem; }
.pl1-xl { padding-left: 2rem; }
.ml1-xl { margin-left: 2rem; }
.pr1-xl { padding-right: 2rem; }
.mr1-xl { margin-right: 2rem; }
.pt1-xl { padding-top: 2rem; }
.mt1-xl { margin-top: 2rem; }
.pb1-xl { padding-bottom: 2rem; }
.mb1-xl { margin-bottom: 2rem; }
.pv1-xl { padding-top: 2rem;
padding-bottom: 2rem; }
.mv1-xl { margin-top: 2rem;
margin-bottom: 2rem; }
.ph1-xl { padding-left: 2rem;
padding-right: 2rem; }
.mh1-xl { margin-left: 2rem;
margin-right: 2rem; }
}
.pa2 { padding: 4rem; }
.ma2 { margin: 4rem; }
.pl2 { padding-left: 4rem; }
.ml2 { margin-left: 4rem; }
.pr2 { padding-right: 4rem; }
.mr2 { margin-right: 4rem; }
.pt2 { padding-top: 4rem; }
.mt2 { margin-top: 4rem; }
.pb2 { padding-bottom: 4rem; }
.mb2 { margin-bottom: 4rem; }
.pv2 { padding-top: 4rem;
padding-bottom: 4rem; }
.mv2 { margin-top: 4rem;
margin-bottom: 4rem; }
.ph2 { padding-left: 4rem;
padding-right: 4rem; }
.mh2 { margin-left: 4rem;
margin-right: 4rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa2-m { padding: 4rem; }
.ma2-m { margin: 4rem; }
.pl2-m { padding-left: 4rem; }
.ml2-m { margin-left: 4rem; }
.pr2-m { padding-right: 4rem; }
.mr2-m { margin-right: 4rem; }
.pt2-m { padding-top: 4rem; }
.mt2-m { margin-top: 4rem; }
.pb2-m { padding-bottom: 4rem; }
.mb2-m { margin-bottom: 4rem; }
.pv2-m { padding-top: 4rem;
padding-bottom: 4rem; }
.mv2-m { margin-top: 4rem;
margin-bottom: 4rem; }
.ph2-m { padding-left: 4rem;
padding-right: 4rem; }
.mh2-m { margin-left: 4rem;
margin-right: 4rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa2-l { padding: 4rem; }
.ma2-l { margin: 4rem; }
.pl2-l { padding-left: 4rem; }
.ml2-l { margin-left: 4rem; }
.pr2-l { padding-right: 4rem; }
.mr2-l { margin-right: 4rem; }
.pt2-l { padding-top: 4rem; }
.mt2-l { margin-top: 4rem; }
.pb2-l { padding-bottom: 4rem; }
.mb2-l { margin-bottom: 4rem; }
.pv2-l { padding-top: 4rem;
padding-bottom: 4rem; }
.mv2-l { margin-top: 4rem;
margin-bottom: 4rem; }
.ph2-l { padding-left: 4rem;
padding-right: 4rem; }
.mh2-l { margin-left: 4rem;
margin-right: 4rem; }
}
@media screen and (min-width: 128) {
.pa2-xl { padding: 4rem; }
.ma2-xl { margin: 4rem; }
.pl2-xl { padding-left: 4rem; }
.ml2-xl { margin-left: 4rem; }
.pr2-xl { padding-right: 4rem; }
.mr2-xl { margin-right: 4rem; }
.pt2-xl { padding-top: 4rem; }
.mt2-xl { margin-top: 4rem; }
.pb2-xl { padding-bottom: 4rem; }
.mb2-xl { margin-bottom: 4rem; }
.pv2-xl { padding-top: 4rem;
padding-bottom: 4rem; }
.mv2-xl { margin-top: 4rem;
margin-bottom: 4rem; }
.ph2-xl { padding-left: 4rem;
padding-right: 4rem; }
.mh2-xl { margin-left: 4rem;
margin-right: 4rem; }
}
.pa3 { padding: 6rem; }
.ma3 { margin: 6rem; }
.pl3 { padding-left: 6rem; }
.ml3 { margin-left: 6rem; }
.pr3 { padding-right: 6rem; }
.mr3 { margin-right: 6rem; }
.pt3 { padding-top: 6rem; }
.mt3 { margin-top: 6rem; }
.pb3 { padding-bottom: 6rem; }
.mb3 { margin-bottom: 6rem; }
.pv3 { padding-top: 6rem;
padding-bottom: 6rem; }
.mv3 { margin-top: 6rem;
margin-bottom: 6rem; }
.ph3 { padding-left: 6rem;
padding-right: 6rem; }
.mh3 { margin-left: 6rem;
margin-right: 6rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa3-m { padding: 6rem; }
.ma3-m { margin: 6rem; }
.pl3-m { padding-left: 6rem; }
.ml3-m { margin-left: 6rem; }
.pr3-m { padding-right: 6rem; }
.mr3-m { margin-right: 6rem; }
.pt3-m { padding-top: 6rem; }
.mt3-m { margin-top: 6rem; }
.pb3-m { padding-bottom: 6rem; }
.mb3-m { margin-bottom: 6rem; }
.pv3-m { padding-top: 6rem;
padding-bottom: 6rem; }
.mv3-m { margin-top: 6rem;
margin-bottom: 6rem; }
.ph3-m { padding-left: 6rem;
padding-right: 6rem; }
.mh3-m { margin-left: 6rem;
margin-right: 6rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa3-l { padding: 6rem; }
.ma3-l { margin: 6rem; }
.pl3-l { padding-left: 6rem; }
.ml3-l { margin-left: 6rem; }
.pr3-l { padding-right: 6rem; }
.mr3-l { margin-right: 6rem; }
.pt3-l { padding-top: 6rem; }
.mt3-l { margin-top: 6rem; }
.pb3-l { padding-bottom: 6rem; }
.mb3-l { margin-bottom: 6rem; }
.pv3-l { padding-top: 6rem;
padding-bottom: 6rem; }
.mv3-l { margin-top: 6rem;
margin-bottom: 6rem; }
.ph3-l { padding-left: 6rem;
padding-right: 6rem; }
.mh3-l { margin-left: 6rem;
margin-right: 6rem; }
}
@media screen and (min-width: 128) {
.pa3-xl { padding: 6rem; }
.ma3-xl { margin: 6rem; }
.pl3-xl { padding-left: 6rem; }
.ml3-xl { margin-left: 6rem; }
.pr3-xl { padding-right: 6rem; }
.mr3-xl { margin-right: 6rem; }
.pt3-xl { padding-top: 6rem; }
.mt3-xl { margin-top: 6rem; }
.pb3-xl { padding-bottom: 6rem; }
.mb3-xl { margin-bottom: 6rem; }
.pv3-xl { padding-top: 6rem;
padding-bottom: 6rem; }
.mv3-xl { margin-top: 6rem;
margin-bottom: 6rem; }
.ph3-xl { padding-left: 6rem;
padding-right: 6rem; }
.mh3-xl { margin-left: 6rem;
margin-right: 6rem; }
}
.pa4 { padding: 8rem; }
.ma4 { margin: 8rem; }
.pl4 { padding-left: 8rem; }
.ml4 { margin-left: 8rem; }
.pr4 { padding-right: 8rem; }
.mr4 { margin-right: 8rem; }
.pt4 { padding-top: 8rem; }
.mt4 { margin-top: 8rem; }
.pb4 { padding-bottom: 8rem; }
.mb4 { margin-bottom: 8rem; }
.pv4 { padding-top: 8rem;
padding-bottom: 8rem; }
.mv4 { margin-top: 8rem;
margin-bottom: 8rem; }
.ph4 { padding-left: 8rem;
padding-right: 8rem; }
.mh4 { margin-left: 8rem;
margin-right: 8rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa4-m { padding: 8rem; }
.ma4-m { margin: 8rem; }
.pl4-m { padding-left: 8rem; }
.ml4-m { margin-left: 8rem; }
.pr4-m { padding-right: 8rem; }
.mr4-m { margin-right: 8rem; }
.pt4-m { padding-top: 8rem; }
.mt4-m { margin-top: 8rem; }
.pb4-m { padding-bottom: 8rem; }
.mb4-m { margin-bottom: 8rem; }
.pv4-m { padding-top: 8rem;
padding-bottom: 8rem; }
.mv4-m { margin-top: 8rem;
margin-bottom: 8rem; }
.ph4-m { padding-left: 8rem;
padding-right: 8rem; }
.mh4-m { margin-left: 8rem;
margin-right: 8rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa4-l { padding: 8rem; }
.ma4-l { margin: 8rem; }
.pl4-l { padding-left: 8rem; }
.ml4-l { margin-left: 8rem; }
.pr4-l { padding-right: 8rem; }
.mr4-l { margin-right: 8rem; }
.pt4-l { padding-top: 8rem; }
.mt4-l { margin-top: 8rem; }
.pb4-l { padding-bottom: 8rem; }
.mb4-l { margin-bottom: 8rem; }
.pv4-l { padding-top: 8rem;
padding-bottom: 8rem; }
.mv4-l { margin-top: 8rem;
margin-bottom: 8rem; }
.ph4-l { padding-left: 8rem;
padding-right: 8rem; }
.mh4-l { margin-left: 8rem;
margin-right: 8rem; }
}
@media screen and (min-width: 128) {
.pa4-xl { padding: 8rem; }
.ma4-xl { margin: 8rem; }
.pl4-xl { padding-left: 8rem; }
.ml4-xl { margin-left: 8rem; }
.pr4-xl { padding-right: 8rem; }
.mr4-xl { margin-right: 8rem; }
.pt4-xl { padding-top: 8rem; }
.mt4-xl { margin-top: 8rem; }
.pb4-xl { padding-bottom: 8rem; }
.mb4-xl { margin-bottom: 8rem; }
.pv4-xl { padding-top: 8rem;
padding-bottom: 8rem; }
.mv4-xl { margin-top: 8rem;
margin-bottom: 8rem; }
.ph4-xl { padding-left: 8rem;
padding-right: 8rem; }
.mh4-xl { margin-left: 8rem;
margin-right: 8rem; }
}
.pa5 { padding: 10rem; }
.ma5 { margin: 10rem; }
.pl5 { padding-left: 10rem; }
.ml5 { margin-left: 10rem; }
.pr5 { padding-right: 10rem; }
.mr5 { margin-right: 10rem; }
.pt5 { padding-top: 10rem; }
.mt5 { margin-top: 10rem; }
.pb5 { padding-bottom: 10rem; }
.mb5 { margin-bottom: 10rem; }
.pv5 { padding-top: 10rem;
padding-bottom: 10rem; }
.mv5 { margin-top: 10rem;
margin-bottom: 10rem; }
.ph5 { padding-left: 10rem;
padding-right: 10rem; }
.mh5 { margin-left: 10rem;
margin-right: 10rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa5-m { padding: 10rem; }
.ma5-m { margin: 10rem; }
.pl5-m { padding-left: 10rem; }
.ml5-m { margin-left: 10rem; }
.pr5-m { padding-right: 10rem; }
.mr5-m { margin-right: 10rem; }
.pt5-m { padding-top: 10rem; }
.mt5-m { margin-top: 10rem; }
.pb5-m { padding-bottom: 10rem; }
.mb5-m { margin-bottom: 10rem; }
.pv5-m { padding-top: 10rem;
padding-bottom: 10rem; }
.mv5-m { margin-top: 10rem;
margin-bottom: 10rem; }
.ph5-m { padding-left: 10rem;
padding-right: 10rem; }
.mh5-m { margin-left: 10rem;
margin-right: 10rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa5-l { padding: 10rem; }
.ma5-l { margin: 10rem; }
.pl5-l { padding-left: 10rem; }
.ml5-l { margin-left: 10rem; }
.pr5-l { padding-right: 10rem; }
.mr5-l { margin-right: 10rem; }
.pt5-l { padding-top: 10rem; }
.mt5-l { margin-top: 10rem; }
.pb5-l { padding-bottom: 10rem; }
.mb5-l { margin-bottom: 10rem; }
.pv5-l { padding-top: 10rem;
padding-bottom: 10rem; }
.mv5-l { margin-top: 10rem;
margin-bottom: 10rem; }
.ph5-l { padding-left: 10rem;
padding-right: 10rem; }
.mh5-l { margin-left: 10rem;
margin-right: 10rem; }
}
@media screen and (min-width: 128) {
.pa5-xl { padding: 10rem; }
.ma5-xl { margin: 10rem; }
.pl5-xl { padding-left: 10rem; }
.ml5-xl { margin-left: 10rem; }
.pr5-xl { padding-right: 10rem; }
.mr5-xl { margin-right: 10rem; }
.pt5-xl { padding-top: 10rem; }
.mt5-xl { margin-top: 10rem; }
.pb5-xl { padding-bottom: 10rem; }
.mb5-xl { margin-bottom: 10rem; }
.pv5-xl { padding-top: 10rem;
padding-bottom: 10rem; }
.mv5-xl { margin-top: 10rem;
margin-bottom: 10rem; }
.ph5-xl { padding-left: 10rem;
padding-right: 10rem; }
.mh5-xl { margin-left: 10rem;
margin-right: 10rem; }
}
.pa6 { padding: 12rem; }
.ma6 { margin: 12rem; }
.pl6 { padding-left: 12rem; }
.ml6 { margin-left: 12rem; }
.pr6 { padding-right: 12rem; }
.mr6 { margin-right: 12rem; }
.pt6 { padding-top: 12rem; }
.mt6 { margin-top: 12rem; }
.pb6 { padding-bottom: 12rem; }
.mb6 { margin-bottom: 12rem; }
.pv6 { padding-top: 12rem;
padding-bottom: 12rem; }
.mv6 { margin-top: 12rem;
margin-bottom: 12rem; }
.ph6 { padding-left: 12rem;
padding-right: 12rem; }
.mh6 { margin-left: 12rem;
margin-right: 12rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.pa6-m { padding: 12rem; }
.ma6-m { margin: 12rem; }
.pl6-m { padding-left: 12rem; }
.ml6-m { margin-left: 12rem; }
.pr6-m { padding-right: 12rem; }
.mr6-m { margin-right: 12rem; }
.pt6-m { padding-top: 12rem; }
.mt6-m { margin-top: 12rem; }
.pb6-m { padding-bottom: 12rem; }
.mb6-m { margin-bottom: 12rem; }
.pv6-m { padding-top: 12rem;
padding-bottom: 12rem; }
.mv6-m { margin-top: 12rem;
margin-bottom: 12rem; }
.ph6-m { padding-left: 12rem;
padding-right: 12rem; }
.mh6-m { margin-left: 12rem;
margin-right: 12rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.pa6-l { padding: 12rem; }
.ma6-l { margin: 12rem; }
.pl6-l { padding-left: 12rem; }
.ml6-l { margin-left: 12rem; }
.pr6-l { padding-right: 12rem; }
.mr6-l { margin-right: 12rem; }
.pt6-l { padding-top: 12rem; }
.mt6-l { margin-top: 12rem; }
.pb6-l { padding-bottom: 12rem; }
.mb6-l { margin-bottom: 12rem; }
.pv6-l { padding-top: 12rem;
padding-bottom: 12rem; }
.mv6-l { margin-top: 12rem;
margin-bottom: 12rem; }
.ph6-l { padding-left: 12rem;
padding-right: 12rem; }
.mh6-l { margin-left: 12rem;
margin-right: 12rem; }
}
@media screen and (min-width: 128) {
.pa6-xl { padding: 12rem; }
.ma6-xl { margin: 12rem; }
.pl6-xl { padding-left: 12rem; }
.ml6-xl { margin-left: 12rem; }
.pr6-xl { padding-right: 12rem; }
.mr6-xl { margin-right: 12rem; }
.pt6-xl { padding-top: 12rem; }
.mt6-xl { margin-top: 12rem; }
.pb6-xl { padding-bottom: 12rem; }
.mb6-xl { margin-bottom: 12rem; }
.pv6-xl { padding-top: 12rem;
padding-bottom: 12rem; }
.mv6-xl { margin-top: 12rem;
margin-bottom: 12rem; }
.ph6-xl { padding-left: 12rem;
padding-right: 12rem; }
.mh6-xl { margin-left: 12rem;
margin-right: 12rem; }
}
.bg-black { background-color: #000 }
.bg-near-black { background-color: #111 }
.bg-dark-gray { background-color: #333 }
.bg-mid-gray { background-color: #555 }
.bg-gray { background-color: #777 }
.bg-silver { background-color: #999 }
.bg-light-silver { background-color: #aaa }
.bg-moon-gray { background-color: #ccc }
.bg-light-gray { background-color: #eee }
.bg-near-white { background-color: #f4f4f4 }
.bg-white { background-color: #fff }
.bg-dark-red { background-color: #f00008 }
.bg-red { background-color: #ff3223 }
.bg-orange { background-color: #f3a801 }
.bg-gold { background-color: #f2c800 }
.bg-yellow { background-color: #ffde37 }
.bg-purple { background-color: #7d5da9 }
.bg-light-purple { background-color: #8d4f92 }
.bg-hot-pink { background-color: #d62288 }
.bg-dark-pink { background-color: #c64774 }
.bg-pink { background-color: #f49cc8 }
.bg-dark-green { background-color: #006C71 }
.bg-green { background-color: #41D69F }
.bg-navy { background-color: #001b44 }
.bg-dark-blue { background-color: #00449e }
.bg-blue { background-color: #357edd }
.bg-light-blue { background-color: #96ccff }
.bg-lightest-blue { background-color: #cdecff }
.bg-washed-blue { background-color: #f6fffe }
.bg-washed-green { background-color: #e8fdf5 }
.bg-washed-yellow { background-color: #fff8d5 }
.bg-light-pink { background-color: #efa4b8 }
.bg-light-yellow { background-color: #f3dd70 }
.bg-light-red { background-color: #ffd3c0 }
.black { color: #000 }
.near-black { color: #111 }
.dark-gray { color: #333 }
.mid-gray { color: #555 }
.gray { color: #777 }
.silver { color: #999 }
.light-silver { color: #aaa }
.moon-gray { color: #ccc }
.light-gray { color: #eee }
.near-white { color: #f4f4f4 }
.white { color: #fff }
.dark-red { color: #f00008 }
.red { color: #ff3223 }
.orange { color: #f3a801 }
.gold { color: #f2c800 }
.yellow { color: #ffde37 }
.purple { color: #7d5da9 }
.light-purple { color: #8d4f92 }
.hot-pink { color: #d62288 }
.dark-pink { color: #c64774 }
.pink { color: #f49cc8 }
.dark-green { color: #006C71 }
.green { color: #41D69F }
.navy { color: #001b44 }
.dark-blue { color: #00449e }
.blue { color: #357edd }
.light-blue { color: #96ccff }
.lightest-blue { color: #cdecff }
.washed-blue { color: #f6fffe }
.washed-green { color: #e8fdf5 }
.washed-yellow { color: #fff8d5 }
.light-pink { color: #efa4b8 }
.light-yellow { color: #f3dd70 }
.light-red { color: #ffd3c0 }
.hover-black:focus, .hover-black:hover { color: #000 }
.hover-near-black:focus, .hover-near-black:hover { color: #111 }
.hover-dark-gray:focus, .hover-dark-gray:hover { color: #333 }
.hover-mid-gray:focus, .hover-mid-gray:hover { color: #555 }
.hover-gray:focus, .hover-gray:hover { color: #777 }
.hover-silver:focus, .hover-silver:hover { color: #999 }
.hover-light-silver:focus, .hover-light-silver:hover { color: #aaa }
.hover-moon-gray:focus, .hover-moon-gray:hover { color: #ccc }
.hover-light-gray:focus, .hover-light-gray:hover { color: #eee }
.hover-near-white:focus, .hover-near-white:hover { color: #f4f4f4 }
.hover-white:focus, .hover-white:hover { color: #fff }
.hover-dark-red:focus, .hover-dark-red:hover { color: #f00008 }
.hover-red:focus, .hover-red:hover { color: #ff3223 }
.hover-orange:focus, .hover-orange:hover { color: #f3a801 }
.hover-gold:focus, .hover-gold:hover { color: #f2c800 }
.hover-yellow:focus, .hover-yellow:hover { color: #ffde37 }
.hover-purple:focus, .hover-purple:hover { color: #7d5da9 }
.hover-light-purple:focus, .hover-light-purple:hover { color: #8d4f92 }
.hover-hot-pink:focus, .hover-hot-pink:hover { color: #d62288 }
.hover-dark-pink:focus, .hover-dark-pink:hover { color: #c64774 }
.hover-pink:focus, .hover-pink:hover { color: #f49cc8 }
.hover-dark-green:focus, .hover-dark-green:hover { color: #006C71 }
.hover-green:focus, .hover-green:hover { color: #41D69F }
.hover-navy:focus, .hover-navy:hover { color: #001b44 }
.hover-dark-blue:focus, .hover-dark-blue:hover { color: #00449e }
.hover-blue:focus, .hover-blue:hover { color: #357edd }
.hover-light-blue:focus, .hover-light-blue:hover { color: #96ccff }
.hover-lightest-blue:focus, .hover-lightest-blue:hover { color: #cdecff }
.hover-washed-blue:focus, .hover-washed-blue:hover { color: #f6fffe }
.hover-washed-green:focus, .hover-washed-green:hover { color: #e8fdf5 }
.hover-washed-yellow:focus, .hover-washed-yellow:hover { color: #fff8d5 }
.hover-light-pink:focus, .hover-light-pink:hover { color: #efa4b8 }
.hover-light-yellow:focus, .hover-light-yellow:hover { color: #f3dd70 }
.hover-light-red:focus, .hover-light-red:hover { color: #ffd3c0 }
.b--black { border-color: #000 }
.b--near-black { border-color: #111 }
.b--dark-gray { border-color: #333 }
.b--mid-gray { border-color: #555 }
.b--gray { border-color: #777 }
.b--silver { border-color: #999 }
.b--light-silver { border-color: #aaa }
.b--moon-gray { border-color: #ccc }
.b--light-gray { border-color: #eee }
.b--near-white { border-color: #f4f4f4 }
.b--white { border-color: #fff }
.b--dark-red { border-color: #f00008 }
.b--red { border-color: #ff3223 }
.b--orange { border-color: #f3a801 }
.b--gold { border-color: #f2c800 }
.b--yellow { border-color: #ffde37 }
.b--purple { border-color: #7d5da9 }
.b--light-purple { border-color: #8d4f92 }
.b--hot-pink { border-color: #d62288 }
.b--dark-pink { border-color: #c64774 }
.b--pink { border-color: #f49cc8 }
.b--dark-green { border-color: #006C71 }
.b--green { border-color: #41D69F }
.b--navy { border-color: #001b44 }
.b--dark-blue { border-color: #00449e }
.b--blue { border-color: #357edd }
.b--light-blue { border-color: #96ccff }
.b--lightest-blue { border-color: #cdecff }
.b--washed-blue { border-color: #f6fffe }
.b--washed-green { border-color: #e8fdf5 }
.b--washed-yellow { border-color: #fff8d5 }
.b--light-pink { border-color: #efa4b8 }
.b--light-yellow { border-color: #f3dd70 }
.b--light-red { border-color: #ffd3c0 }
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: 0.875rem; }
@media screen and (min-width: 48) and (max-width: 64) {
.f1-m { font-size: 3rem; }
.f2-m { font-size: 2.25rem; }
.f3-m { font-size: 1.5rem; }
.f4-m { font-size: 1.25rem; }
.f5-m { font-size: 1rem; }
.f6-m { font-size: 0.875rem; }
}
@media screen and (min-width: 64) and (max-width: 128) {
.f1-l { font-size: 3rem; }
.f2-l { font-size: 2.25rem; }
.f3-l { font-size: 1.5rem; }
.f4-l { font-size: 1.25rem; }
.f5-l { font-size: 1rem; }
.f6-l { font-size: 0.875rem; }
}
@media screen and (min-width: 128) {
.f1-xl { font-size: 3rem; }
.f2-xl { font-size: 2.25rem; }
.f3-xl { font-size: 1.5rem; }
.f4-xl { font-size: 1.25rem; }
.f5-xl { font-size: 1rem; }
.f6-xl { font-size: 0.875rem; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment