108 lines
2.9 KiB
SCSS
108 lines
2.9 KiB
SCSS
// =============================================================================
|
|
// Typography
|
|
// =============================================================================
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Fonts
|
|
//------------------------------------------------------------------------------
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
|
|
|
|
@font-face {
|
|
font-family: '#{$icomoon-font-family}';
|
|
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w');
|
|
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w#iefix') format('embedded-opentype'),
|
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?6i2y1w') format('truetype'),
|
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6i2y1w') format('woff'),
|
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?6i2y1w##{$icomoon-font-family}') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: block;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
font-named-instance: 'Regular';
|
|
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
font-style: italic;
|
|
font-named-instance: 'Italic';
|
|
src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Font rendering
|
|
//------------------------------------------------------------------------------
|
|
html body{
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-family: Inter, Helvetica, sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// 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;
|
|
}
|