_typography.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. // Typography
  2. // Headings
  3. h1,
  4. h2,
  5. h3,
  6. h4,
  7. h5,
  8. h6 {
  9. color: inherit;
  10. font-weight: 500;
  11. line-height: 1.2;
  12. margin-bottom: .5em;
  13. margin-top: 0;
  14. }
  15. .h1,
  16. .h2,
  17. .h3,
  18. .h4,
  19. .h5,
  20. .h6 {
  21. font-weight: 500;
  22. }
  23. h1,
  24. .h1 {
  25. font-size: 2rem;
  26. }
  27. h2,
  28. .h2 {
  29. font-size: 1.6rem;
  30. }
  31. h3,
  32. .h3 {
  33. font-size: 1.4rem;
  34. }
  35. h4,
  36. .h4 {
  37. font-size: 1.2rem;
  38. }
  39. h5,
  40. .h5 {
  41. font-size: 1rem;
  42. }
  43. h6,
  44. .h6 {
  45. font-size: .8rem;
  46. }
  47. // Paragraphs
  48. p {
  49. margin: 0 0 $line-height;
  50. }
  51. // Semantic text elements
  52. a,
  53. ins,
  54. u {
  55. text-decoration-skip: ink edges;
  56. }
  57. abbr[title] {
  58. border-bottom: $border-width dotted;
  59. cursor: help;
  60. text-decoration: none;
  61. }
  62. kbd {
  63. @include label-base();
  64. @include label-variant($light-color, $dark-color);
  65. font-size: $font-size-sm;
  66. }
  67. mark {
  68. @include label-variant($body-font-color, $highlight-color);
  69. border-bottom: $unit-o solid darken($highlight-color, 15%);
  70. border-radius: $border-radius;
  71. padding: $unit-o $unit-h 0;
  72. }
  73. // Blockquote
  74. blockquote {
  75. border-left: $border-width-lg solid $border-color;
  76. margin-left: 0;
  77. padding: $unit-2 $unit-4;
  78. p:last-child {
  79. margin-bottom: 0;
  80. }
  81. }
  82. // Lists
  83. ul,
  84. ol {
  85. margin: $unit-4 0 $unit-4 $unit-4;
  86. padding: 0;
  87. ul,
  88. ol {
  89. margin: $unit-4 0 $unit-4 $unit-4;
  90. }
  91. li {
  92. margin-top: $unit-2;
  93. }
  94. }
  95. ul {
  96. list-style: disc inside;
  97. ul {
  98. list-style-type: circle;
  99. }
  100. }
  101. ol {
  102. list-style: decimal inside;
  103. ol {
  104. list-style-type: lower-alpha;
  105. }
  106. }
  107. dl {
  108. dt {
  109. font-weight: bold;
  110. }
  111. dd {
  112. margin: $unit-2 0 $unit-4 0;
  113. }
  114. }