consul/website/source/assets/stylesheets/consul-connect/_typography.scss

99 lines
1.3 KiB
SCSS

.consul-connect {
// TODO - root is set to 10px
ul,
p {
font-size: 1.6rem;
line-height: 1.75;
margin: 1rem 0;
@media (min-width: 992px) {
font-size: 1.8rem;
}
}
a:hover {
text-decoration: none;
}
h3,
h2,
h1 {
font-family: $font-family-klavika;
font-kerning: normal;
font-weight: 500;
}
h1,
.h1 {
font-size: 3.2rem;
font-weight: 600;
line-height: 1.2em;
@media (min-width: 768px) {
font-size: 4rem;
}
@media (min-width: 992px) {
font-size: 5.6rem;
}
}
h2,
.h2 {
font-size: 2.5em;
font-weight: 600;
margin: 1em 0;
line-height: 1.3em;
@media (max-width: 700px) {
font-size: 2.2em;
}
}
h3,
.h3 {
font-family: $font-family-open-sans;
font-weight: 600;
font-size: 1.8rem;
line-height: 1.5em;
margin: 1em 0;
@media (min-width: 768px) {
font-size: 2rem;
}
@media (min-width: 992px) {
font-size: 2.4rem;
}
&.lighter {
font-weight: 100;
}
}
h6,
.h6 h5,
.h5 h4,
.h4 {
font-family: $font-family-open-sans;
font-weight: 600;
}
h4,
.h4 {
font-size: 2.2rem;
font-weight: 600;
}
h5,
.h5 {
font-size: 1.25em;
}
h6,
.h6 {
font-size: 1.125em;
margin: 1em 0;
}
}