skillbox/client/src/styles/_typography.scss

114 lines
1.5 KiB
SCSS

@import 'variables';
@import 'functions';
@import 'mixins';
* {
font-size: $base-font-size;
font-weight: $font-weight-regular;
color: $color-charcoal-dark;
hyphens: auto;
}
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;
}
b,
b mark {
font-weight: bold;
}
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;
}
sup,
sub {
font-size: toRem(14px);
line-height: normal;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
.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;
}