SiteWebAstrolabe/src/scss/_typography.scss

100 lines
2.2 KiB
SCSS

/* varela-round-regular - latin */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Varela Round Regular'), local('VarelaRound-Regular'),
url('/fonts/varela-round-v12-latin-regular.woff') format('woff');
}
/* varela-regular - latin */
@font-face {
font-family: 'Varela';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Varela'),
url('/fonts/varela-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-300 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('/fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('/fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-600 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('/fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('/fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
}
body {
$line-height: get-size(600);
@include apply-utility('font', 'base');
// Strip the unit off the size ratio to generate a line height
line-height: calc($line-height / 1);
}
h1,
h2 {
@include apply-utility('font', 'brand');
}
h1 {
font-size: 2.125rem;
line-height: 1.4;
font-weight: 400;
}
h2 {
font-size: 1.5rem;
font-weight: 400;
}
h3 {
font-size: get-size(500);
}
@media (max-width: 575.98px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
// h3 {
// font-size: get-size(700);
// }
}