_typography.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. // Body Base
  2. html, body, button, input, select, textarea, .pure-g, .pure-g [class *= "pure-u"] {
  3. font-family: $font-family-default;
  4. font-weight: 400;
  5. }
  6. // Headings
  7. h1, h2, h3, h4, h5, h6 {
  8. font-family: $font-family-header;
  9. font-weight: 400;
  10. text-rendering: optimizeLegibility;
  11. letter-spacing: -0px;
  12. }
  13. h1 {
  14. font-size: $h1-font-size;
  15. @include breakpoint(mobile-only) {
  16. font-size: 2.5rem;
  17. line-height: 1.2;
  18. margin-bottom: 2.5rem;
  19. }
  20. }
  21. h2 {
  22. @include breakpoint(tablet-range) {
  23. font-size: $h2-font-size - .40;
  24. }
  25. @include breakpoint(mobile-only) {
  26. font-size: $h2-font-size - .50;
  27. }
  28. }
  29. h3 {
  30. @include breakpoint(tablet-range) {
  31. font-size: $h3-font-size - .40;
  32. }
  33. @include breakpoint(mobile-only) {
  34. font-size: $h3-font-size - .50;
  35. }
  36. }
  37. h4 {
  38. @include breakpoint(tablet-range) {
  39. font-size: $h4-font-size - .40;
  40. }
  41. @include breakpoint(mobile-only) {
  42. font-size: $h4-font-size - .50;
  43. }
  44. }
  45. h1 {
  46. text-align: center;
  47. letter-spacing: -3px;
  48. }
  49. h2 {
  50. letter-spacing: -2px;
  51. }
  52. h3 {
  53. letter-spacing: -1px;
  54. }
  55. h1 + h2 {
  56. margin: -2rem 0 2rem 0;
  57. font-size: 2rem;
  58. @include breakpoint(tablet-range) {
  59. font-size: 1.6rem;
  60. }
  61. @include breakpoint(mobile-only) {
  62. font-size: 1.5rem;
  63. }
  64. line-height: 1;
  65. text-align: center;
  66. font-family: $font-family-default;
  67. font-weight: 300;
  68. }
  69. h2 + h3 {
  70. margin: 0.5rem 0 2rem 0;
  71. font-size: 2rem;
  72. @include breakpoint(tablet-range) {
  73. font-size: 1.6rem;
  74. }
  75. @include breakpoint(mobile-only) {
  76. font-size: 1.5rem;
  77. }
  78. line-height: 1;
  79. text-align: center;
  80. font-family: $font-family-default;
  81. font-weight: 300;
  82. }
  83. // Blockquote
  84. blockquote {
  85. border-left: 10px solid $rule-color;
  86. p {
  87. font-size: 1.1rem;
  88. color: #999;
  89. }
  90. cite {
  91. display: block;
  92. text-align: right;
  93. color: #666;
  94. font-size: 1.2rem;
  95. }
  96. }
  97. // NOTES!!!!
  98. blockquote > blockquote > blockquote {
  99. margin: 0;
  100. p {
  101. padding: 15px;
  102. display: block;
  103. font-size: 1rem;
  104. margin-top: 0rem;
  105. margin-bottom: 0rem;
  106. }
  107. > p {
  108. // Yellow
  109. margin-left: -71px;
  110. border-left: 10px solid $notes-info-border;
  111. background: $notes-info-bg;
  112. color: darken($notes-info-border,15%);
  113. a {
  114. color: darken($notes-info-border,25%);
  115. &:hover {
  116. color: lighten($notes-info-border,5%);
  117. }
  118. }
  119. }
  120. > blockquote > p {
  121. // Red
  122. margin-left: -94px;
  123. border-left: 10px solid $notes-warning-border;
  124. background: $notes-warning-bg;
  125. color: darken($notes-warning-border,15%);
  126. a {
  127. color: darken($notes-warning-border,25%);
  128. &:hover {
  129. color: lighten($notes-warning-border,5%);
  130. }
  131. }
  132. }
  133. > blockquote > blockquote > p {
  134. // Blue
  135. margin-left: -118px;
  136. border-left: 10px solid $notes-note-border;
  137. background: $notes-note-bg;
  138. color: darken($notes-note-border,15%);
  139. a {
  140. color: darken($notes-note-border,25%);
  141. &:hover {
  142. color: lighten($notes-note-border,5%);
  143. }
  144. }
  145. }
  146. > blockquote > blockquote > blockquote > p {
  147. // Green
  148. margin-left: -142px;
  149. border-left: 10px solid $notes-success-border;
  150. background: $notes-success-bg;
  151. color: darken($notes-success-border,15%);
  152. a {
  153. color: darken($notes-success-border,25%);
  154. &:hover {
  155. color: lighten($notes-success-border,5%);
  156. }
  157. }
  158. }
  159. }
  160. // Inline and Code
  161. code,
  162. kbd,
  163. pre,
  164. samp {
  165. font-family: $font-family-mono;
  166. }
  167. code {
  168. background: $code-bg;
  169. color: darken($code-text,10%);
  170. }
  171. pre {
  172. padding: 2rem;
  173. background: $pre-bg;
  174. border: 1px solid $core-border-color;
  175. border-radius: 3px;
  176. code {
  177. color: $pre-text;
  178. background: inherit;
  179. }
  180. }
  181. // Extras
  182. hr {
  183. border-bottom: 4px solid $rule-color;
  184. }
  185. // Page Title
  186. .page-title {
  187. margin-top: -25px;
  188. padding: 25px;
  189. float: left;
  190. clear: both;
  191. background: $core-accent;
  192. color: $white;
  193. }
  194. // Label
  195. .label {
  196. vertical-align: middle;
  197. background: $core-accent;
  198. border-radius: 100%;
  199. color: $white;
  200. height: 1rem;
  201. min-width: 1rem;
  202. line-height: 1rem;
  203. display: inline-block;
  204. text-align: center;
  205. font-size: $core-font-size - 0.3rem;
  206. font-family: $font-family-header;
  207. margin-right: 0.75rem;
  208. }