123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- $baseFontSize: 22;
- $baseLineHeight: 1.5;
- $leading: $baseLineHeight * 1rem;
- $scale: 1.333;
- $font-XXS: 0.563rem;
- $font-XS: 0.75rem;
- $font-S: 1rem;
- $font-M: 1.333rem;
- $font-L: 1.777rem;
- $font-XL: 2.369rem;
- $font-XXL: 3.157rem;
- $font-XXXL: 4.209rem;
- $font-XXXXL: 5.61rem;
- $body-primary-font: 'Source Serif Pro', serif;
- $title-primary-font: 'PT Sans', sans-serif;
- $title-secondary-font: 'Roboto', sans-serif;
- html {
-
- font-family: $body-primary-font;
- font-size: $baseFontSize / 16 * 100%;
- font-weight: 400;
- color: $text-color;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- font-feature-settings: "kern" 1;
- -webkit-font-feature-settings: "kern";
- -moz-font-feature-settings: "kern";
- -moz-font-feature-settings: "kern=1";
-
-
-
-
-
- }
- p {
- line-height: $leading;
- letter-spacing: .01rem;
- margin-top: $leading;
- margin-bottom: 0;
- }
- p.u--startsWithDoubleQuote {
- text-indent: -0.43em;
- }
- ul,
- ol {
- margin-top: $leading;
- margin-bottom: $leading;
- padding-left: 22px;
- li {
- line-height: $leading;
- }
- ul,
- ol {
- margin-top: 0;
- margin-bottom: 0;
- }
- }
- blockquote {
- line-height: $leading;
- font-style: italic;
- padding-left: 25px;
- margin-left: -29px;
- border-left: 4px solid $black;
- @media (max-width: $screen-xs-max) {
- padding-left: 15px;
- margin-left: -19px;
- }
- &.u--startsWithDoubleQuote {
- text-indent: -0.40em;
- }
- &.largeQuote {
- line-height: 1.4;
- text-align: center;
- font-size: $font-L;
- margin: $leading -160px 0;
- padding-left: 0;
- border-left: 0;
- @media (max-width: $screen-xs-max) {
- margin: $leading 0 0;
- font-size: $font-M;
- padding-left: 0;
- }
- a {
- background-position: 0 42px;
- }
- }
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
-
- font-family: $title-primary-font;
- margin-top: $leading;
- margin-bottom: 0;
- line-height: $leading;
- letter-spacing: -0.02em;
- }
- h1 {
- font-size: 3 * $scale * 1rem;
- line-height: 3 * $leading;
- margin-top: 2 * $leading;
- }
- h2 {
- font-family: $title-secondary-font;
- font-size: 2 * $scale * 1rem;
- line-height: 2 * $leading;
- margin-top: 2 * $leading;
- font-weight: 300;
- }
- h3 {
-
- line-height: 1.34 * $leading;
- margin-top: 1.33 * $leading; */
- font-size: $font-L;
- line-height: 2.18rem;
- margin-top: 1.7rem;
- }
- h4 {
- font-size: 1 * $scale * 1rem;
- }
- h5 {
- font-size: 0.8 * $scale * 1rem;
- }
- h6 {
- font-size: 0.7 * $scale * 1rem;
- }
- a {
- color: $link-color;
- text-decoration: none;
- background-image: linear-gradient(to bottom, rgba($link-color,0) 75%, rgba($link-color,0.8) 75%);
- background-repeat: repeat-x;
- background-position: 0 22px;
- background-size: 2px 2px;
- &:hover {
- color: $link-hover-color;
- }
- }
- table {
- margin-top: $leading;
- border-spacing: 0px;
- border-collapse: collapse;
- }
- td,
- th {
- padding: 0;
- line-height: $baseLineHeight * $baseFontSize - 0px;
- }
- code {
-
- vertical-align: bottom;
- }
- hr {
- border-color: #d5d5d5;
- padding: 0;
- border-top: 0;
- border-left: 0;
- border-right: 0;
- margin: $leading 0;
- }
- .lead {
- font-size: $scale * 1rem;
- }
- .hug {
- margin-top: 0;
- }
- .container--content {
- max-width: 700px;
- }
- .is-darkBackgrounded,
- .is-darkBackgrounded a,
- .is-darkBackgrounded a:hover,
- .is-darkBackgrounded a:visited {
- color: #fff;
- }
|