Created
December 15, 2015 16:09
-
-
Save clintfisher/96426280cb0db87763d1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.20) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // variables-font-legacy | |
| // The exist to provide backwards compatibility for | |
| // current things that use font variables. You should | |
| // NOT be using these for new SCSS code. | |
| // legacy font weight vars | |
| $bold: 700; | |
| $medium-bold: 600; | |
| $medium: 500; | |
| $normal: 400; | |
| $light: 300; | |
| $extra-light: 200; | |
| // legacy font stacks | |
| $sans-base: arial, helvetica, sans-serif; | |
| $sans-franklin: "nyt-franklin", $sans-base; | |
| $sans-mag: "nyt-mag-sans", $sans-base; | |
| $sans: $sans-franklin; | |
| $serif-base: georgia, "times new roman", times, serif; | |
| $serif-chelt: "nyt-cheltenham", $serif-base; | |
| $serif-chelt-x-cn-bd: "nyt-cheltenham-extra-cn-bd", $serif-base; | |
| $serif-chelt-sh: "nyt-cheltenham-sh", $serif-base; | |
| $serif-karnak: "nyt-karnak-display", "nyt-karnak-display-130124", $serif-base; | |
| $serif-stymie: "nyt-stymie", $serif-base; | |
| $serif-mag: "nyt-mag-serif-headline", $serif-base; | |
| $slab-mag: "nyt-mag-slab", $serif-base; | |
| $serif: $serif-chelt; | |
| $base-font-family: $serif; | |
| $alt-font-family: $sans; | |
| $base-font-size: 16; // px | |
| // font weights | |
| $font-weight-bold: 700; | |
| $font-weight-medium-bold: 600; | |
| $font-weight-medium: 500; | |
| $font-weight-normal: 400; | |
| $font-weight-light: 300; | |
| $font-weight-extra-light: 200; | |
| // fonts | |
| // There should be a font variable for all the entires here: | |
| // https://github.com/nytm/web-fonts/tree/master/fonts | |
| $font-cheltenham: 'cheltenham'; | |
| $font-cheltenham-cond: 'cheltenham-cond'; | |
| $font-cheltenham-scaps: 'cheltenham-scaps'; | |
| $font-cheltenham-small: 'cheltenham-small'; | |
| $font-cheltenham-wide: 'cheltenham-wide'; | |
| $font-cheltenham-xcond: 'cheltenham-xcond'; | |
| $font-franklin: 'franklin'; | |
| $font-franklin-cword: 'franklin-cword'; | |
| $font-franklin-small: 'franklin-small'; | |
| $font-graphik: 'graphik'; | |
| $font-graphik-xcond: 'graphik-xcond'; | |
| $font-imperial: 'imperial'; | |
| $font-karnak: 'karnak'; | |
| $font-karnak-small: 'karnak-small'; | |
| $font-magsans: 'magsans'; | |
| $font-magserif: 'magserif'; | |
| $font-magslab: 'magslab'; | |
| $font-schnyder-s: 'schnyder-s'; | |
| $font-schnyder-scond: 'schnyder-scond'; | |
| $font-stymie: 'stymie'; | |
| $font-stymie-small: 'stymie-small'; | |
| // generic font vars | |
| $font-serif: $font-cheltenham; | |
| $font-sans: $font-franklin; | |
| // base font stacks | |
| $font-serif-base: georgia, "times new roman", times, serif; | |
| $font-sans-base: arial, helvetica, sans-serif; | |
| // map of fonts to their fallback stacks | |
| $font-fallback-map: ( | |
| $font-cheltenham: $font-serif-base, | |
| $font-cheltenham-cond: $font-serif-base, | |
| $font-cheltenham-scaps: $font-serif-base, | |
| $font-cheltenham-small: $font-serif-base, | |
| $font-cheltenham-wide: $font-serif-base, | |
| $font-cheltenham-xcond: $font-serif-base, | |
| $font-franklin: $font-sans-base, | |
| $font-franklin-cword: $font-sans-base, | |
| $font-franklin-small: $font-sans-base, | |
| $font-graphik: $font-sans-base, | |
| $font-graphik-xcond: $font-sans-base, | |
| $font-imperial: $font-sans-base, | |
| $font-karnak: $font-serif-base, | |
| $font-karnak-small: $font-serif-base, | |
| $font-magsans: $font-sans-base, | |
| $font-magserif: $font-serif-base, | |
| $font-magslab: $font-serif-base, | |
| $font-schnyder-s: $font-serif-base, | |
| $font-schnyder-scond: $font-serif-base, | |
| $font-stymie: $font-serif-base, | |
| $font-stymie-small: $font-serif-base | |
| ); | |
| @mixin font-size ($font-size, $line-height) { | |
| $new-size: ($font-size / $base-font-size); | |
| $new-line-height: ($line-height / $base-font-size); | |
| font-size: ($font-size + px); | |
| font-size: ($new-size + rem); | |
| line-height: ($line-height + px); | |
| line-height: ($new-line-height + rem); | |
| } | |
| @mixin font-family ($font-name, $font-weight: $font-weight-normal, $font-style: normal) { | |
| font-weight: $font-weight; | |
| font-style: $font-style; | |
| @if type-of($font-name) == list { | |
| font-family: $font-name; | |
| } @else { | |
| $fallback-stack: map-get($font-fallback-map, $font-name); | |
| @if $fallback-stack == null { | |
| $fallback-stack: $font-serif-base; | |
| } | |
| font-family: $font-name + '-' + $font-style + '-' + $font-weight, $fallback-stack; | |
| } | |
| } | |
| // shorthand for font-size / line-height / font-family / font-weight | |
| @mixin font ($font-family, $font-size, $line-height, $font-weight: $font-weight-normal, $font-style: normal) { | |
| @include font-size($font-size, $line-height); | |
| @include font-family($font-family, $font-weight, $font-style); | |
| } | |
| // shorthand for font-size / line-height / font-family / font-weight for print styles | |
| @mixin font-pt ($font-family, $font-size, $line-height, $font-weight: $font-weight-normal, $font-style: normal) { | |
| @include font-family($font-family, $font-weight, $font-style); | |
| font-size: ($font-size + pt); | |
| line-height: ($line-height + pt); | |
| } | |
| // typography test for p | |
| p, | |
| li, | |
| dt, | |
| dd { | |
| @include font($serif-base, 16, 23); | |
| } | |
| // old var name | |
| .headline { | |
| @include font-family($sans-franklin, $bold); | |
| } | |
| // new var name | |
| .headline { | |
| @include font-family($font-franklin, $font-weight-bold); | |
| } | |
| // old var name | |
| .summary { | |
| @include font($sans-franklin, 16, 18, $bold); | |
| } | |
| // old var name | |
| h2 { | |
| @include font($serif, 20, 22, $bold); | |
| } | |
| // new var name | |
| h2 { | |
| @include font($font-serif, 20, 22, $font-weight-bold); | |
| } | |
| // new var name | |
| h3 { | |
| @include font($font-serif, 15, 17, $bold); | |
| } | |
| $font-helvetica: helvetica, arial, sans-serif; | |
| .description { | |
| @include font-size(17, 22); | |
| font-family: helvetica, arial, sans-serif; | |
| } | |
| .description { | |
| @include font($font-helvetica, 17, 22); | |
| } | |
| .description { | |
| @include font($font-sans-base, 17, 22, $font-weight-bold); | |
| } | |
| // old var name | |
| .story-heading { | |
| @include font($serif-chelt-sh, 13, 16, $light); | |
| } | |
| /* new var name */ | |
| // whats the new font name for this?? | |
| .story-heading { | |
| @include font($font-cheltenham-small, 13, 16, $font-weight-light); | |
| } | |
| .story-heading { | |
| @include font($serif-chelt-sh, 13, 16, $light); | |
| } | |
| /* old var name */ | |
| .collection-heading { | |
| @include font($slab-mag, 28, 28, $bold); | |
| } | |
| /* new var name */ | |
| .collection-heading { | |
| @include font($font-magslab, 28, 28, $font-weight-bold); | |
| } | |
| // test print old var | |
| .deck { | |
| @include font-pt($serif-base, 24, 28, $bold); | |
| } | |
| // test new print var | |
| .deck { | |
| @include font-pt($font-serif-base, 24, 28, $bold); | |
| } | |
| // test print old var | |
| .story-heading { | |
| @include font-pt($serif-base, 27, 30, $medium); | |
| margin-bottom: 0.05in; | |
| } | |
| // test print new var | |
| .story-heading { | |
| @include font-pt($font-serif-base, 27, 30, $font-weight-light, italic); | |
| margin-bottom: 0.05in; | |
| } | |
| .story-addendum { | |
| font-style: italic; | |
| p { | |
| @include font($font-serif-base, 16, 23, $font-weight-normal, italic); | |
| } | |
| } | |
| .ad-label { | |
| @include font($font-franklin, 11, 25, $font-weight-medium); | |
| display: none; | |
| } | |
| .story-heading { | |
| @include font($serif-chelt, 32, 40, $bold, italic); | |
| } | |
| .story-sub-heading { | |
| @include font($serif-chelt, 26, 28, $bold, italic); | |
| } | |
| .story-sub-heading { | |
| @include font($serif-base, 16, 21, $bold, normal); | |
| } | |
| .story-sub-heading { | |
| @include font($serif-base, 26, 30, $bold, normal); | |
| } | |
| .collection-description { | |
| display: none; | |
| margin-top: 18px; | |
| margin-bottom: 19px; | |
| p { | |
| .tone-news & { | |
| @include font($serif-base, 13, 18, $normal); | |
| color: red; | |
| } | |
| } | |
| } // end collection-description | |
| .module { | |
| &:nth-last-child(-n+3)::not(1)::not(2) { | |
| flex-basis: 100%; | |
| } | |
| } | |
This file contains hidden or 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
| p, | |
| li, | |
| dt, | |
| dd { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 23px; | |
| line-height: 1.4375rem; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| } | |
| .headline { | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "nyt-franklin", arial, helvetica, sans-serif; | |
| } | |
| .headline { | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "franklin-normal-700", arial, helvetica, sans-serif; | |
| } | |
| .summary { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "nyt-franklin", arial, helvetica, sans-serif; | |
| } | |
| h2 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| line-height: 22px; | |
| line-height: 1.375rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "nyt-cheltenham", georgia, "times new roman", times, serif; | |
| } | |
| h2 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| line-height: 22px; | |
| line-height: 1.375rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "cheltenham-normal-700", georgia, "times new roman", times, serif; | |
| } | |
| h3 { | |
| font-size: 15px; | |
| font-size: 0.9375rem; | |
| line-height: 17px; | |
| line-height: 1.0625rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "cheltenham-normal-700", georgia, "times new roman", times, serif; | |
| } | |
| .description { | |
| font-size: 17px; | |
| font-size: 1.0625rem; | |
| line-height: 22px; | |
| line-height: 1.375rem; | |
| font-family: helvetica, arial, sans-serif; | |
| } | |
| .description { | |
| font-size: 17px; | |
| font-size: 1.0625rem; | |
| line-height: 22px; | |
| line-height: 1.375rem; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-family: helvetica, arial, sans-serif; | |
| } | |
| .description { | |
| font-size: 17px; | |
| font-size: 1.0625rem; | |
| line-height: 22px; | |
| line-height: 1.375rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: arial, helvetica, sans-serif; | |
| } | |
| .story-heading { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 300; | |
| font-style: normal; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| /* new var name */ | |
| .story-heading { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 300; | |
| font-style: normal; | |
| font-family: "cheltenham-small-normal-300", georgia, "times new roman", times, serif; | |
| } | |
| .story-heading { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 300; | |
| font-style: normal; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| /* old var name */ | |
| .collection-heading { | |
| font-size: 28px; | |
| font-size: 1.75rem; | |
| line-height: 28px; | |
| line-height: 1.75rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "nyt-mag-slab", georgia, "times new roman", times, serif; | |
| } | |
| /* new var name */ | |
| .collection-heading { | |
| font-size: 28px; | |
| font-size: 1.75rem; | |
| line-height: 28px; | |
| line-height: 1.75rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: "magslab-normal-700", georgia, "times new roman", times, serif; | |
| } | |
| .deck { | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| font-size: 24pt; | |
| line-height: 28pt; | |
| } | |
| .deck { | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| font-size: 24pt; | |
| line-height: 28pt; | |
| } | |
| .story-heading { | |
| font-weight: 500; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| font-size: 27pt; | |
| line-height: 30pt; | |
| margin-bottom: 0.05in; | |
| } | |
| .story-heading { | |
| font-weight: 300; | |
| font-style: italic; | |
| font-family: georgia, "times new roman", times, serif; | |
| font-size: 27pt; | |
| line-height: 30pt; | |
| margin-bottom: 0.05in; | |
| } | |
| .story-addendum { | |
| font-style: italic; | |
| } | |
| .story-addendum p { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 23px; | |
| line-height: 1.4375rem; | |
| font-weight: 400; | |
| font-style: italic; | |
| font-family: georgia, "times new roman", times, serif; | |
| } | |
| .ad-label { | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| line-height: 25px; | |
| line-height: 1.5625rem; | |
| font-weight: 500; | |
| font-style: normal; | |
| font-family: "franklin-normal-500", arial, helvetica, sans-serif; | |
| display: none; | |
| } | |
| .story-heading { | |
| font-size: 32px; | |
| font-size: 2rem; | |
| line-height: 40px; | |
| line-height: 2.5rem; | |
| font-weight: 700; | |
| font-style: italic; | |
| font-family: "nyt-cheltenham", georgia, "times new roman", times, serif; | |
| } | |
| .story-sub-heading { | |
| font-size: 26px; | |
| font-size: 1.625rem; | |
| line-height: 28px; | |
| line-height: 1.75rem; | |
| font-weight: 700; | |
| font-style: italic; | |
| font-family: "nyt-cheltenham", georgia, "times new roman", times, serif; | |
| } | |
| .story-sub-heading { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 21px; | |
| line-height: 1.3125rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| } | |
| .story-sub-heading { | |
| font-size: 26px; | |
| font-size: 1.625rem; | |
| line-height: 30px; | |
| line-height: 1.875rem; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| } | |
| .collection-description { | |
| display: none; | |
| margin-top: 18px; | |
| margin-bottom: 19px; | |
| } | |
| .tone-news .collection-description p { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-family: georgia, "times new roman", times, serif; | |
| color: red; | |
| } | |
| .module:nth-last-child(-n+3)::not(1)::not(2) { | |
| flex-basis: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment