_typography.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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-radius: $border-radius;
  70. padding: .05rem;
  71. }
  72. // Blockquote
  73. blockquote {
  74. border-left: $border-width-lg solid $border-color;
  75. margin-left: 0;
  76. padding: $unit-2 $unit-4;
  77. p:last-child {
  78. margin-bottom: 0;
  79. }
  80. }
  81. // Lists
  82. ul,
  83. ol {
  84. margin: $unit-4 0 $unit-4 $unit-4;
  85. padding: 0;
  86. ul,
  87. ol {
  88. margin: $unit-4 0 $unit-4 $unit-4;
  89. }
  90. li {
  91. margin-top: $unit-2;
  92. }
  93. }
  94. ul {
  95. list-style: disc inside;
  96. ul {
  97. list-style-type: circle;
  98. }
  99. }
  100. ol {
  101. list-style: decimal inside;
  102. ol {
  103. list-style-type: lower-alpha;
  104. }
  105. }
  106. dl {
  107. dt {
  108. font-weight: bold;
  109. }
  110. dd {
  111. margin: $unit-2 0 $unit-4 0;
  112. }
  113. }