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