// ================== // EDGE TYPOGRAPHY // ================== // BODY $body-background : #fff !default; $body-font-color : #222 !default; $body-font-weight : 400 !default; // Compass' VERTICAL RHYTM // note: variable for $body-font-size and $body-line-height is in _base.scss due to it being used in em conversion $base-font-size : $body-font-size; $base-line-height : $body-line-height; // FONT FAMILY $header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default; $body-font-family : "Helvetica", Helvetica, Arial, "sans-serif" !default; // HEADER $h1-font-size : 44px !default; $h2-font-size : 36px !default; $h3-font-size : 28px !default; $h4-font-size : 22px !default; $h5-font-size : 18px !default; $h6-font-size : 16px !default; $header-font-color : $body-font-color !default; $header-font-weight : 700 !default; // PARAGRAPH $p-margin-bottom : 1em !default; // LIST $ul-parent-style : disc !default; $ul-child-style : circle !default; $ol-parent-style : decimal !default; $ol-child-style : lower-alpha !default; // ------------------------------------------------ // VERTICAL RHYTHM // - Apply vertically-aligned paragraph and header // ------------------------------------------------ @mixin vertical-rhythm( $font-size : $base-font-size, $line-height : $base-line-height, $for-base : false) { $base-font-size : $font-size; $base-line-height : $font-size * $line-height; @if not $for-base { font-size: em($font-size); line-height: $line-height; } h1 { @include adjust-font-size-to($h1-font-size); } h2 { @include adjust-font-size-to($h2-font-size); } h3 { @include adjust-font-size-to($h3-font-size); } h4 { @include adjust-font-size-to($h4-font-size); } h5 { @include adjust-font-size-to($h5-font-size); } h6 { @include adjust-font-size-to($h6-font-size); } p { @include trailer(1); &:last-child { @include trailer(0); } } ul, ol { @include trailer(1); } } // ------------------------------ // BASELINE // - Create notebook-like row // ------------------------------ @mixin baseline( $font-size : $base-font-size, $line-height : $base-line-height) { @include background( linear-gradient(to bottom, rgba(black, 0) 95%, rgba(black, .3) 100%) ); background-size: 100% em($font-size * $line-height, $font-size); } @if $include-typography and not $user-mode { /* ----------------- EDGE Typography ----------------- */ body { position: relative; background: $body-background; font-size: $base-font-size; font-family: $body-font-family; font-weight: $body-font-weight; line-height: $base-line-height; color: $body-font-color; } h1, h2, h3, h4, h5, h6 { color: $header-font-color; font-family: $header-font-family; font-weight: $header-font-weight; } a { color: $main-color; } h1 { font-size: em($h1-font-size); } h2 { font-size: em($h2-font-size); } h3 { font-size: em($h3-font-size); } h4 { font-size: em($h4-font-size); } h5 { font-size: em($h5-font-size); } h6 { font-size: em($h6-font-size); } p { margin-top: 0; margin-bottom: $p-margin-bottom; } // ----------- // LIST // ----------- .inline-list { @include clearfix(); > li { display: inline-block; float: left; vertical-align: top; } } ul { list-style-type: $ul-parent-style; padding-left: 20px; &[class] { list-style-type: none; padding-left: 0; } ul { list-style-type: $ul-child-style; } } ol { list-style-type: $ol-parent-style; padding-left: 25px; ol { list-style-type: $ol-child-style; } } blockquote { margin-bottom: $p-margin-bottom; cite { display: block; font-style: italic; } } } // include-typography