// *** Variables *** @import “plumber”;
/* $header-font: ('Source Sans Pro', sans-serif); $header-baseline: 0.144500;
$body-font: ('Source Sans Pro', sans-serif); $body-baseline: 0.144500;
$gh: 1rem;
// COLOURS $color-medium: #303030;
// FONT WEIGHTS $ultraLight: 200; $light: 300; $normal: 400; $semiBold: 500; $bold: 600; $ultraBold: 900;
*/
@include plumber-set-defaults(
$font-size: 1, $baseline: $body-baseline, $grid-height: $gh
);
html {
font-size: 6px; font-family: $body-font; font-weight: $normal; color: $color-medium; @media (max-width: 550px) { font-size: 5px; } @media (min-width: 767px) { font-size: 7px; } @media (min-width: 1024px) { font-size: 8px; }
}
body {
font-size: 16px;
}
.article {
// HEADINGS .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { font-family: $header-font; font-style: normal; font-weight: $bold; letter-spacing: normal; opacity: 0.9; // WEIGHT VARIANTS &.ultraLight { font-weight: $ultraLight; } &.light { font-weight: $light; } &.normal { font-weight: $normal; } &.semiBold { font-weight: $semiBold; letter-spacing: -.05em } &.bold { font-weight: $bold; letter-spacing: -.04em } &.ultraBold { font-weight: $ultraBold; letter-spacing: -.03em } } // H1 .h1, h1 { @include plumber( $font-size: 8.4, $line-height: 10, $leading-top: 8, $leading-bottom: 2, $baseline: $header-baseline ); // SIZE VARIANTS &.small { @include plumber( $font-size: 6.4, $line-height: 6, $leading-top: 4, $leading-bottom: 2, $baseline: $header-baseline ); } &.large { @include plumber( $font-size: 9.6, $line-height: 10, $leading-top: 8, $leading-bottom: 4, $baseline: $header-baseline ); } &.huge { @include plumber( $font-size: 14.6, $line-height: 15, $leading-top: 10, $leading-bottom: 4, $baseline: $header-baseline ); } } // H2 .h2, h2 { @include plumber( $font-size: 7.4, $line-height: 8, $leading-top: 6, $leading-bottom: 2, $baseline: $header-baseline ); // SIZE VARIANTS &.small { @include plumber( $font-size: 5.6, $line-height: 6, $leading-top: 4, $leading-bottom: 0, $baseline: $header-baseline ); } &.large { @include plumber( $font-size: 8.8, $line-height: 9, $leading-top: 6, $leading-bottom: 2, $baseline: $header-baseline ); } &.huge { @include plumber( $font-size: 11.2, $line-height: 12, $leading-top: 8, $leading-bottom: 2, $baseline: $header-baseline ); } } // H3 .h3, h3 { @include plumber( $font-size: 6.4, $line-height: 8, $leading-top: 4, $leading-bottom: 0, $baseline: $header-baseline ); // SIZE VARIANTS &.small { @include plumber( $font-size: 4.8, $line-height: 6, $leading-top: 2, $leading-bottom: 0, $baseline: $header-baseline ); } &.large { @include plumber( $font-size: 8, $line-height: 10, $leading-top: 4, $leading-bottom: 1, $baseline: $header-baseline ); } &.huge { @include plumber( $font-size: 9.6, $line-height: 10, $leading-top: 6, $leading-bottom: 2, $baseline: $header-baseline ); } } // H4 .h4, h4 { @include plumber( $font-size: 5.2, $line-height: 6, $leading-top: 4, $leading-bottom: 0, $baseline: $header-baseline ); } // H5 .h5, h5 { @include plumber( $font-size: 4.4, $line-height: 6, $leading-top: 4, $leading-bottom: 0, $baseline: $header-baseline ); } // H6 .h6, h6 { @include plumber( $font-size: 3.6, $line-height: 4, $leading-top: 4, $leading-bottom: 0, $baseline: $header-baseline ); } // P p, .p, .p:not(.hero)+p, p:not(.hero)+p { @include plumber( $font-size: 3.5, $line-height: 5, $leading-top: 0, $leading-bottom: 2, $baseline: $body-baseline ); text-rendering: optimizeLegibility; // SIZE VARIANTS &.micro { @include plumber( $font-size: 2.6, $line-height: 4, $leading-top: 2, $leading-bottom: 0, $baseline: $body-baseline ); } &.small { @include plumber( $font-size: 3, $line-height: 4, $leading-top: 2, $leading-bottom: 0, $baseline: $body-baseline ); } &.hero { @include plumber( $font-size: 5, $line-height: 6, $leading-top: 2, $leading-bottom: 4, $baseline: $body-baseline ); font-weight: $light; letter-spacing: -0.16rem; } } //.slide:not(.whiteSlide) p.hero {font-weight: 400;} // ELEMENTS & strong { font-weight: $bold; } & em { font-weight: $semiBold; } & li { @include plumber( $font-size: 3.5, $line-height: 4, $leading-top: 0, $leading-bottom: 1, $baseline: $body-baseline ); opacity: 0.8; } // LISTS & ul, & ol { margin: 4rem 4rem 4rem 8rem; } & ul li { list-style: disc; } & ol li { list-style: decimal; } // BLOCKQUOTE & blockquote { @include plumber( $font-size: 3.2, $line-height: 4, $leading-top: 6, $leading-bottom: 5, $baseline: $body-baseline ); padding-left: 4rem; padding-right: 4rem; margin-left: 4rem; margin-right: 4rem; padding-top: 1rem; padding-bottom: 1rem; opacity: 0.9; border-left: 5px solid #EEE; } // Quote & q { @include plumber( $font-size: 3.2, $line-height: 4, $leading-top: 6, $leading-bottom: 6, $baseline: $body-baseline ); padding-left: 4rem; padding-right: 4rem; opacity: 0.9; display: block; } & q:before, & q:after { font-size: 5rem; line-height: 0.1rem; vertical-align: -1rem; } & q:before { content: "“"; margin-right: 1rem; } & q:after { content: "”"; margin-left: 1rem; }
}
.article p, .article li {
// Make font-weight lighter on larger screens @media (min-width: 768px) { font-weight: $light; }
}
// Make headings lighter on small screens .article h1, .article .h2, .article .h3, .article h4, .article h5, .article h6 {
@media (max-width: 550px) { opacity: 0.8; }
}