_fonts.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. @font-face {
  2. font-family: 'opensans';
  3. src: url('../fonts/OpenSans-Light.ttf') format('truetype');
  4. font-weight: 200;
  5. font-style: normal;
  6. }
  7. @font-face {
  8. font-family: 'opensans';
  9. src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
  10. font-weight: 400;
  11. font-style: italic;
  12. }
  13. @font-face {
  14. font-family: 'opensans';
  15. src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  16. font-weight: 400;
  17. font-style: normal;
  18. }
  19. @font-face {
  20. font-family: 'opensans';
  21. src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
  22. font-weight: 600;
  23. font-style: normal;
  24. }
  25. @font-face {
  26. font-family: 'opensans';
  27. src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
  28. font-weight: 800;
  29. font-style: normal;
  30. }
  31. @font-face {
  32. font-family: 'opensans';
  33. src: url('../fonts/OpenSans-ExtraBold.ttf') format('truetype');
  34. font-weight: 1000;
  35. font-style: normal;
  36. }
  37. /*font size*/
  38. // $body : 1rem;
  39. $maxi:36px;
  40. // $big:26px;
  41. $big:1rem;
  42. //$normal:18px;
  43. $normal: .6rem ;
  44. $small:12px;
  45. @media (min-width: 48rem) {
  46. :root {
  47. font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  48. /* .48rem = viewportWidthMinimum /100 */
  49. /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
  50. }
  51. }
  52. @media (min-width: 120em) {
  53. :root {
  54. font-size: 2rem;
  55. }
  56. }