tufte.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. @charset "UTF-8";
  2. /* Import ET Book styles
  3. adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
  4. /* Tufte CSS styles */
  5. hr {
  6. display: block;
  7. height: 1px;
  8. width: 55%;
  9. border: 0;
  10. border-top: 1px solid #ccc;
  11. margin: 1em 0;
  12. padding: 0;
  13. }
  14. p {
  15. line-height: 1.5;
  16. }
  17. p.subtitle {
  18. font-style: italic;
  19. margin-top: 1rem;
  20. margin-bottom: 1rem;
  21. display: block;
  22. }
  23. .numeral {
  24. font-family: et-book-roman-old-style;
  25. }
  26. .danger {
  27. color: red;
  28. }
  29. article {
  30. padding: 5rem 0rem;
  31. }
  32. section {
  33. padding-top: 1rem;
  34. padding-bottom: 1rem;
  35. }
  36. p,
  37. dl,
  38. ol,
  39. ul {
  40. line-height: 1.5rem;
  41. }
  42. p {
  43. margin-bottom: 1.4rem;
  44. padding-right: 0;
  45. vertical-align: baseline;
  46. }
  47. /* Chapter Epigraphs */
  48. div.epigraph {
  49. margin: 5em 0;
  50. }
  51. div.epigraph > blockquote {
  52. margin-top: 3em;
  53. margin-bottom: 3em;
  54. }
  55. div.epigraph > blockquote,
  56. div.epigraph > blockquote > p {
  57. font-style: italic;
  58. }
  59. div.epigraph > blockquote > footer {
  60. font-style: normal;
  61. }
  62. div.epigraph > blockquote > footer > cite {
  63. font-style: italic;
  64. }
  65. /* end chapter epigraphs styles */
  66. blockquote {
  67. font-size: 1.4rem;
  68. }
  69. blockquote p {
  70. width: 55%;
  71. margin-right: 40px;
  72. }
  73. blockquote footer {
  74. width: 55%;
  75. font-size: 1.1rem;
  76. text-align: right;
  77. }
  78. section > p,
  79. section > footer,
  80. section > table {
  81. width: 55%;
  82. }
  83. /* 50 + 5 == 55, to be the same width as paragraph */
  84. section > dl,
  85. section > ol,
  86. section > ul {
  87. width: 50%;
  88. -webkit-padding-start: 5%;
  89. }
  90. dt:not(:first-child),
  91. li:not(:first-child) {
  92. margin-top: 0.25rem;
  93. }
  94. figure {
  95. 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. }
  105. figcaption {
  106. float: right;
  107. clear: right;
  108. margin-top: 0;
  109. margin-bottom: 0;
  110. font-size: 1.1rem;
  111. line-height: 1.6;
  112. vertical-align: baseline;
  113. position: relative;
  114. max-width: 40%;
  115. }
  116. figure.fullwidth figcaption {
  117. margin-right: 24%;
  118. }
  119. a:link,
  120. a:visited {
  121. color: inherit;
  122. text-underline-offset: 0.1em;
  123. text-decoration-thickness: 0.05em;
  124. }
  125. /* Sidenotes, margin notes, figures, captions */
  126. img {
  127. max-width: 100%;
  128. }
  129. .sidenote,
  130. .marginnote {
  131. float: right;
  132. clear: right;
  133. margin-right: -60%;
  134. width: 50%;
  135. margin-top: 0.3rem;
  136. margin-bottom: 0;
  137. font-size: 1.1rem;
  138. line-height: 1.3;
  139. vertical-align: baseline;
  140. position: relative;
  141. }
  142. .sidenote-number {
  143. counter-increment: sidenote-counter;
  144. }
  145. .sidenote-number:after,
  146. .sidenote:before {
  147. font-family: et-book-roman-old-style;
  148. position: relative;
  149. vertical-align: baseline;
  150. }
  151. .sidenote-number:after {
  152. content: counter(sidenote-counter);
  153. font-size: 1rem;
  154. top: -0.5rem;
  155. left: 0.1rem;
  156. }
  157. .sidenote:before {
  158. content: counter(sidenote-counter) " ";
  159. font-size: 1rem;
  160. top: -0.5rem;
  161. }
  162. blockquote .sidenote,
  163. blockquote .marginnote {
  164. margin-right: -82%;
  165. min-width: 59%;
  166. text-align: left;
  167. }
  168. div.fullwidth,
  169. table.fullwidth {
  170. width: 100%;
  171. }
  172. div.table-wrapper {
  173. overflow-x: auto;
  174. font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
  175. }
  176. .sans {
  177. font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  178. letter-spacing: 0.03em;
  179. }
  180. code,
  181. pre > code {
  182. font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  183. font-size: 1rem;
  184. line-height: 1.42;
  185. -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
  186. }
  187. .sans > code {
  188. font-size: 1.2rem;
  189. }
  190. h1 > code,
  191. h2 > code,
  192. h3 > code {
  193. font-size: 0.8em;
  194. }
  195. .marginnote > code,
  196. .sidenote > code {
  197. font-size: 1rem;
  198. }
  199. pre > code {
  200. font-size: 0.9rem;
  201. width: 52.5%;
  202. margin-left: 2.5%;
  203. overflow-x: auto;
  204. display: block;
  205. }
  206. pre.fullwidth > code {
  207. width: 90%;
  208. }
  209. .fullwidth {
  210. max-width: 90%;
  211. clear: both;
  212. }
  213. span.newthought {
  214. font-variant: small-caps;
  215. font-size: 1.2em;
  216. }
  217. input.margin-toggle {
  218. display: none;
  219. }
  220. label.sidenote-number {
  221. display: inline-block;
  222. max-height: 1.5rem; /* should be less than or equal to paragraph line-height */
  223. }
  224. label.margin-toggle:not(.sidenote-number) {
  225. display: none;
  226. }
  227. .iframe-wrapper {
  228. position: relative;
  229. padding-bottom: 56.25%; /* 16:9 */
  230. padding-top: 25px;
  231. height: 0;
  232. }
  233. .iframe-wrapper iframe {
  234. position: absolute;
  235. top: 0;
  236. left: 0;
  237. width: 100%;
  238. height: 100%;
  239. }
  240. @media (max-width: 760px) {
  241. body {
  242. width: 84%;
  243. padding-left: 8%;
  244. padding-right: 8%;
  245. }
  246. hr,
  247. section > p,
  248. section > footer,
  249. section > table {
  250. width: 100%;
  251. }
  252. pre > code {
  253. width: 97%;
  254. }
  255. section > dl,
  256. section > ol,
  257. section > ul {
  258. width: 90%;
  259. }
  260. figure {
  261. max-width: 90%;
  262. }
  263. figcaption,
  264. figure.fullwidth figcaption {
  265. margin-right: 0%;
  266. max-width: none;
  267. }
  268. blockquote {
  269. margin-left: 1.5em;
  270. margin-right: 0em;
  271. }
  272. blockquote p,
  273. blockquote footer {
  274. width: 100%;
  275. }
  276. label.margin-toggle:not(.sidenote-number) {
  277. display: inline;
  278. }
  279. .sidenote,
  280. .marginnote {
  281. display: none;
  282. }
  283. .margin-toggle:checked + .sidenote,
  284. .margin-toggle:checked + .marginnote {
  285. display: block;
  286. float: left;
  287. left: 1rem;
  288. clear: both;
  289. width: 95%;
  290. margin: 1rem 2.5%;
  291. vertical-align: baseline;
  292. position: relative;
  293. }
  294. label {
  295. cursor: pointer;
  296. }
  297. div.table-wrapper,
  298. table {
  299. width: 85%;
  300. }
  301. img {
  302. width: 100%;
  303. }
  304. }