127 lines
2.1 KiB
SCSS
127 lines
2.1 KiB
SCSS
////////////////////
|
|
// Font Imports
|
|
////////////////////
|
|
|
|
// Source Sans Pro + Source Code Pro
|
|
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:400,400i,700&display=swap');
|
|
|
|
$sans-serif: 'Source Sans Pro', sans-serif;
|
|
$monospace: 'Source Code Pro', monospace;
|
|
|
|
////////////////////
|
|
// Available Weights
|
|
////////////////////
|
|
|
|
// Source Sans Pro
|
|
// Regular: 400
|
|
// Regular Italic: 400i
|
|
// Bold: 700
|
|
|
|
// Source Code Pro
|
|
// Regular: 400
|
|
// Bold: 700
|
|
|
|
.sans-serif {
|
|
font-family: $sans-serif !important;
|
|
}
|
|
|
|
.monospace {
|
|
font-family: $monospace !important;
|
|
}
|
|
|
|
////////////////////
|
|
// Body
|
|
////////////////////
|
|
|
|
body {
|
|
@extend .sans-serif;
|
|
font-size: 100%;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: $slate-800;
|
|
}
|
|
|
|
// body text reset
|
|
p,
|
|
address,
|
|
ul,
|
|
ol {
|
|
margin: 0 0 1em 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
////////////////////
|
|
// Headings
|
|
////////////////////
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: 700;
|
|
line-height: 1.25em;
|
|
margin: 0 0 .5em 0;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
h1,
|
|
.h1 {
|
|
font-size: rem-calc(28px);
|
|
@media (min-width: $bp-md) { font-size: rem-calc(34px);}
|
|
@media (min-width: $bp-lg) { font-size: rem-calc(36px);}
|
|
}
|
|
|
|
h2,
|
|
.h2 {
|
|
font-size: rem-calc(22px);
|
|
@media (min-width: $bp-md) { font-size: rem-calc(24px);}
|
|
@media (min-width: $bp-lg) { font-size: rem-calc(30px);}
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
font-size: rem-calc(22px);
|
|
@media (min-width: $bp-md) { font-size: rem-calc(24px);}
|
|
}
|
|
|
|
h4,
|
|
.h4 {
|
|
font-size: rem-calc(18px);
|
|
@media (min-width: $bp-md) { font-size: rem-calc(20px);}
|
|
}
|
|
|
|
h5,
|
|
.h5 {
|
|
font-size: rem-calc(16px);
|
|
@media (min-width: $bp-lg) { font-size: rem-calc(18px);}
|
|
}
|
|
|
|
h6,
|
|
.h6 {
|
|
font-size: rem-calc(16px);
|
|
}
|
|
|
|
////////////////////
|
|
// Links
|
|
////////////////////
|
|
|
|
$link-color: $teal;
|
|
|
|
a {
|
|
color: $link-color;
|
|
text-decoration: underline;
|
|
text-decoration-color: transparent;
|
|
text-underline-offset: .15em;
|
|
text-decoration-thickness: .1em;
|
|
transition: 0.2s all ease-in-out;
|
|
transition-property: color, text-decoration;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
a.active {
|
|
text-decoration-color: currentColor;
|
|
}
|