stylint

/** * All extends, code bits that are reused a lot, don't generate extra css * mostly alphabetical, some re-jiggering cause of dependencies */ // ambroise defaults, no size set $ambroise font-family $ambroise font-style normal font-weight 400 text-transform uppercase em, cite display inline-block font-family inherit font-style inherit line-height inherit transform skew( -5deg ) // dont have italic font... // default ambroise header (header tags in a post, card headers) $ambroise-hdr @extends $ambroise font-size 45px line-height 40px .card & line-height 37px // default body copy $body-copy font-family $exchange font-size 18px line-height 28px em, cite font-family $exchange-ital font-style normal // brandon defaults $brandon font-family $brandon font-style normal font-weight 400 em, cite display inline-block font-family inherit font-style inherit line-height inherit transform skew( -5deg ) // dont have italic font... // default button and input styles, appliable anywherez $button-base background $gray-5 border 0 border-radius 3px box-shadow none color $white font-family $oxide font-size 10px letter-spacing .08em padding 11px $gutter-med 9px transition background $fast $timing &:hover background $black /** * default card style. make unto antyhing a card * 1 fixes box-shadow not working on retina, ios8 */ $card background $white border-radius 1px // 1 border-top 3px solid $black box-shadow $depth-1 margin-bottom $gutter-med position relative width 100% // center a thing safely (without messing up top or bottom margin) $center display block margin-left auto margin-right auto // extendable clearfix $clearfix clear both display block &:before &:after content '' display table &:after clear both // italic exchange $exchange-italic font-family $exchange-ital font-style normal // small exchange spec for smart cards $exchange-sm color $gray-6 font-family $exchange font-size 13px line-height 16px em, cite @extends $exchange-italic // hopefully temp extension for nav icons $icon background-repeat no-repeat display block overflow hidden // blue underlines under text $link-underline border-bottom 3px solid $light-blue box-shadow inset 0 -5px 0 $light-blue color inherit transition background $fast $timing &:hover, &:focus, &:active background $light-blue $link-underline-sm border-bottom 1px solid $light-blue box-shadow inset 0 -5px 0 $light-blue color inherit transition background $fast $timing &:hover, &:focus, &:active background $light-blue // dark blue underline for dark bg $link-underline-dark border-bottom 3px solid $dark-blue box-shadow inset 0 -5px 0 $dark-blue color inherit transition background $fast $timing &:hover, &:focus, &:active background $dark-blue $link-underline-dark-sm border-bottom 1px solid $dark-blue box-shadow inset 0 -4px 0 $dark-blue color inherit transition background $fast $timing &:hover, &:focus, &:active background $light-blue // remove list styles from article lists, the extend version $list-none list-style none li:before content '' margin 0 width 0 // oxide defaults $oxide font-family $oxide font-style normal font-weight 400 letter-spacing .08em text-transform uppercase em, cite font-family inherit font-style italic line-height inherit // first 3 words in an article usually $lede @extends $oxide font-size 14px line-height 14px /** * slightly out of order cause dependency on oxide * meta text (time, bylines, sections, tags, all metadata basically) */ $meta @extends $oxide color $gray-5 display block font-size 10px line-height 12px transition color $fast $timing &:empty display none a:hover color black // remove blue underline under links $no-underline border-bottom 0 box-shadow none outline 0 &.no-hover:hover background none // well its proxima $proxima font-family $proxima font-style normal font-weight 400 a color inherit em, cite font-family inherit font-style italic line-height inherit // captions, dependent on proxima $caption @extends $proxima color $gray-4 font-size 14px line-height 20px // tungsten is the big loud angry typeface $tungsten font-family $tungsten font-size 45px font-style normal font-weight normal line-height 36px text-transform uppercase em, cite display inline-block font-family inherit font-style inherit line-height inherit transform skew( -5deg ) // this could be better... @TODO .text & color $gray-5 margin-top 2px // same for you /** * Hide element visually, but leave it available for screenreaders * anything that gets toggled but needs to be accessible * is a good candidate for this instead of display none */ $visually-hidden border 0 clip rect( 0 0 0 0 ) height 1px margin -1px overflow hidden padding 0 position absolute width 1px