/* Table of Contents ================================================== # Variables # Font-Face # Typography # Alignments # Colors # Decorations # Modifiers # Scripts # Styles # Transforms # Weights */ /* # Variables ================================================== */ $colors: ( dark-black: $color-dark-black, black: $color-black, light-black: $color-light-black, dark-gray: $color-dark-gray, gray: $color-gray, light-gray: $color-light-gray, dark-haze: $color-dark-haze, haze: $color-haze, light-haze: $color-light-haze, white: $color-white, lime: $color-lime, green: $color-green, teal: $color-teal, blue: $color-blue, indigo: $color-indigo, purple: $color-purple, pink: $color-pink, red: $color-red, orange: $color-orange, yellow: $color-yellow, primary: $color-primary, secondary: $color-secondary, tertiary: $color-tertiary ); /* # Font-Face ================================================== */ @font-face { font-family: 'Gotham Round'; font-style: normal; font-weight: normal; src: url(font_path('gotham/round/gothamrnd-book.eot')); src: url(font_path('gotham/round/gothamrnd-book.eot')) format('embedded-opentype'), url(font_path('gotham/round/gothamrnd-book.woff')) format('woff'), url(font_path('gotham/round/gothamrnd-book.ttf')) format('truetype'), url(font_path('gotham/round/gothamrnd-book.svg#GothamrndBookRegular')) format('svg'); } @font-face { font-family: 'Gotham Round'; font-style: normal; font-weight: bold; src: url(font_path('gotham/round/gothamrnd-bold.eot')); src: url(font_path('gotham/round/gothamrnd-bold.eot')) format('embedded-opentype'), url(font_path('gotham/round/gothamrnd-bold.woff')) format('woff'), url(font_path('gotham/round/gothamrnd-bold.ttf')) format('truetype'), url(font_path('gotham/round/gothamrnd-bold.svg#GothamrndBoldRegular')) format('svg'); } @font-face { font-family: 'Gotham Round'; font-style: normal; font-weight: 500; src: url(font_path('gotham/round/gothamrnd-medium.eot')); src: url(font_path('gotham/round/gothamrnd-medium.eot')) format('embedded-opentype'), url(font_path('gotham/round/gothamrnd-medium.woff')) format('woff'), url(font_path('gotham/round/gothamrnd-medium.ttf')) format('truetype'), url(font_path('gotham/round/gothamrnd-medium.svg#GothamrndMediumRegular')) format('svg'); } @font-face { font-family: 'Gotham Round'; font-style: normal; font-weight: 200; src: url(font_path('gotham/round/gothamrnd-light.eot')); src: url(font_path('gotham/round/gothamrnd-light.eot')) format('embedded-opentype'), url(font_path('gotham/round/gothamrnd-light.woff')) format('woff'), url(font_path('gotham/round/gothamrnd-light.ttf')) format('truetype'), url(font_path('gotham/round/gothamrnd-light.svg#GothamrndLightRegular')) format('svg'); } @font-face { font-family: 'Gotham'; font-style: normal; font-weight: normal; src: url(font_path('gotham/regular/gotham-book.eot')); src: url(font_path('gotham/regular/gotham-book.eot')) format('embedded-opentype'), url(font_path('gotham/regular/gotham-book.woff')) format('woff'), url(font_path('gotham/regular/gotham-book.ttf')) format('truetype'), url(font_path('gotham/regular/gotham-book.svg#GothamBookRegular')) format('svg'); } @font-face { font-family: 'Gotham'; font-style: normal; font-weight: bold; src: url(font_path('gotham/regular/gotham-bold.eot')); src: url(font_path('gotham/regular/gotham-bold.eot')) format('embedded-opentype'), url(font_path('gotham/regular/gotham-bold.woff')) format('woff'), url(font_path('gotham/regular/gotham-bold.ttf')) format('truetype'), url(font_path('gotham/regular/gotham-bold.svg#GothamBoldRegular')) format('svg'); } @font-face { font-family: 'Gotham'; font-style: normal; font-weight: 500; src: url(font_path('gotham/regular/gotham-medium.eot')); src: url(font_path('gotham/regular/gotham-medium.eot')) format('embedded-opentype'), url(font_path('gotham/regular/gotham-medium.woff')) format('woff'), url(font_path('gotham/regular/gotham-medium.ttf')) format('truetype'), url(font_path('gotham/regular/gotham-medium.svg#GothamMediumRegular')) format('svg'); } @font-face { font-family: 'Gotham'; font-style: normal; font-weight: 200; src: url(font_path('gotham/regular/gotham-light.eot')); src: url(font_path('gotham/regular/gotham-light.eot')) format('embedded-opentype'), url(font_path('gotham/regular/gotham-light.woff')) format('woff'), url(font_path('gotham/regular/gotham-light.ttf')) format('truetype'), url(font_path('gotham/regular/gotham-light.svg#GothamLightRegular')) format('svg'); } /* # Typography ================================================== */ h1, h2, h3, h4, h5, h6 { font-family: $typography-sans-serif; font-weight: bold; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; line-height: 50px; margin-bottom: 15px; } h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } h5 { font-size: 17px; line-height: 24px; } h6 { font-size: 14px; line-height: 21px; } p { font-size: 16px; line-height: 25px; margin-bottom: 20px; } p.large, p.lead { font-size: 28px; line-height: 34px; margin-bottom: 30px; } p.lead { font-weight: 200; } p.medium { font-size: 21px; line-height: 27px; } p.small { font-size: 14px; line-height: 22px; } p.mini { font-size: 12px; line-height: 20px; } address { font-size: 16px; line-height: 25px; } address.small { font-size: 14px; line-height: 22px; } address.mini { font-size: 12px; line-height: 20px; } blockquote { border-left: 5px solid $color-primary; padding: 5px 0 5px 10px; } blockquote > p { margin-bottom: 5px; } blockquote > small { color: $color-gray; } small { font-size: 11px; line-height: 17px; } strong { font-weight: 500; } /* # Alignments ================================================== */ .text-left { text-align: left; } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-right { text-align: right; } /* # Colors ================================================== */ @each $name, $color in $colors { .text-#{$name} { color: $color; } } /* # Decorations ================================================== */ .text-overline { text-decoration: overline; } .text-line-through { text-decoration: line-through; } .text-underline { text-decoration: underline; } /* # Modifiers ================================================== */ .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .text-whitespaced { white-space: pre-wrap; } /* # Scripts ================================================== */ .text-heading { font-family: $typography-heading; } .text-monospace { font-family: $typography-monospace; } .text-sans-serif { font-family: $typography-sans-serif; } .text-serif { font-family: $typography-serif; } /* # Style ================================================== */ .text-italic { font-style: italic; } .text-normal { font-style: normal; } /* # Transform ================================================== */ .text-capitalize { text-transform: capitalize; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } /* # Weights ================================================== */ .text-light { font-weight: 200; } .text-normal { font-weight: normal; } .text-semibold { font-weight: 500; } .text-bold { font-weight: bold; }