SiteWebAstrolabe/src/scss/_typography.scss
2020-06-19 23:47:44 +02:00

95 lines
2.1 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('/preprod/fonts/varela-round-v12-latin-regular.woff') format('woff');
}
/* varela-regular - latin */
@font-face {
font-family: 'Varela';
font-style: normal;
font-weight: 400;
src: local('Varela'),
url('/preprod/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;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('/preprod/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;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('/preprod/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;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('/preprod/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;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('/preprod/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: $line-height / ($line-height * 0 + 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);
}
@include media-query('md') {
// h1 {
// font-size: get-size(900);
// }
// h2 {
// font-size: get-size(800);
// }
// h3 {
// font-size: get-size(700);
// }
}