82 lines
1.9 KiB
SCSS
82 lines
1.9 KiB
SCSS
// =============================================================================
|
|
// Typography
|
|
// =============================================================================
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Fonts
|
|
//------------------------------------------------------------------------------
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
|
@font-face {
|
|
font-family: 'icomoon';
|
|
src: url('fonts/icomoon.woff2') format('woff2'),
|
|
url('fonts/icomoon.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: block;
|
|
}
|
|
|
|
html body{
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Headings
|
|
//------------------------------------------------------------------------------
|
|
// Increase Inter's readability when used for huge titles.
|
|
@for $i from 1 through 4 {
|
|
.display-#{$i}, h#{$i}, .h#{$i} {
|
|
letter-spacing: (3 - $i) * -0.01em; // eg: display-1 -> -0.02em;
|
|
}
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Font weight
|
|
//------------------------------------------------------------------------------
|
|
b, strong{
|
|
font-weight: $fw_bold;
|
|
}
|
|
|
|
a {
|
|
font-weight: $fw_semibold;
|
|
}
|
|
|
|
.fw_extralight {
|
|
font-weight: $fw_extralight;
|
|
}
|
|
|
|
.fw_light {
|
|
font-weight: $fw_light;
|
|
}
|
|
|
|
.fw_extralight, .fw_light{
|
|
label, b, strong, a {
|
|
font-weight: $fw_regular;
|
|
}
|
|
}
|
|
|
|
.fw_regular {
|
|
font-weight: $fw_regular;
|
|
}
|
|
|
|
.fw_medium {
|
|
font-weight: $fw_medium;
|
|
}
|
|
|
|
.fw_semibold {
|
|
font-weight: $fw_semibold;
|
|
}
|
|
|
|
.fw_bold {
|
|
font-weight: $fw_bold;
|
|
}
|
|
|
|
.fw_extrabold {
|
|
font-weight: $fw_extrabold;
|
|
}
|
|
|
|
.fw_black {
|
|
font-weight: $fw_black;
|
|
}
|