_typography.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. html {
  2. height: 100%;
  3. max-height: 100%;
  4. font-size: 10px;
  5. -webkit-tap-highlight-color: transparent;
  6. }
  7. body {
  8. height: 100%;
  9. max-height: 100%;
  10. font-family: "Merriweather", serif;
  11. letter-spacing: 0.01rem;
  12. font-size: 1.8em;
  13. line-height: 1.75em;
  14. color: #3A4145;
  15. font-weight: 400;
  16. -webkit-font-feature-settings: 'kern' 1;
  17. -moz-font-feature-settings: 'kern' 1;
  18. -o-font-feature-settings: 'kern' 1;
  19. text-rendering: geometricPrecision;
  20. }
  21. h1,
  22. h2,
  23. h3,
  24. h4,
  25. h5,
  26. h6,
  27. input,
  28. label,
  29. select,
  30. textarea,
  31. table {
  32. -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  33. -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  34. -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  35. font-family: "Open Sans", sans-serif;
  36. text-rendering: geometricPrecision;
  37. }
  38. h1,
  39. h2,
  40. h3,
  41. h4,
  42. h5,
  43. h6 {
  44. color: #2E2E2E;
  45. line-height: 1.15em;
  46. margin: 0 0 0.4em 0;
  47. font-weight: 600;
  48. }
  49. h1 {
  50. font-size: 5rem;
  51. letter-spacing: -2px;
  52. text-indent: -3px;
  53. }
  54. h2 {
  55. font-size: 3.6rem;
  56. letter-spacing: -1px;
  57. }
  58. h3 {
  59. font-size: 3rem;
  60. }
  61. h4 {
  62. font-size: 2.3rem;
  63. }
  64. h5 {
  65. font-size: 2rem;
  66. }
  67. h6 {
  68. font-size: 2rem;
  69. }
  70. a {
  71. color: #4A4A4A;
  72. transition: color 0.2s ease;
  73. }
  74. a:hover {
  75. color: #111;
  76. }
  77. p,
  78. ul,
  79. ol,
  80. dl,
  81. figure {
  82. -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  83. -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  84. -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
  85. margin: 0 0 1.75em 0;
  86. text-rendering: geometricPrecision;
  87. }
  88. ol,
  89. ul {
  90. padding-left: 3rem;
  91. }
  92. ol ol,
  93. ul ul,
  94. ul ol,
  95. ol ul {
  96. margin: 0 0 0.4em 0;
  97. padding-left: 2em;
  98. }
  99. dl dt {
  100. float: left;
  101. width: 180px;
  102. overflow: hidden;
  103. clear: left;
  104. text-align: right;
  105. text-overflow: ellipsis;
  106. white-space: nowrap;
  107. font-weight: 700;
  108. margin-bottom: 1em;
  109. }
  110. dl dd {
  111. margin-left: 200px;
  112. margin-bottom: 1em;
  113. }
  114. li {
  115. margin: 0.4em 0;
  116. }
  117. li li {
  118. margin: 0;
  119. }
  120. hr {
  121. display: block;
  122. height: 1px;
  123. border: 0;
  124. border-top: #eee 1px solid;
  125. margin: 3.2em 0;
  126. padding: 0;
  127. }
  128. mark {
  129. background-color: #fdffb6
  130. }
  131. kbd {
  132. display: inline-block;
  133. margin-bottom: 0.4em;
  134. padding: 1px 8px;
  135. border: #CCC 1px solid;
  136. color: #666;
  137. text-shadow: #FFF 0 1px 0;
  138. font-size: 0.9em;
  139. font-weight: 700;
  140. background: #F4F4F4;
  141. border-radius: 4px;
  142. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset;
  143. }
  144. @media only screen and (max-width: 900px) {
  145. blockquote {
  146. margin-left: 0;
  147. }
  148. hr {
  149. margin: 2.4em 0;
  150. }
  151. ol,
  152. ul {
  153. padding-left: 2em;
  154. }
  155. h1 {
  156. font-size: 4.5rem;
  157. text-indent: -2px;
  158. }
  159. h2 {
  160. font-size: 3.6rem;
  161. }
  162. h3 {
  163. font-size: 3.1rem;
  164. }
  165. h4 {
  166. font-size: 2.5rem;
  167. }
  168. h5 {
  169. font-size: 2.2rem;
  170. }
  171. h6 {
  172. font-size: 1.8rem;
  173. }
  174. }
  175. @media only screen and (max-width: 500px) {
  176. hr {
  177. margin: 1.75em 0;
  178. }
  179. p,
  180. ul,
  181. ol,
  182. dl {
  183. font-size: 0.95em;
  184. margin: 0 0 2.5rem 0;
  185. }
  186. h1,
  187. h2,
  188. h3,
  189. h4,
  190. h5,
  191. h6 {
  192. margin: 0 0 0.3em 0;
  193. }
  194. h1 {
  195. font-size: 2.8rem;
  196. letter-spacing: -1px;
  197. }
  198. h2 {
  199. font-size: 2.4rem;
  200. letter-spacing: 0;
  201. }
  202. h3 {
  203. font-size: 2.1rem;
  204. }
  205. h4 {
  206. font-size: 1.9rem;
  207. }
  208. h5 {
  209. font-size: 1.8rem;
  210. }
  211. h6 {
  212. font-size: 1.8rem;
  213. }
  214. }