Permalink
Fetching contributors…
Cannot retrieve contributors at this time
124 lines (110 sloc) 2.67 KB
@if $establish-type-rules {
// @page Pattern Library/Typography
// @name Headings
//
// @description
// The default heading styling across all uSwitch pages.
// We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site.
//
// #### Best practices
// * Headings are for structure, not presentation
// * The first heading on the page should be an H1
// * Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]
//
// @markup
// <h1>Heading 1</h1>
// <h2>Heading 2</h2>
// <h3>Heading 3</h3>
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
html {
@include normal-font;
font-size: $base-font-size;
line-height: $base-line-ratio + em;
}
body {
color: $c-typegrey;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .375em;
}
@for $level from 1 through 6 {
h#{$level},
%heading-#{$level},
.us-heading--#{$level} {
@include heading($level);
}
}
// @page Pattern Library/Typography
// @name Paragraphs
//
// @description
// Default paragraph styling with a margin bottom.
//
// @state .us-standfirst - Used for heros and introductory paragraphs.
//
// @markup
// <p class="{$modifiers}">
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.
// Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.
// Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.
// </p>
p,
.trailered {
margin: 0 0 1.5em 0;
}
.us-standfirst {
@include baseline(18px);
}
// @page Pattern Library/Typography
// @name Lists
//
// @description
// Normal list styling.
//
// @markup
// <ul>
// <li>List item 1</li>
// <li>List item 2</li>
// <li>List item 3</li>
// </ul>
ul {
li {
margin-bottom: .5em;
}
}
small {
line-height: 1.15em;
}
// @page Pattern Library/Typography
// @name Blockquote
//
// @description
// Default blockquote.
//
// @markup
// <blockquote>
// <p>
// Lorem ipsum dolor sit amet, consectetur adipiscing elit.
// Aenean vel arcu non magna varius sagittis vel at elit.
// Vivamus et orci pretium, commodo eros vitae, tincidunt purus.
// </p>
// </blockquote>
blockquote {
@include italic-font;
padding: $gutter-width / 2;
color: $c-navy;
border-left: 5px solid $c-bordergrey;
> p {
padding: 0;
margin: 0;
}
}
}