stylint

/** * General vars, colors, fonts, block vars, hashes, etc */ // section colors $business = #009F5E// #6dc8b7 $design = #A0C9CC // #28a3ab $entertainment = #41274B// #40264d $gear = #1F849F // #956771 $science = #FFC036 // #fabf0b $security = #621200 // #f33946 $uncategorized = #CCCCCC // #f33946 // other colors $dark-blue = #12679b $old-blue = #00aeef $light-blue = #b4e7f8 // grays are in a hash at the bottom cause i loop through em in places $black = #000 $white = #fff // i know white 2 is a weird name but oh well. white but transparent $white-2 = rgba( 255, 255, 255, .98 ) $gray-1 = rgba( 0, 0, 0, .035 ) // lightest gray $gray-2 = rgba( 0, 0, 0, .06 ) // equivalent to #efefef (old lightest gray) $gray-3 = rgba( 0, 0, 0, .2 ) // equivalent to #ccc $gray-4 = rgba( 0, 0, 0, .4 ) // equivalent to #999 $gray-5 = rgba( 0, 0, 0, .5 ) // equivalent to #666 $gray-6 = rgba( 0, 0, 0, .8 ) // equivalent to #333 $gray-7 = rgba( 0, 0, 0, .98 ) // basically, black but slightly transparent // vars for grid system and helpers $gutter-nano = 2px $gutter-micro = unit( $gutter-nano * 2, 'px' ) // 4 $gutter-sm = unit( $gutter-micro * 2, 'px' ) // 8 $gutter-med = unit( $gutter-sm * 2, 'px' ) // 16 $gutter-big = unit( $gutter-med * 2, 'px' ) // 32 $gutter-huge = unit( $gutter-big * 2, 'px' ) // 64 // not part of the 'system' but still used $gutter-25 = 25px $gutter-50 = 50px // borders $border-micro = 1px solid rgba( 0, 0, 0, .18 ) $border-micro-white = 1px solid rgba( 255, 255, 255, .18 ) $border-sm = 1px solid $black $border = 3px solid $black $border-big = 10px solid $black // change this and ~*EVERYTHING CHANGES 4EVA*~ $columns = 18 // max width of site $max-width = 932px // depth vars $depth-1 = -1px 0 2px 0 rgba( 0, 0, 0, .12 )\, 1px 0 2px 0 rgba( 0, 0, 0, .12 )\, 0 1px 1px 0 rgba( 0, 0, 0, .24 ) $depth-2 = -2px 0 2px 0 rgba( 0, 0, 0, .16 )\, 2px 0 2px 0 rgba( 0, 0, 0, .16 )\, 0 2px 2px 0 rgba( 0, 0, 0, .23 ) $depth-3 = -3px -3px 3px 0 rgba( 0, 0, 0, .19 )\, 3px 0 3px 0 rgba( 0, 0, 0, .19 )\, 0 3px 3px 0 rgba( 0, 0, 0, .23 ) // animation stuff. // used for every transition, to keep our animations consistent $timing = cubic-bezier( .33, .66, .66, 1 ) // most animations are $fast, but a few are $slow and a couple are $very-slow $fast = .15s $slow = .35s $very-slow = .5s $molasses = 1s /** * fonts * ambroise = newspapery headline font * proxima = captions * exchange = the serif font used for body copy * exchange ital = same as above but italic * oxide = metadata font * tungsten = special case headline for da big stories */ $ambroise = ambroise-francois-std, 'Bodoni 72', Didot, 'Hoefler Text', serif $brandon = brandon-text, 'Gill Sans', $helveticaBold $helveticaBold = HelveticaNeue-Bold, 'Helvetica Neue Bold', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif $proxima = proxima-nova, $helveticaBold $exchange = 'Exchange SSm 4r', Georgia, serif $exchangeItal = 'Exchange SSm 4i', $exchange $oxide = ff-oxide-solid-web, $helveticaBold $tungsten = 'tungsten', $proxima // breakpoints $mob = '( max-width 660px )' $mob-plus = '( min-width 661px )' $sm = '( min-width 661px ) and ( max-width 768px )' $med = '( min-width 769px ) and ( max-width 960px )' $med-max = '( max-width 768px )' $med-plus = '( min-width 769px )' $big = '( min-width 961px ) and ( max-width 1199px )' $big-max = '( max-width 960px )' $big-plus = '( min-width 961px )' $huge = '( min-width 1200px )' $huge-max = '( max-width 1200px )' $short = '( min-width 961px ) and ( max-height 900px )' $tall = '( min-width 961px ) and ( max-height 1200px )' $short-tab = '( min-width 769px ) and ( max-width 960px ) and ( max-height 900px )' $tall-tab = '( min-width 769px ) and ( max-width 960px ) and ( max-height 1200px )' // this crazy block is just for nav-icons // auto generated, dont bother editing it $business-color-sm = -63px -7px 40px 40px $business-white-sm = -113px -7px 40px 40px $design-color-sm = -213px -7px 40px 40px $design-white-sm = -313px -7px 40px 40px $entertainment-color-sm = -413px -7px 40px 40px $entertainment-white-sm = -513px -7px 40px 40px $gear-color-sm = -12px -7px 40px 40px $gear-white-sm = -560px -7px 40px 40px $science-color-sm = -460px -7px 40px 40px $science-white-sm = -360px -7px 40px 40px $security-color-sm = -263px -7px 40px 40px $security-white-sm = -163px -7px 40px 40px $business-color = -687px -5px 72px 72px $business-white = -1425px -5px 72px 72px $design-color = -1261px -5px 72px 72px $design-white = -605px -5px 72px 72px $entertainment-color = -933px -5px 72px 72px $entertainment-white = -769px -5px 72px 72px $gear-color = -1097px -5px 72px 72px $gear-white = -851px -5px 72px 72px $science-color = -1015px -5px 72px 72px $science-white = -1179px -5px 72px 72px $security-color = -1343px -5px 72px 72px $security-white = -1507px -5px 72px 72px /** * @description All re-usable blocks, just adding them as needed for now * @reference http://learnboost.github.io/stylus/docs/block.html */ big-title = @block font-size 24px line-height 26px margin 5px /** * make unto a thing a basic card */ card = @block background $white border-top $border border-radius 1px // fixes drop shadow problem on mob margin-bottom $gutter-med position relative width 100% /** * sets max-width of site */ site-container = @block margin-left auto margin-right auto max-width $max-width position relative width s( 'calc(100% - (%s * 2))', $gutter-med ) /** * collapses smart cards to only 3 stories * @see helpers.styl for use * @note so, pending design changes to list cards we might not need this */ squish = @block max-height 465px overflow hidden .squish-hide display none /** * @description All hashes, just adding them as needed for now * @reference http://learnboost.github.io/stylus/docs/hashes.html */ /** * handy dandy directions hash * see helpers.styl for an example */ $directions = { t: top, r: right, b: bottom, l: left } // hash for the various grays in use $grays = { '1': rgba( 0, 0, 0, .035 ), '2': rgba( 0, 0, 0, .06 ), '3': rgba( 0, 0, 0, .2 ), '4': rgba( 0, 0, 0, .4 ), '5': rgba( 0, 0, 0, .5 ), '6': rgba( 0, 0, 0, .8 ), } // everything is multiplied by 2 (except for the 25 and 50). 2 : 4 : 8 : 16 : 32 : 64 $sizes = { nano: $gutter-nano, micro: $gutter-micro, sm: $gutter-sm, med: $gutter-med, big: $gutter-big, huge: $gutter-huge } /** * color hash for header category loopin' * includes child category color fallback * nav-base.styl has an example use case of this */ $section-colors = { business: $business, // parent wiredenterprise: $business, enterprise: $business, insights: $business, business-conference: $business, design: $design, // parent rawfile: $design, entertainment: $entertainment, // parent opinion: $entertainment, underwire: $entertainment, gamelife: $entertainment, entertainment-apps: $entertainment, gear: $gear, // parent gadgetlab: $gear, autopia: $gear, reviews: $gear, science: $science, // parent wiredscience: $science, science-blogs: $science, security: $security, // parent dangerroom: $security, threatlevel: $security, uncategorized: $uncategorized // used for article without a primary category (e.g., Geek Dad) }