You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

278 lines
12 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. /* Import ET Book styles
  2. adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
  3. @charset "UTF-8";
  4. @font-face {
  5. font-family: "et-book";
  6. src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
  7. src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
  8. font-weight: normal;
  9. font-style: normal
  10. }
  11. @font-face {
  12. font-family: "et-book";
  13. src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
  14. src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
  15. font-weight: normal;
  16. font-style: italic
  17. }
  18. @font-face {
  19. font-family: "et-book";
  20. src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
  21. src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
  22. font-weight: bold;
  23. font-style: normal
  24. }
  25. @font-face {
  26. font-family: "et-book-roman-old-style";
  27. src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
  28. src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg");
  29. font-weight: normal;
  30. font-style: normal;
  31. }
  32. /* Tufte CSS styles */
  33. html { font-size: 15px; }
  34. body { width: 87.5%;
  35. margin-left: auto;
  36. margin-right: auto;
  37. padding-left: 12.5%;
  38. font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  39. background-color: #fffff8;
  40. color: #111;
  41. max-width: 1400px;
  42. counter-reset: sidenote-counter; }
  43. h1 { font-weight: 400;
  44. margin-top: 4rem;
  45. margin-bottom: 1.5rem;
  46. font-size: 3.2rem;
  47. line-height: 1; }
  48. h2 { font-style: italic;
  49. font-weight: 400;
  50. margin-top: 2.1rem;
  51. margin-bottom: 0;
  52. font-size: 2.2rem;
  53. line-height: 1; }
  54. h3 { font-style: italic;
  55. font-weight: 400;
  56. font-size: 1.7rem;
  57. margin-top: 2rem;
  58. margin-bottom: 0;
  59. line-height: 1; }
  60. p.subtitle { font-style: italic;
  61. margin-top: 1rem;
  62. margin-bottom: 1rem;
  63. font-size: 1.8rem;
  64. display: block;
  65. line-height: 1; }
  66. .numeral { font-family: et-book-roman-old-style; }
  67. .danger { color: red; }
  68. article { position: relative;
  69. padding: 5rem 0rem; }
  70. section { padding-top: 1rem;
  71. padding-bottom: 1rem; }
  72. p, ol, ul { font-size: 1.4rem; }
  73. p { line-height: 2rem;
  74. margin-top: 1.4rem;
  75. margin-bottom: 1.4rem;
  76. padding-right: 0;
  77. vertical-align: baseline; }
  78. /* Chapter Epigraphs */
  79. div.epigraph { margin: 5em 0; }
  80. div.epigraph > blockquote { margin-top: 3em;
  81. margin-bottom: 3em; }
  82. div.epigraph > blockquote, div.epigraph > blockquote > p { font-style: italic; }
  83. div.epigraph > blockquote > footer { font-style: normal; }
  84. div.epigraph > blockquote > footer > cite { font-style: italic; }
  85. /* end chapter epigraphs styles */
  86. blockquote { font-size: 1.4rem; }
  87. blockquote p { width: 50%; }
  88. blockquote footer { width: 50%;
  89. font-size: 1.1rem;
  90. text-align: right; }
  91. ol, ul { width: 45%;
  92. -webkit-padding-start: 5%;
  93. -webkit-padding-end: 5%; }
  94. li { padding: 0.5rem 0; }
  95. figure { padding: 0;
  96. border: 0;
  97. font-size: 100%;
  98. font: inherit;
  99. vertical-align: baseline;
  100. max-width: 55%;
  101. -webkit-margin-start: 0;
  102. -webkit-margin-end: 0;
  103. margin: 0 0 3em 0; }
  104. figcaption { float: right;
  105. clear: right;
  106. margin-right: -48%;
  107. margin-top: 0;
  108. margin-bottom: 0;
  109. font-size: 1.1rem;
  110. line-height: 1.6;
  111. vertical-align: baseline;
  112. position: relative;
  113. max-width: 40%; }
  114. figure.fullwidth figcaption { margin-right: 24%; }
  115. /* Links: replicate underline that clears descenders */
  116. a:link, a:visited { color: inherit; }
  117. a:link { text-decoration: none;
  118. background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#333, #333);
  119. background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
  120. -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  121. -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  122. background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  123. background-repeat: no-repeat, no-repeat, repeat-x;
  124. text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
  125. background-position: 0% 93%, 100% 93%, 0% 93%; }
  126. @media screen and (-webkit-min-device-pixel-ratio: 0) { a:link { background-position-y: 87%, 87%, 87%; } }
  127. a:link::selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  128. background: #b4d5fe; }
  129. a:link::-moz-selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  130. background: #b4d5fe; }
  131. /* Sidenotes, margin notes, figures, captions */
  132. img { max-width: 100%; }
  133. .sidenote, .marginnote { float: right;
  134. clear: right;
  135. margin-right: -60%;
  136. width: 50%;
  137. margin-top: 0;
  138. margin-bottom: 0;
  139. font-size: 1.1rem;
  140. line-height: 1.3;
  141. vertical-align: baseline;
  142. position: relative; }
  143. .table-caption { float:right;
  144. clear:right;
  145. margin-right: -60%;
  146. width: 50%;
  147. margin-top: 0;
  148. margin-bottom: 0;
  149. font-size: 1.0rem;
  150. line-height: 1.6; }
  151. .sidenote-number { counter-increment: sidenote-counter; }
  152. .sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
  153. font-family: et-book-roman-old-style;
  154. position: relative;
  155. vertical-align: baseline; }
  156. .sidenote-number:after { content: counter(sidenote-counter);
  157. font-size: 1rem;
  158. top: -0.5rem;
  159. left: 0.1rem; }
  160. .sidenote:before { content: counter(sidenote-counter) " ";
  161. top: -0.5rem; }
  162. p, footer, div.table-wrapper-small, div.supertable-wrapper > p, div.booktabs-wrapper { width: 55%; }
  163. div.fullwidth, table.fullwidth { width: 100%; }
  164. div.table-wrapper { overflow-x: scroll;
  165. font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; }
  166. @media screen and (max-width: 760px) { p, footer { width: 90%; }
  167. pre.code { width: 87.5%; }
  168. ul { width: 85%; }
  169. figure { max-width: 90%; }
  170. figcaption, figure.fullwidth figcaption { margin-right: 0%;
  171. max-width: none; }
  172. blockquote p, blockquote footer { width: 90%; }}
  173. .sans { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  174. letter-spacing: .03em; }
  175. .code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  176. font-size: 1.125rem;
  177. line-height: 1.6; }
  178. h1 .code, h2 .code, h3 .code { font-size: 0.80em; }
  179. .marginnote .code, .sidenote .code { font-size: 1rem; }
  180. pre.code { width: 52.5%;
  181. padding-left: 2.5%;
  182. overflow-x: scroll; }
  183. .fullwidth { max-width: 90%;
  184. clear:both; }
  185. span.newthought { font-variant: small-caps;
  186. font-size: 1.2em; }
  187. input.margin-toggle { display: none; }
  188. label.sidenote-number { display: inline; }
  189. label.margin-toggle:not(.sidenote-number) { display: none; }
  190. @media (max-width: 760px) { label.margin-toggle:not(.sidenote-number) { display: inline; }
  191. .sidenote, .marginnote { display: none; }
  192. .margin-toggle:checked + .sidenote,
  193. .margin-toggle:checked + .marginnote { display: block;
  194. float: left;
  195. left: 1rem;
  196. clear: both;
  197. width: 95%;
  198. margin: 1rem 2.5%;
  199. vertical-align: baseline;
  200. position: relative; }
  201. label { cursor: pointer; }
  202. pre.code { width: 90%;
  203. padding: 0; }
  204. .table-caption { display: block;
  205. float: right;
  206. clear: both;
  207. width: 98%;
  208. margin-top: 1rem;
  209. margin-bottom: 0.5rem;
  210. margin-left: 1%;
  211. margin-right: 1%;
  212. vertical-align: baseline;
  213. position: relative; }
  214. div.table-wrapper, table, table.booktabs { width: 85%; }
  215. div.table-wrapper { border-right: 1px solid #efefef; }
  216. img { width: 100%; } }
  217. thead th { padding-left: 1.0em; border-bottom: 1px solid #aaa; }
  218. footer { padding-top: 80px; }