stylint

/** * General article stylz */ /** * middle column, where content actually goes * class because there might be multiple 'blocks' broken up by full width ads, or full width 'sidebars' */ .content @extends $body-copy // @FIXME remove me when galleries are no longer being dumped into post content .gallery color #fff display none @media $med-plus margin-right 350px @media $big-plus padding-left 100px // double space for sub headers > h1, > h2, > h3 margin $gutter-huge 0 $gutter-med // videos, images, etc, get extra space above and below video, object, iframe, blockquote margin $gutter-huge 0 p, ul, ol, dl, blockquote &:empty display none i display inline p, ul, ol, dl margin-bottom 14px // half of line height // slightly bigger than normal spec to align with body copy x-height b, strong @extends $brandon font-size 20px line-height inherit // blockquote is just a slightly smaller, grayed out p tag blockquote color $gray-5 font-size 15px line-height 25px // auto p problems :( p font-size inherit line-height inherit // big post-content header h1 @extends $ambroise-hdr margin $gutter-25 0 // default post-content sub head h2 @extends $ambroise-hdr margin $gutter-50 0 $gutter-sm h3 @extends $brandon font-size 24px margin $gutter-50 0 $gutter-sm // for unordered lists, we add a 'pipe' using before ul list-style-type disc li:before content '|' float left margin 0 7px 0 -3px /** * because the before on the li is being used for the counter, ask writers to use p tags with ordered lists, and put the before there, best solution i have at the moment */ ol counter-reset list-counter li counter-increment list-counter &:before content counter( list-counter ) float left font-size 80% margin-right 5px // add extra space to nested lists ol margin-left $gutter-big p display inline &:before content '|' margin-right $gutter-sm li @extends $clearfix list-style-position inside &:before @extends $proxima width 10px // definition lists (science articles) dt @extends $proxima // things like sidebars, pullquotes, and cards are asides aside margin $gutter-big 0 width 100% @media ( min-width 850px ) margin 7px $gutter-big $gutter-med 0 width 300px // image wrapper, should contain an anchor tag, an image tag, and a caption // @TODO right now this only works on desktop, needs responsive adjustments figure margin $gutter-huge auto @media $big-plus margin $gutter-huge auto $gutter-huge -100px // width of container + social buttons if carved max-width calc( 100% + 100px ) width 100% /** * once the browser is wide enough for content + ad sidebar * pull it out a bit to the left, lined up with social * should be used in conjunction with asides (pullquotes, cards) */ .carve carve() // pq is like a card now, usually carved with attribution .pullquote carve() pullquote() // old galleries just get dumped into content-block as a list .gallery-slides @extends $list-none li margin-top $gutter-huge .gallery-pic margin-bottom $gutter-med // first three words for articles .lede @extends $lede // opinion sidebar bug .wired-opinion width 200px h4 font-size 20px font-style italic p font-size 12px .opinion-title cursor default .read-more cursor pointer .category-reviews & // Shortcode sidebar #wired-tired, #top-3-prefooter @extends $proxima color $gray-5 position relative .tungsten @extends $tungsten // How we rate popup #how-rate absolute top 16px right 0 bottom 0 left 0 background-color $white display none .score-key font-size 12px span.tungsten font-size 30px h2 border-top $border-big h2, h3 padding 0 h2 margin $gutter-med 0 0 h3 margin 0 0 $gutter-med h5 font-size 14px line-height 18px text-transform uppercase p @extends $brandon font-size 14px line-height 18px margin-bottom $gutter-med a @extends $no-underline // entire post, including post-header and sidebars // 1: ensure post is tall enough for sidebars, even if not enough text .post min-height 1200px // 1 // wraps content-block and social .post-container position relative img:hover cursor pointer // fallback cursor zoom-in