@import "colors"; @import "compass/utilities/links/link-colors"; @import "compass/utilities/general/float"; $blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default; $blueprint-fixed-font-family: "andale mono", "lucida console", monospace !default; $blueprint-font-size: 12px !default; // Usage examples: // As a top-level mixin, apply to any page that includes the stylesheet: //
// +blueprint-typography //// // Scoped by a presentational class: //
// body.blueprint // +blueprint-typography(true) //// // Scoped by semantic selectors: //
// body#page-1, body#page-2, body.a-special-page-type // +blueprint-typography(true) //// // **Deprecated**: // You can pass the body selector as the first argument when used as a top-level mixin //
// +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type") //@mixin blueprint-typography($body-selector: body) { @if $body-selector == true { @include blueprint-typography-body; @include blueprint-typography-defaults; } @else { #{$body-selector} { @include blueprint-typography-body; @if $body-selector != body { @warn "[DEPRECATED] To specify the selector \"#{$body-selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{$body-selector}."; @include blueprint-typography-defaults; } } @if $body-selector == body { @include blueprint-typography-defaults; } } } @mixin normal-text { font-family: $blueprint-font-family; color: $font-color; } @mixin fixed-width-text { font: 1em $blueprint-fixed-font-family; line-height: 1.5; } @mixin header-text { font-weight: normal; color: $header-color; } @mixin quiet { color: $quiet-color; } @mixin loud { color: $loud-color; } @mixin blueprint-typography-body($font-size: $blueprint-font-size) { line-height: 1.5; @include normal-text; font-size: 100% * $font-size / 16px; } @mixin blueprint-typography-defaults { #{headers(all)} { @include header-text; img { margin: 0; } } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.50em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1.00em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.50em; } h6 { font-size: 1em; font-weight: bold; } p { margin: 0 0 1.5em; img.left { @include float-left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } img.right { @include float-right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } } a { text-decoration: underline; @include link-colors($link-color, $link-hover-color, $link-active-color, $link-visited-color, $link-focus-color); } blockquote { margin: 1.5em; color: $alt_text_color; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } dfn { font-style: italic; font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666666; } address { margin: 0 0 1.5em; font-style: italic; } del { color: $alt_text_color; } pre { margin: 1.5em 0; white-space: pre; } pre, code, tt { @include fixed-width-text; } li ul, li ol { margin: 0; } ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; dt { font-weight: bold; } } dd { margin-left: 1.5em; } table { margin-bottom: 1.4em; width: 100%; } th { font-weight: bold; } thead th { background: $blueprint-table-header-color; } th, td, caption { padding: 4px 10px 4px 5px; } tr.even td { background: $blueprint-table-stripe-color; } tfoot { font-style: italic; } caption { background: $blueprint_background_color; } .quiet { @include quiet; } .loud { @include loud; } }