skillbox/client/src/styles/_typography.scss

86 lines
1.3 KiB
SCSS

@import "variables";
@import "functions";
@import "mixins";
* {
font-size: $base-font-size;
font-weight: $font-weight-regular;
color: $color-charcoal-dark;
}
h1, h2, h3, h4, h5 {
font-family: $sans-serif-font-family;
font-weight: 600;
color: $header-color
}
p, a, li {
font-family: $serif-font-family;
font-size: toRem(18px);
font-weight: 300;
}
p {
line-height: 1.5;
margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
}
a {
font-size: toRem(18px);
box-sizing: border-box;
}
h1 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 21px;
@include desktop {
font-size: 4rem; // 64px
line-height: 4.5rem;
margin-bottom: 20px;
}
}
h2 {
font-size: 2.75rem; // 44px
margin-bottom: $large-spacing;
}
h3 {
font-size: 2.125rem; // 34px
margin-bottom: $large-spacing;
}
h4 {
font-size: 1.5rem; // 24px
margin-bottom: $large-spacing;
}
h5 {
font-size: 1.125rem; // 18px
margin-bottom: $large-spacing;
}
input, textarea, select, button {
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
box-sizing: border-box;
}
.small-emph {
font-size: toRem($base-font-size-pixels);
margin-bottom: 7.5px;
font-weight: 600;
}
.inline-title {
@include inline-title;
}
.hep-link {
font-family: $sans-serif-font-family;
color: $color-brand-dark;
}