James Peret's blog. Built with Jekyll and the Mikey theme.

_typography.scss 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. //
  2. // Typography
  3. // --------------------------------------------------
  4. //
  5. // Credit: Modified based on Typebase.less v0.1.0 | MIT License
  6. // Typesetting variables.
  7. $baseFontSize: 22; // in pixels. This would result in 22px on desktop
  8. $baseLineHeight: 1.5; // how large the line height is as a multiple of font size - 33px
  9. $leading: $baseLineHeight * 1rem;
  10. // Rate of growth for headings
  11. $scale: 1.333;
  12. // Common font size based on 1.333 ratio - modularscale.com
  13. $font-XXS: 0.563rem;
  14. $font-XS: 0.75rem;
  15. $font-S: 1rem;
  16. $font-M: 1.333rem;
  17. $font-L: 1.777rem;
  18. $font-XL: 2.369rem;
  19. $font-XXL: 3.157rem;
  20. $font-XXXL: 4.209rem;
  21. $font-XXXXL: 5.61rem;
  22. // Font type
  23. $body-primary-font: 'Source Serif Pro', serif;
  24. $title-primary-font: 'PT Sans', sans-serif;
  25. $title-secondary-font: 'Roboto', sans-serif;
  26. /* Setup */
  27. html {
  28. /* Change default typefaces here */
  29. font-family: $body-primary-font;
  30. font-size: $baseFontSize / 16 * 100%; // 14px
  31. font-weight: 400;
  32. color: $text-color;
  33. -webkit-font-smoothing: antialiased;
  34. text-rendering: optimizeLegibility;
  35. font-feature-settings: "kern" 1;
  36. -webkit-font-feature-settings: "kern";
  37. -moz-font-feature-settings: "kern";
  38. -moz-font-feature-settings: "kern=1";
  39. // -webkit-text-size-adjust: auto
  40. // -moz-text-size-adjust: auto
  41. // -ms-text-size-adjust: auto
  42. // -o-text-size-adjust: auto
  43. // text-size-adjust: auto
  44. }
  45. /* Copy & Lists */
  46. p {
  47. line-height: $leading;
  48. letter-spacing: .01rem;
  49. margin-top: $leading;
  50. margin-bottom: 0;
  51. }
  52. p.u--startsWithDoubleQuote {
  53. text-indent: -0.43em;
  54. }
  55. ul,
  56. ol {
  57. margin-top: $leading;
  58. margin-bottom: $leading;
  59. padding-left: 22px;
  60. li {
  61. line-height: $leading;
  62. }
  63. ul,
  64. ol {
  65. margin-top: 0;
  66. margin-bottom: 0;
  67. }
  68. }
  69. blockquote {
  70. line-height: $leading;
  71. font-style: italic;
  72. padding-left: 25px;
  73. margin-left: -29px;
  74. border-left: 4px solid $black;
  75. @media (max-width: $screen-xs-max) {
  76. padding-left: 15px;
  77. margin-left: -19px;
  78. }
  79. &.u--startsWithDoubleQuote {
  80. text-indent: -0.40em;
  81. }
  82. &.largeQuote {
  83. line-height: 1.4;
  84. text-align: center;
  85. font-size: $font-L;
  86. margin: $leading -160px 0;
  87. padding-left: 0;
  88. border-left: 0;
  89. @media (max-width: $screen-xs-max) {
  90. margin: $leading 0 0;
  91. font-size: $font-M;
  92. padding-left: 0;
  93. }
  94. a {
  95. background-position: 0 42px;
  96. }
  97. }
  98. }
  99. /* Headings */
  100. h1,
  101. h2,
  102. h3,
  103. h4,
  104. h5,
  105. h6 {
  106. /* Change heading typefaces here */
  107. font-family: $title-primary-font;
  108. margin-top: $leading;
  109. margin-bottom: 0;
  110. line-height: $leading;
  111. letter-spacing: -0.02em;
  112. }
  113. h1 {
  114. font-size: 3 * $scale * 1rem;
  115. line-height: 3 * $leading;
  116. margin-top: 2 * $leading;
  117. }
  118. h2 {
  119. font-family: $title-secondary-font;
  120. font-size: 2 * $scale * 1rem;
  121. line-height: 2 * $leading;
  122. margin-top: 2 * $leading;
  123. font-weight: 300;
  124. }
  125. h3 {
  126. /* font-size: 1.33 * $scale * 1rem;
  127. line-height: 1.34 * $leading;
  128. margin-top: 1.33 * $leading; */
  129. font-size: $font-L;
  130. line-height: 2.18rem;
  131. margin-top: 1.7rem;
  132. }
  133. h4 {
  134. font-size: 1 * $scale * 1rem;
  135. }
  136. h5 {
  137. font-size: 0.8 * $scale * 1rem;
  138. }
  139. h6 {
  140. font-size: 0.7 * $scale * 1rem;
  141. }
  142. // Link style inspired by Medium.com
  143. a {
  144. color: $link-color;
  145. text-decoration: none;
  146. background-image: linear-gradient(to bottom, rgba($link-color,0) 75%, rgba($link-color,0.8) 75%);
  147. background-repeat: repeat-x;
  148. background-position: 0 22px;
  149. background-size: 2px 2px;
  150. &:hover {
  151. color: $link-hover-color;
  152. }
  153. }
  154. /* Tables */
  155. table {
  156. margin-top: $leading;
  157. border-spacing: 0px;
  158. border-collapse: collapse;
  159. }
  160. td,
  161. th {
  162. padding: 0;
  163. line-height: $baseLineHeight * $baseFontSize - 0px;
  164. }
  165. /* Code blocks */
  166. code {
  167. // Forces text to constrain to the line-height. Not ideal, but works.
  168. vertical-align: bottom;
  169. }
  170. hr {
  171. border-color: #d5d5d5;
  172. padding: 0;
  173. border-top: 0;
  174. border-left: 0;
  175. border-right: 0;
  176. margin: $leading 0;
  177. }
  178. /* Leading paragraph text */
  179. .lead {
  180. font-size: $scale * 1rem;
  181. }
  182. /* Hug a the block above you */
  183. .hug {
  184. margin-top: 0;
  185. }
  186. .container--content {
  187. max-width: 700px; // limit to 65-90 characters per line
  188. }
  189. .is-darkBackgrounded,
  190. .is-darkBackgrounded a,
  191. .is-darkBackgrounded a:hover,
  192. .is-darkBackgrounded a:visited {
  193. color: #fff;
  194. }