html {font-size: 16px;}
|
|
|
|
body {
|
|
line-height: 1.45;
|
|
font-family: $font-2;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: map-get($colors, 1);
|
|
font-size: modular-scale(0);
|
|
}
|
|
|
|
h1, .h1 {
|
|
font-size: modular-scale(5);
|
|
font-family: $font-1;
|
|
line-height: 1;
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: modular-scale(4);
|
|
font-family: $font-1;
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: modular-scale(3);
|
|
font-family: $font-1;
|
|
}
|
|
|
|
h4, .h4 {
|
|
font-size: modular-scale(2);
|
|
font-family: $font-1;
|
|
margin-bottom: modular-scale(1);
|
|
}
|
|
|
|
h5, .h5 {
|
|
font-size: modular-scale(1);
|
|
font-family: $font-1;
|
|
}
|
|
|
|
p, .p {
|
|
font-size: modular-scale(0);
|
|
&.lead{
|
|
font-size: modular-scale(1);
|
|
}
|
|
}
|
|
|
|
h6, .h6 {
|
|
font-size: modular-scale(-1);
|
|
font-family: $font-1;
|
|
}
|
|
|
|
small, .small{font-size: modular-scale(-1);}
|
|
|
|
|
|
.dropcap::first-letter {
|
|
font-size: 3em;
|
|
float: left;
|
|
line-height: 0.92;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.test{
|
|
background-color: red;
|
|
}
|
|
|
|
// font-size helpers
|
|
$i : -1;
|
|
@while $i < 9 {
|
|
.fs-#{$i}{font-size: modular-scale($i) !important;}
|
|
$i: $i + 1;
|
|
}
|
|
@include mq($from: mobile) {
|
|
$i : -1;
|
|
@while $i < 9 {
|
|
.fs-sm-#{$i}{font-size: modular-scale($i) !important;}
|
|
$i: $i + 1;
|
|
}
|
|
}
|
|
@include mq($from: tablet) {
|
|
$i : -1;
|
|
@while $i < 9 {
|
|
.fs-md-#{$i}{font-size: modular-scale($i) !important;}
|
|
$i: $i + 1;
|
|
}
|
|
}
|
|
@include mq($from: desktop) {
|
|
$i : -1;
|
|
@while $i < 9 {
|
|
.fs-lg-#{$i}{font-size: modular-scale($i) !important;}
|
|
$i: $i + 1;
|
|
}
|
|
}
|
|
@include mq($from: wide) {
|
|
$i : -1;
|
|
@while $i < 9 {
|
|
.fs-xl-#{$i}{font-size: modular-scale($i) !important;}
|
|
$i: $i + 1;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Typography helpers
|
|
//
|
|
.font-1{
|
|
font-family: $font-1;
|
|
}
|
|
.font-2{
|
|
font-family: $font-2;
|
|
}
|
|
|
|
.lh-0{line-height: 0 !important;}
|
|
.lh-f1{line-height: 0.7 !important;}
|
|
.lh-f2{line-height: 0.85 !important;}
|
|
.lh-1{line-height: 1 !important;}
|
|
.lh-2{line-height: 1.15 !important;}
|
|
.lh-3{line-height: 1.3 !important;}
|
|
.lh-4{line-height: 1.45 !important;}
|
|
.lh-5{line-height: 1.6 !important;}
|
|
.lh-6{line-height: 1.75 !important;}
|
|
.lh-7{line-height: 1.9 !important;}
|
|
.lh-8{line-height: 2.05 !important;}
|
|
|
|
|
|
.fw-100{font-weight: 100 !important;}
|
|
.fw-200{font-weight: 200 !important;}
|
|
.fw-300{font-weight: 300 !important;}
|
|
.fw-400{font-weight: 400 !important;}
|
|
.fw-500{font-weight: 500 !important;}
|
|
.fw-600{font-weight: 600 !important;}
|
|
.fw-700{font-weight: 700 !important;}
|
|
.fw-800{font-weight: 800 !important;}
|
|
.fw-900{font-weight: 900 !important;}
|
|
|
|
.text-normal{text-transform: none !important;}
|
|
|
|
|
|
.ls{letter-spacing: 2px !important;}
|
|
|
|
|
|
ul{
|
|
&.bullet-inside{
|
|
list-style-position: inside;
|
|
}
|
|
&.bullet-none{
|
|
list-style: none;
|
|
}
|
|
}
|