_typography.scss 4.0 KB

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