sass-site/source/assets/css/foundation/_headings.scss

51 lines
1.3 KiB
SCSS

#{headings(1, 4)} { @extend %reset-margin; }
#{headings(1, 2)} {
@include font-size-large;
@include adjust-leading-to(1, $font-size-large);
font-weight: $font-weight-light;
letter-spacing: -0.03125em;
color: $color-accent;
@include breakpoint($tablet-small) { @include font-size-x-large; }
@include breakpoint($tablet-large) { @include font-size-xx-large; }
}
h1 {
font-weight: $font-weight-light;
color: $color-text-heading;
@include breakpoint($screen-small) { @include font-size-xxx-large; }
@include breakpoint($screen-large) { @include font-size-xxxx-large; }
}
h2 {
@include padding-leader(2, $font-size-large);
@include padding-trailer(1, $font-size-large);
.main &:first-child { padding-top: 0; }
@include breakpoint($tablet-small) {
@include padding-leader(2, $font-size-x-large);
@include padding-trailer(1, $font-size-x-large);
}
@include breakpoint($tablet-large) {
@include padding-leader(2, $font-size-xx-large);
@include padding-trailer(1, $font-size-xx-large);
}
}
h2,
h3 { font-family: $font-family-display; }
#{headings(3, 4)} {
@include padding-leader(1.5);
@include padding-trailer(.5);
@include font-size-regular;
font-weight: $font-weight-bold;
text-transform: uppercase;
letter-spacing: .03125em;
color: $color-text-weak;
}