_typography.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. a {
  2. text-decoration: none;
  3. }
  4. html{
  5. line-height: 1.5;
  6. @media only screen and (min-width: 0) {
  7. font-size: 14px;
  8. }
  9. @media only screen and (min-width: $medium-screen) {
  10. font-size: 14.5px;
  11. }
  12. @media only screen and (min-width: $large-screen) {
  13. font-size: 15px;
  14. }
  15. font-family: $font-stack;
  16. font-weight: normal;
  17. color: $off-black;
  18. }
  19. h1, h2, h3, h4, h5, h6 {
  20. font-weight: 400;
  21. line-height: 1.3;
  22. }
  23. // Header Styles
  24. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
  25. h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
  26. h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
  27. h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
  28. h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
  29. h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
  30. h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;}
  31. // Text Styles
  32. em { font-style: italic; }
  33. strong { font-weight: 500; }
  34. small { font-size: 75%; }
  35. .light { font-weight: 300; }
  36. .thin { font-weight: 200; }
  37. .flow-text{
  38. $i: 0;
  39. @while $i <= $intervals {
  40. @media only screen and (min-width : 360 + ($i * $interval-size)) {
  41. font-size: 1.2rem * (1 + (.02 * $i));
  42. }
  43. $i: $i + 1;
  44. }
  45. // Handle below 360px screen
  46. @media only screen and (max-width: 360px) {
  47. font-size: 1.2rem;
  48. }
  49. }