_elements.headings.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. /* ==========================================================================
  2. #HEADINGS
  3. ========================================================================== */
  4. /**
  5. * Simple default styles for headings 1 through 6. Anything more opinionated
  6. * than simple font-size changes should likely be applied via classes (see:
  7. * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
  8. */
  9. // We have all of our heading font sizes defined here. Passing these pixel
  10. // values into our `inuit-font-size()` mixin will generate a rem-based
  11. // `font-size` with a pixel fallback, as well as generating a `line-height` that
  12. // will sit on our baseline grid.
  13. $inuit-font-size-h1: 36px !default;
  14. $inuit-font-size-h2: 28px !default;
  15. $inuit-font-size-h3: 24px !default;
  16. $inuit-font-size-h4: 20px !default;
  17. $inuit-font-size-h5: 18px !default;
  18. $inuit-font-size-h6: 16px !default;
  19. h1 {
  20. @include inuit-font-size($inuit-font-size-h1);
  21. }
  22. h2 {
  23. @include inuit-font-size($inuit-font-size-h2);
  24. }
  25. h3 {
  26. @include inuit-font-size($inuit-font-size-h3);
  27. }
  28. h4 {
  29. @include inuit-font-size($inuit-font-size-h4);
  30. }
  31. h5 {
  32. @include inuit-font-size($inuit-font-size-h5);
  33. }
  34. h6 {
  35. @include inuit-font-size($inuit-font-size-h6);
  36. }