app/assets/stylesheets/fonts.scss
$brand: "Montserrat", "Helvetica", sans-serif;
$body-text: "Fira Sans", "Helvetica", sans-serif;
.monospace{
font-family: "Fira Mono", monospace;
font-size: 1.1rem;
}
.brand {
font-family: $brand;
font-weight: 300;
}
html {
font-family: $body-text;
background-color: #fcfcfc;
font-weight: 300;
}
h1 {
@extend .brand;
text-align: center;
@media screen and (max-width: 992px){
font-size: 3rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
@media screen and (max-width: 600px){
font-size: 2.5rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
}
h2 {
@extend .dark-text, .brand;
font-weight: 700;
@media screen and (max-width: 992px){
font-size: 2.2rem;
}
@media screen and (max-width: 600px){
font-size: 2.2rem;
}
}
h3 {
@extend .dark-text, .brand;
font-weight: 700;
@media screen and (max-width: 992px){
font-size: 2rem;
line-height: 2rem;
}
@media screen and (max-width: 600px){
font-size: 2rem;
line-height: 2rem;
}
}
h4{
@extend .dark-text, .brand;
font-weight: 700;
@media screen and (max-width: 992px){
font-size: 1.6rem;
line-height: 2.2rem;
}
@media screen and (max-width: 600px){
font-size: 1.6rem;
line-height: 2.2rem;
}
}
h5{
@extend .dark-text, .brand;
font-weight: 700;
@media screen and (max-width: 992px){
font-size: 1.4rem;
}
@media screen and (max-width: 600px){
font-size: 1.4rem;
}
}
h6{
@extend .dark-text, .brand;
font-weight: 700;
font-size: 1.2rem;
}
p {
@extend .dark-text.secondary;
line-height: 1.7rem;
font-size: 1.2rem;
font-weight: 400;
text-align: left;
}
code {
@extend .monospace;
}
pre {
@extend .monospace;
padding: 2rem;
padding-left: 4rem;
}
table {
font-size: 1.5rem;
}
footer{
h5{
color: $secondary-color;
font-weight: 400;
font-size: 1.5rem;
}
a, div{
@extend .light-text;
}
}
.input-field label {
@media screen and (max-width: 660px){
top: 0.5rem;
font-size: 0.8rem;
}
}