skill-assessment-app/app/assets/stylesheets/atoms/_typography.scss
2016-07-31 14:27:37 -05:00

75 lines
1.2 KiB
SCSS

body {
color: $base-font-color;
font-family: $primary-font-face;
font-size: 1rem;
line-height: $base-line-height;
font-weight:300;
color: $primary-color;
}
.hidden {
display: none !important;
}
h1, h2, h3,
h4, h5, h6 {
font-family: $heading-font-face;
line-height: $heading-line-height;
margin: 0 0 $small-spacing;
color: $black;
font-weight: bold;
}
h1 { font-size: modular-scale(6); }
h2 { font-size: modular-scale(5); }
h3 { font-size: modular-scale(4); }
h4 { font-size: modular-scale(3); }
h5 { font-size: modular-scale(2); }
h6 { font-size: modular-scale(1); }
p { margin: 0 0 $small-spacing; }
a {
color: $primary-color;
transition: color $base-duration $base-timing;
&:active,
&:focus,
&:hover {
color: lighten($primary-color, 25%);
}
}
hr {
border-bottom: $base-border;
border-left: 0;
border-right: 0;
border-top: 0;
margin: $base-spacing 0;
}
.prft-heading {
text-transform: none;
}
.question-text {
margin-bottom: 1.5rem;
}
.prft-heading,
.question-text {
font-size: 6vw;
}
h1 > a {
font-size: 1rem;
font-weight: 300;
}
@media screen and (min-width: $screen-sm) {
.prft-heading,
.question-text {
font-size: 2.45rem;
}
}