_typography.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. ///
  2. /// Dimension by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Type */
  7. html {
  8. font-size: 16pt;
  9. @include breakpoint('<=xlarge') {
  10. font-size: 12pt;
  11. }
  12. @include breakpoint('<=small') {
  13. font-size: 11pt;
  14. }
  15. @include breakpoint('<=xxsmall') {
  16. font-size: 10pt;
  17. }
  18. }
  19. body, input, select, textarea {
  20. color: _palette(fg);
  21. font-family: _font(family);
  22. font-weight: _font(weight);
  23. font-size: 1rem;
  24. line-height: 1.65;
  25. }
  26. a {
  27. @include vendor('transition', (
  28. 'color #{_duration(transition)} ease-in-out',
  29. 'background-color #{_duration(transition)} ease-in-out',
  30. 'border-bottom-color #{_duration(transition)} ease-in-out'
  31. ));
  32. border-bottom: dotted 1px _palette(fg-light);
  33. text-decoration: none;
  34. color: inherit;
  35. &:hover {
  36. border-bottom-color: transparent;
  37. }
  38. }
  39. strong, b {
  40. color: _palette(fg-bold);
  41. font-weight: _font(weight-bold);
  42. }
  43. em, i {
  44. font-style: italic;
  45. }
  46. p {
  47. margin: 0 0 _size(element-margin) 0;
  48. }
  49. h1, h2, h3, h4, h5, h6 {
  50. color: _palette(fg-bold);
  51. font-weight: _font(weight-bold);
  52. line-height: 1.5;
  53. margin: 0 0 (_size(element-margin) * 0.5) 0;
  54. text-transform: uppercase;
  55. letter-spacing: _font(letter-spacing);
  56. a {
  57. color: inherit;
  58. text-decoration: none;
  59. }
  60. &.major {
  61. border-bottom: solid _size(border-width) _palette(border);
  62. width: -moz-max-content;
  63. width: -webkit-max-content;
  64. width: -ms-max-content;
  65. width: max-content;
  66. padding-bottom: 0.5rem;
  67. margin: 0 0 (_size(element-margin) * 1) 0;
  68. }
  69. }
  70. h1 {
  71. font-size: 2.25rem;
  72. line-height: 1.3;
  73. letter-spacing: _font(letter-spacing-heading);
  74. }
  75. h2 {
  76. font-size: 1.5rem;
  77. line-height: 1.4;
  78. letter-spacing: _font(letter-spacing-heading);
  79. }
  80. h3 {
  81. font-size: 1rem;
  82. }
  83. h4 {
  84. font-size: 0.8rem;
  85. }
  86. h5 {
  87. font-size: 0.7rem;
  88. }
  89. h6 {
  90. font-size: 0.6rem;
  91. }
  92. @include breakpoint('<=small') {
  93. h1 {
  94. font-size: 1.75rem;
  95. line-height: 1.4;
  96. }
  97. h2 {
  98. font-size: 1.25em;
  99. line-height: 1.5;
  100. }
  101. }
  102. sub {
  103. font-size: 0.8rem;
  104. position: relative;
  105. top: 0.5rem;
  106. }
  107. sup {
  108. font-size: 0.8rem;
  109. position: relative;
  110. top: -0.5rem;
  111. }
  112. blockquote {
  113. border-left: solid (_size(border-width) * 4) _palette(border);
  114. font-style: italic;
  115. margin: 0 0 _size(element-margin) 0;
  116. padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
  117. }
  118. code {
  119. background: _palette(border-bg);
  120. border-radius: _size(border-radius);
  121. font-family: _font(family-fixed);
  122. font-size: 0.9rem;
  123. margin: 0 0.25rem;
  124. padding: 0.25rem 0.65rem;
  125. }
  126. pre {
  127. -webkit-overflow-scrolling: touch;
  128. font-family: _font(family-fixed);
  129. font-size: 0.9rem;
  130. margin: 0 0 _size(element-margin) 0;
  131. code {
  132. display: block;
  133. line-height: 1.75;
  134. padding: 1rem 1.5rem;
  135. overflow-x: auto;
  136. }
  137. }
  138. hr {
  139. border: 0;
  140. border-bottom: solid _size(border-width) _palette(border);
  141. margin: (_size(element-margin) * 1.375) 0;
  142. }
  143. .align-left {
  144. text-align: left;
  145. }
  146. .align-center {
  147. text-align: center;
  148. }
  149. .align-right {
  150. text-align: right;
  151. }