// change the second parameter to set a different font cap-height preset // baseline calculation = font-size * (line-height - cap-height) / 2 // $cap-height: map-get($cap-heights, helvetica-neue);

$cap-heights: (

helvetica-neue: 0.73,
helvetica: 0.71,
arial: 0.71,
telegrotesk-screen: 0.75,
gilroy: 0.74,
courier-new: 0.71,

) !default;

@import url(“fonts.googleapis.com/css?family=Dosis:700”);

$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; $font-headers: 'Dosis', sans-serif; $font-code: 'Courier New', monospace;

html {

box-sizing: border-box;
font-family: $font-family;
font-size: $base-fontsize;
line-height: 2rem;
font-weight: 400;
overflow-x: hidden;
vertical-align: bottom;

}

body {

font-size: 2rem;

}

// Font size function @function _font-size($level: 0, $scale: $scale-mobile) {

$value: 1;
@if $level > 0 {
        @for $i from 1 through $level {
                $value: $value * $scale;
        }
}
@return $value;

} // Font size getter @function font-size($level: 0, $scale: $scale-mobile) {

@return rem-to-px(_font-size($level, $scale));

}

// Line height function @function _line-height($font-size: 1) {

@return ceil($font-size + 0.3);

} // Line height getter @function line-height($font-size: 1, $scale: $scale-mobile) {

@return rem-to-px(_line-height(_font-size($font-size, $scale)));

}

// 16 24 6 // font-size * (line-height - cap-height) / 2 // 16 * (24 - (16 * 0.73)) / 2 // 16 * 12.48 / 2 // 197.12 / 2 // 98.56 @function padding-top($font-size: 2, $cap-height: 0.72) {

@return ceil(($font-size - $cap-height) / 2 * 10) / 10 * 1rem;

} @function padding-bottom($font-size: 2, $cap-height: 0.72) {

@return 1rem - padding-top($font-size, $cap-height);

}

// Heading default styles @mixin heading() {

color: $color-headings;
font-family: $font-headers;
font-weight: 700;
letter-spacing: -.0075em;
margin: 4rem 0 0 0;

}

h1 {

@include heading();
font-size: font-size(6);
line-height: line-height(6);

@media(min-width: 767px) {
        font-size: font-size(6, $scale-tablet);
        line-height: line-height(6, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(6, $scale-desktop);
        line-height: line-height(6, $scale-desktop);
}

}

h2 {

@include heading();
font-size: font-size(5);
line-height: line-height(5);

@media(min-width: 767px) {
        font-size: font-size(5, $scale-tablet);
        line-height: line-height(5, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(5, $scale-desktop);
        line-height: line-height(5, $scale-desktop);
}

}

h3 {

@include heading();
font-size: font-size(4);
line-height: line-height(4);

@media(min-width: 767px) {
        font-size: font-size(4, $scale-tablet);
        line-height: line-height(4, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(4, $scale-desktop);
        line-height: line-height(4, $scale-desktop);
}

}

h4 {

@include heading();
font-size: font-size(3);
line-height: line-height(3);

@media(min-width: 767px) {
        font-size: font-size(3, $scale-tablet);
        line-height: line-height(3, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(3, $scale-desktop);
        line-height: line-height(3, $scale-desktop);
}

}

h5 {

@include heading();
font-size: font-size(2);
line-height: line-height(2);

@media(min-width: 767px) {
        font-size: font-size(2, $scale-tablet);
        line-height: line-height(2, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(2, $scale-desktop);
        line-height: line-height(2, $scale-desktop);
}

}

h6 {

@include heading();
font-size: font-size(1);
line-height: line-height(1);

@media(min-width: 767px) {
        font-size: font-size(1, $scale-tablet);
        line-height: line-height(1, $scale-tablet);
}

@media(min-width: 1024px) {
        font-size: font-size(1, $scale-desktop);
        line-height: line-height(1, $scale-desktop);
}

}

p {

font-size: 2rem;
line-height: 3rem;
padding-top: padding-top();
padding-bottom: padding-bottom();
margin-bottom: 2rem;

}

ul, ol {

font-size: 2rem;
line-height: 3rem;
padding-left: 2rem;

}

ul li, ol li {

padding-left: 2em;

}

hr {

border: 0;
border-bottom: 4px solid #dfdfdf;
max-width: 4rem;
padding-top: calc(2rem - 4px);
margin-bottom: 2rem;

}

br {

line-height: 2rem;

}

blockquote {

line-height: 4rem;
padding-left: 2rem;
border-left: 4px solid $color-secondary;
font-style: italic;

} @media (min-width: 1024px) {

blockquote {
        margin-left: -2rem;
}

}

pre {

font-family: "Courier New", monospace;
background: #eee;
overflow-x: scroll;
border-radius: 3px;
font-size: 1.8rem;
margin-bottom: 1.3rem;
padding-bottom: 1.2rem;
padding-top: 1.5rem;
padding-left: 2rem;
padding-right: 2rem;
line-height: 4rem;

}

div {

line-height: 2rem;

}

a {

text-decoration: none;
color: $color-secondary;
transition: all .1s ease-out;

}

a:hover {

color: darken($color-secondary, 25%);

}

.text {

// background: rgba(blue, 0.2);
padding-top: 13px;
padding-bottom: 3px;
vertical-align: baseline;
line-height: 32px !important;

}