116 lines
1.7 KiB
SCSS
116 lines
1.7 KiB
SCSS
@import 'vars';
|
|
@import 'structure';
|
|
|
|
/////////////////////////////
|
|
// HEADINGS
|
|
/////////////////////////////
|
|
|
|
%h1, %h2, %h3, %h4, %h5 {
|
|
font-family: $font-brand;
|
|
font-weight: 700;
|
|
color: lighten($black, 4%);
|
|
}
|
|
|
|
%jumbo {
|
|
font-size: rem(2.5);
|
|
line-height: 1;
|
|
margin: 0 0 rem(2);
|
|
}
|
|
|
|
%h1 {
|
|
margin: 0 0 rem(1);
|
|
font-size: rem(1);
|
|
line-height: rem(1);
|
|
|
|
@include small-break {
|
|
letter-spacing: rem(0);
|
|
font-size: rem(1.25);
|
|
line-height: rem(1.25);
|
|
}
|
|
}
|
|
|
|
%h2 {
|
|
margin: 0 0 rem(1);
|
|
font-size: rem(.7);
|
|
line-height: rem(.75);
|
|
letter-spacing: 0;
|
|
|
|
@include small-break {
|
|
font-size: rem(.85);
|
|
line-height: rem(.85);
|
|
}
|
|
}
|
|
|
|
%h3 {
|
|
margin: 0 0 rem(1);
|
|
font-size: rem(1);
|
|
line-height: 1.25;
|
|
font-weight: 500;
|
|
|
|
@include small-break {
|
|
font-size: rem(.65);
|
|
line-height: rem(.75);
|
|
}
|
|
}
|
|
|
|
%h4 {
|
|
margin: 0 0 $base;
|
|
font-size: rem(.75);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
%h5 {
|
|
margin: 0;
|
|
font-size: rem(.5);
|
|
line-height: 1.5;
|
|
font-weight: 700;
|
|
}
|
|
|
|
%small {
|
|
margin: 0;
|
|
font-size: rem(.4);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/////////////////////////////
|
|
// TYPE STYLES
|
|
/////////////////////////////
|
|
|
|
%uppercase-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: rem(.1);
|
|
font-size: rem(.3);
|
|
font-family: $font-label;
|
|
-webkit-font-smoothing: auto;
|
|
|
|
@include mid-break {
|
|
font-size: rem(.31);
|
|
letter-spacing: rem(.05);
|
|
}
|
|
}
|
|
|
|
%large-body {
|
|
font-size: rem(.6);
|
|
line-height: rem(1);
|
|
letter-spacing: rem(.02);
|
|
|
|
@include mid-break {
|
|
font-size: rem(.7);
|
|
line-height: rem(1);
|
|
}
|
|
|
|
@include small-break {
|
|
font-size: rem(.55);
|
|
line-height: rem(.75);
|
|
}
|
|
}
|
|
|
|
%code {
|
|
font-size: rem(.4);
|
|
color: $gray;
|
|
|
|
span {
|
|
color: $black;
|
|
}
|
|
}
|