@import “typography”;
$alternate-text-font : “Warnock Pro”, “Goudy Old Style”, “Palatino”, “Book Antiqua”, Georgia, serif !default; // To install the fancy type plugin: // 1. import the fancy_type module: @import blueprint/fancy_type // 2. mixin +fancy-type to your project's body or at the top level of your stylesheet: // body // +fancy-type
@mixin fancy-type {
@include fancy-paragraphs; .caps { @include caps; } .dquo { @include dquo; } .alt { @include alt; }
}
// Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p @mixin sibling-indentation {
text-indent: 2em; margin-top: -1.5em; /* Don't want this in forms. */ form & { text-indent: 0; }
}
// For great looking type, use this code instead of asdf: // <span class=“alt”>asdf</span>
// Best used on prepositions and ampersands.
@mixin alt {
color: $alt-text-color; font-family: $alternate-text-font; font-style: italic; font-weight: normal;
}
// For great looking quote marks in titles, replace “asdf” with: // <span class=“dquo”>“</span>asdf” // (That is, when the title starts with a quote mark). // (You may have to change this value depending on your font size).
@mixin dquo($offset: 0.5em) {
margin-left: -$offset;
}
// Reduced size type with incremental leading // (www.markboulton.co.uk/journal/comments/incremental_leading/) // // This could be used for side notes. For smaller type, you don't necessarily want to // follow the 1.5x vertical rhythm – the line-height is too much. // // Using this mixin, reduces your font size and line-height so that for // every four lines of normal sized type, there is five lines of the sidenote. eg: // // Arguments: // `$font-size` - The desired font size in pixels. This will be converted to ems for you. Defaults to 10px. // `$base-font-size` - The base font size in pixels. Defaults to 12px // `$old-line-height` - The old line height. Defaults to 1.5 times the base-font-size
@mixin incr(
$font-size: 10px, $base-font-size: $blueprint-font-size, $old-line-height: $base-font-size * 1.5
) {
font-size: 1em * $font-size / $base-font-size; line-height: 1em * $old-line-height / $font-size * 4 / 5; margin-bottom: 1.5em;
}
// Surround uppercase words and abbreviations with this class. // Based on work by Jørgen Arnor Gårdsø Lom [twistedintellect.com/]
@mixin caps {
font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; font-size: 1.2em; line-height: 1%; font-weight: bold; padding: 0 2px;
}
@mixin fancy-paragraphs {
p + p { @include sibling-indentation; } p.incr, .incr p { @include incr; }
}