tufte.css 5.7 KB

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