Created
March 28, 2017 13:56
-
-
Save dcolucci/d6588800d79f42c2aa9c97ded45a261a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // NOTE: placeholders do not work in media queries. | |
| // Remaining initial topography placeholders | |
| %button { | |
| color: $white; | |
| font-family: $platform-w; | |
| font-size: 20px; //shouldBe 24px | |
| letter-spacing: .2px; //shouldBe 1.2px | |
| } | |
| %nav-link { | |
| color: $dark-turquoise; // Could also be $barley-corn | |
| font-family: $arial; | |
| font-size: 14px; | |
| letter-spacing: .8px; | |
| @media #{$mq-min-md} { | |
| font-size: 12px; | |
| font-weight: $font-weight-bold; | |
| letter-spacing: 1.8px; | |
| } | |
| &.active, | |
| &:hover, | |
| &:focus { | |
| color: $barley-corn; | |
| } | |
| } | |
| %subscribe { | |
| color: $barley-corn; | |
| font-family: $arial; | |
| font-size: 12px; | |
| font-weight: $font-weight-bold; | |
| letter-spacing: 1.8px; | |
| line-height: 12px; | |
| } | |
| %hed-11 { | |
| color: $dark-turquoise; | |
| font-family: $bb-small; | |
| font-size: 21px; | |
| font-weight: $font-weight-normal; | |
| } | |
| %hed-12 { | |
| color: $black; | |
| font-size: 17px; | |
| line-height: 27px; | |
| } | |
| %hed-14 { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 21px; | |
| font-weight: $font-weight-normal; | |
| line-height: 26px; | |
| text-transform: uppercase; | |
| } | |
| %customer-care { | |
| color: $dark-turquoise; | |
| font-family: $georgia; | |
| font-size: 15px; | |
| line-height: 24px; | |
| } | |
| %customer-care-submit { | |
| color: $white; | |
| font-family: $arial; | |
| font-size: 12px; | |
| font-weight: $font-weight-bold; | |
| letter-spacing: 1.8px; | |
| line-height: 36px; | |
| } | |
| %subscribe-page-links { | |
| font-family: $arial; | |
| font-size: 14px; | |
| line-height: 24px; | |
| } | |
| %error-hed { | |
| color: $dark-turquoise; | |
| font-family: $bb-small; | |
| font-size: 24px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.2px; | |
| line-height: 1.1; | |
| text-transform: uppercase; | |
| @media #{$mq-min-md} { | |
| font-size: 50px; | |
| } | |
| } | |
| %dek-base { | |
| color: $dark-turquoise; | |
| font-family: $georgia; | |
| font-size: 18px; | |
| font-weight: normal; | |
| line-height: 26px; | |
| } | |
| %dek { | |
| @extend %dek-base; | |
| @media #{$mq-min-md} { | |
| font-size: 20px; | |
| line-height: 30px; | |
| } | |
| } | |
| %dek-2 { | |
| font-family: $platform-w; | |
| font-size: 16px; | |
| font-weight: normal; | |
| line-height: 28px; | |
| } | |
| %error-dek { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| @media #{$mq-min-md} { | |
| font-family: $georgia; | |
| font-size: 18px; | |
| } | |
| } | |
| %error-button { | |
| color: $white; | |
| font-family: $platform-w; | |
| font-size: 16px; | |
| letter-spacing: 1.2px; | |
| @media #{$mq-min-md} { | |
| font-size: 20px; | |
| } | |
| } | |
| %byline { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 15px; | |
| line-height: 24px; | |
| a { | |
| color: $barley-corn; | |
| } | |
| } | |
| %byline-2 { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 12px; | |
| letter-spacing: .1px; | |
| line-height: 21px; | |
| a { | |
| color: $barley-corn; | |
| } | |
| @media #{$mq-min-md} { | |
| font-size: 14px; | |
| line-height: 23px; | |
| } | |
| } | |
| %byline-3 { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 11px; | |
| line-height: 20px; | |
| a { | |
| color: $barley-corn; | |
| } | |
| @media #{$mq-min-md} { | |
| font-size: 14px; | |
| line-height: 23px; | |
| } | |
| } | |
| %subhead { | |
| color: $dark-turquoise; //Can also be $barley-corn | |
| font-family: $bb-small; | |
| font-size: 30px; | |
| letter-spacing: 1px; | |
| } | |
| %subhead-2 { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 24px; | |
| letter-spacing: .6px; | |
| line-height: 1.2; | |
| } | |
| %body { | |
| color: $dark-turquoise; | |
| font-family: $georgia; | |
| font-size: 17px; | |
| line-height: 1.6; | |
| @media #{$mq-min-md} { | |
| line-height: 1.8; | |
| } | |
| a { | |
| color: $barley-corn; | |
| } | |
| } | |
| %body-2 { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 15px; | |
| line-height: 1.4; | |
| @media #{$mq-min-md} { | |
| font-size: 16px; | |
| letter-spacing: 0; | |
| line-height: 26px; | |
| } | |
| } | |
| %body-3 { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 13px; | |
| line-height: 20px; | |
| } | |
| %bio { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 17px; | |
| line-height: 1.6; | |
| @media #{$mq-min-md} { | |
| font-size: 18px; | |
| line-height: 1.7; | |
| } | |
| } | |
| %quote { | |
| color: $dark-turquoise; | |
| font-family: $georgia; | |
| font-size: 22px; | |
| line-height: 1.4; | |
| @media #{$mq-min-md} { | |
| font-size: 26px; | |
| line-height: 1.5; | |
| } | |
| } | |
| %quote-name { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 14px; | |
| a { | |
| font-weight: bold; | |
| &.active { | |
| color: $barley-corn; | |
| } | |
| } | |
| } | |
| %caption { | |
| color: $jewel; | |
| font-family: $helvetica; | |
| font-size: 14px; | |
| line-height: 1.3; | |
| a { | |
| color: $barley-corn; | |
| } | |
| } | |
| %input { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 15px; | |
| } | |
| %tag-hed { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 12px; | |
| letter-spacing: .6px; | |
| } | |
| %tag-item { | |
| color: $barley-corn; | |
| font-family: $arial; | |
| font-size: 12px; | |
| letter-spacing: .6px; | |
| text-decoration: none; | |
| } | |
| %credit { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| %credit-2 { | |
| color: $jewel; | |
| font-family: $arial; | |
| font-size: 11px; | |
| line-height: 17px; | |
| } | |
| %credit-link { | |
| color: $barley-corn; | |
| font-family: $arial; | |
| font-size: 15px; | |
| letter-spacing: .5px; | |
| } | |
| %time-stamp { | |
| color: $jewel; | |
| font-family: $arial; | |
| font-size: 11px; | |
| letter-spacing: .1px; | |
| line-height: 2; | |
| } | |
| %footer-links { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 14px; | |
| letter-spacing: .4px; | |
| } | |
| %legal { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 10px; | |
| line-height: 1.4; | |
| .link { | |
| text-decoration: underline; | |
| &:hover, | |
| &:focus { | |
| color: $white; | |
| } | |
| } | |
| } | |
| %cm-footer-dek { | |
| font-family: $arial; | |
| font-size: 14px; | |
| font-style: normal; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 0; | |
| line-height: 18px; | |
| text-align: left; | |
| } | |
| %start-screen-content { | |
| color: $watercourse; | |
| font-family: $arial; | |
| font-size: 14px; | |
| line-height: 24px; | |
| } | |
| %slideshow-meta { | |
| color: $barley-corn; | |
| font-family: $platform-w; | |
| font-size: 12px; | |
| font-weight: $font-weight-bold; | |
| letter-spacing: 1.8px; | |
| line-height: 12px; | |
| } | |
| %to-slideshow-button { | |
| color: $barley-corn; | |
| font-family: $arial; | |
| font-size: 13px; | |
| font-weight: $font-weight-bold; | |
| letter-spacing: .4px; | |
| @media #{$mq-min-md} { | |
| font-size: 12px; | |
| letter-spacing: 1.8px; | |
| line-height: 12px; | |
| } | |
| } | |
| %most-popular-title { | |
| color: $dark-turquoise; | |
| font-family: $arial; | |
| font-size: 14px; | |
| font-weight: $font-weight-normal; | |
| text-decoration: none; | |
| } | |
| %first-letter-capital { | |
| &::first-letter { | |
| @extend %dropcap-2; | |
| float: left; | |
| margin-right: $spacing-3; | |
| padding: $spacing-3 0 0; | |
| @media #{$mq-min-md} { | |
| margin-right: $spacing-4; | |
| padding: $spacing-4 0 $spacing-2; | |
| } | |
| } | |
| } | |
| // AUT-5705 Second Wave Typography placeholders | |
| %blockquote-1 { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 26px; | |
| font-weight: $font-weight-normal; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| %blockquote-2 { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 22px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .3px; | |
| line-height: 1.3; | |
| text-align: center; | |
| } | |
| %body-1 { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-weight: $font-weight-normal; | |
| a { | |
| color: $barley-corn; | |
| } | |
| } | |
| %button-1 { | |
| color: $white; | |
| font-family: $platform-w; | |
| font-size: 15px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.9px; | |
| text-align: center; | |
| } | |
| %button-2 { | |
| color: $barley-corn; | |
| font-family: $platform-w; | |
| font-size: 15px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.9px; | |
| text-align: center; | |
| } | |
| %button-3 { | |
| color: $white; | |
| font-family: $platform-w; | |
| font-size: 13px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.5px; | |
| } | |
| // Unused - styles only used for dropcap-2 desktop | |
| //%dropcap-1 { | |
| // color: $black; | |
| // font-family: $bb-medium; | |
| // font-size: 136px; | |
| // font-weight: $font-weight-medium; | |
| //} | |
| %dropcap-2 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 120px; | |
| font-weight: $font-weight-normal; | |
| line-height: 90px; | |
| @media #{$mq-min-md} { | |
| // Uses %dropcap-1 styles for desktop | |
| font-family: $bb-medium; | |
| font-size: 136px; | |
| font-weight: $font-weight-medium; | |
| } | |
| } | |
| %failsafe-text { | |
| color: $dark-turquoise; | |
| font-family: $bb-small; | |
| font-size: 23px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| text-align: center; | |
| @media #{$mq-min-md} { | |
| // Uses %hed-9 styles for desktop | |
| color: $white; | |
| font-size: 34px; | |
| letter-spacing: 1px; | |
| line-height: 1.2; | |
| } | |
| } | |
| // "Filter By" and "View All" text | |
| %sort-option { | |
| color: $black; | |
| font-family: $platform-w; | |
| font-size: 15px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.9px; | |
| text-align: center; | |
| } | |
| // Unused - styles only used for %hed-7 desktop | |
| //%hed-1 { | |
| // color: $black; | |
| // font-family: $bb-small; | |
| // font-size: 60px; | |
| // font-weight: $font-weight-normal; | |
| // letter-spacing: .6px; | |
| // line-height: 1; | |
| // text-align: center; | |
| //} | |
| %hed-2 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 50px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| text-align: center; | |
| } | |
| %hed-3 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 50px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| } | |
| %hed-4 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 42px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .8px; | |
| line-height: 1.2; | |
| text-align: center; | |
| @media #{$mq-min-md} { | |
| // Uses %hed-2 styles for desktop | |
| font-size: 50px; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| } | |
| } | |
| %hed-5 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 38px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| line-height: 43px; | |
| text-align: center; | |
| @media #{$mq-min-md} { | |
| font-size: 42px; | |
| } | |
| } | |
| %hed-6 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 38px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| line-height: 1.1; | |
| @media #{$mq-min-md} { | |
| // Uses %hed-3 styles for desktop | |
| font-size: 50px; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| } | |
| } | |
| %hed-7 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 42px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .2px; | |
| line-height: 1.3; | |
| text-align: center; | |
| @media #{$mq-min-md} { | |
| // Uses %hed-1 styles for desktop | |
| font-size: 60px; | |
| letter-spacing: .6px; | |
| line-height: 63px; | |
| } | |
| } | |
| %hed-8 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 34px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| line-height: 1.2; | |
| } | |
| // Unused - styles only used for %failsafe-text desktop | |
| //%hed-9 { | |
| // color: $white; | |
| // font-family: $bb-small; | |
| // font-size: 34px; | |
| // font-weight: $font-weight-normal; | |
| // letter-spacing: 1px; | |
| // line-height: 1.2; | |
| //} | |
| %hed-10 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 26px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: .5px; | |
| line-height: 1.3; | |
| } | |
| %most-popular-1 { | |
| color: $dark-turquoise; | |
| font-family: $bb-small; | |
| font-size: 28px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| %most-popular-2 { | |
| color: $barley-corn; | |
| font-family: $bb-small; | |
| font-size: 30px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| text-stroke: 1px $barley-corn; | |
| } | |
| %newsletter-text-1 { | |
| color: $dark-turquoise; | |
| font-family: $bb-small; | |
| font-size: 28px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| } | |
| // Unused - styles only used for %newsletter-text-1 desktop | |
| //%newsletter-text-2 { | |
| // color: $dark-turquoise; | |
| // font-family: $bb-small; | |
| // font-size: 28px; | |
| // font-weight: $font-weight-normal; | |
| // letter-spacing: 1px; | |
| // text-align: center; | |
| //} | |
| %numbers-1 { | |
| color: $jewel; | |
| font-family: $bb-small; | |
| font-size: 30px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| text-stroke: 1px $barley-corn; | |
| } | |
| // Specs have this as numbers-4 but there are no numbers 2 and 3 | |
| %numbers-2 { | |
| color: $black; | |
| font-family: $bb-small; | |
| font-size: 30px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| text-stroke: 1px $barley-corn; | |
| } | |
| %rubric-1 { | |
| color: $barley-corn; | |
| font-family: $platform-w; | |
| font-size: 13px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| } | |
| %rubric-2 { | |
| color: $barley-corn; | |
| font-family: $platform-w; | |
| font-size: 12px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| %subchannel-menu { | |
| color: $dark-turquoise; | |
| font-family: $platform-w; | |
| font-size: 15px; | |
| font-weight: $font-weight-normal; | |
| letter-spacing: 1.9px; | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment