diff --git a/tufte-css/LICENSE b/tufte-css/LICENSE new file mode 100644 index 0000000..16d0a33 --- /dev/null +++ b/tufte-css/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2014 Dave Liepmann + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/tufte-css/README.md b/tufte-css/README.md new file mode 100644 index 0000000..eaa9b53 --- /dev/null +++ b/tufte-css/README.md @@ -0,0 +1,88 @@ +Tufte CSS +========= +Edward Tufte uses a distinctive style in his handouts: simple, with well-set +typography, extensive sidenotes, and tight integration of graphics and +charts. `tufte-css` brings that style to HTML documents. + +This project is directly inspired by and +based on [Tufte-LaTeX](https://tufte-latex.github.io/tufte-latex/) and the +[R Markdown Tufte Handout](http://rmarkdown.rstudio.com/examples/tufte-handout.pdf). + + +Getting Started +- +The file *index.html* is a self-describing demonstration document that walks through +the features of Tufte CSS. The live version at +[https://edwardtufte.github.io/tufte-css/](https://edwardtufte.github.io/tufte-css/) +is the best overview of the project. + +To use Tufte CSS, just copy `tufte.css` and the `et-book` font +directory to your project and add the following to your HTML doc's +head block: + +```html + +``` + +All other files in the repository can be ignored, as they are merely +used by the demonstration document. + + +Project Scope and Status +- +Tufte CSS is specifically a CSS-only solution for styling HTML for the web. + +That means that JavaScript solutions, although often superior to pure CSS, are out of scope for this project and will not be used. Also out of scope are handling printed versions of web pages and integration with static site generators or other formats. Thankfully, all these useful applications can be well served by separate work that builds on top of Tufte CSS. + +This project is maintained but not under active development. It is considered essentially feature-complete. Refactoring and new functionality are a very low priority. However, contributions are still welcome to fix bugs or add functionality. + + +Deploying +- +1. Make changes +2. From shell, invoke [clean-css-cli](https://github.com/jakubpawlowicz/clean-css-cli): `cleancss -o tufte.min.css tufte.css` +3. Bump version in *package.json* +4. From shell: `npm publish` + + +Contributing +- +If you notice something wrong or broken, let us know by opening an +issue, or better yet, a pull request with how you think it should be +fixed. + +Please document your issues and fixes thoroughly. This means a clear +description of the concern, steps on how to reproduce it, and (if +possible) before and after screenshots and links to prior discussions +or commits. Please keep pull requests to one change at a time. + +Fixes and new functionality should be tested against `index.html` on +screens as small as an iPhone 4 and as big as, well, as big as you use +normally. (If you don't have a mobile device handy, fake different +devices with your browser's developer tools.) + +See the Issues page, especially [Help +Wanted](https://github.com/edwardtufte/tufte-css/labels/help%20wanted), +for opportunities to contribute. + + +Contributors +- + - Dave Liepmann (creator, project maintainer, design) + - Edward Tufte (editing, direction, design) + - [Adam Schwartz](https://github.com/adamschwartz) (ET Book font, descender-clearing link underlines) + - [Clay Harmon](https://github.com/edwardtufte/tufte-css/commits/master?author=clayh53) (media queries, rem units) + - [Linjie Ding](https://github.com/edwardtufte/tufte-css/commits/master?author=pyrocat101) (italic typeface) + - [Stephen A Thomas](https://github.com/edwardtufte/tufte-css/commits/master?author=sathomas) (automagically numbered sidenotes) + - [Ben Newman](https://github.com/edwardtufte/tufte-css/pull/9) (sidenote numbering style) + - [Kevin Godby](https://github.com/edwardtufte/tufte-css/commits/master?author=godbyk) (booktabs tables) + - [James Kolce](https://github.com/edwardtufte/tufte-css/commits/master?author=jameskolce) (sidenote fixes) + - [Chris MacKay](https://github.com/crmackay) (sidenote toggling on small screens) + - [Paul Rodriguez](https://github.com/edwardtufte/tufte-css/commits/master?author=ruricolist) + (sidenote style tweaks) + - [Claudiu-Vlad Ursache](https://github.com/edwardtufte/tufte-css/commits/master?author=ursachec) (HTML5 conformity) + + +License +- +Released under the MIT license. See [LICENSE](https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE). diff --git a/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot new file mode 100755 index 0000000..3610c74 Binary files /dev/null and b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot differ diff --git a/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg new file mode 100755 index 0000000..254f4cc --- /dev/null +++ b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf new file mode 100755 index 0000000..9798360 Binary files /dev/null and b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf differ diff --git a/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff new file mode 100755 index 0000000..c6685a1 Binary files /dev/null and b/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff differ diff --git a/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot new file mode 100755 index 0000000..88a6c74 Binary files /dev/null and b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot differ diff --git a/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg new file mode 100755 index 0000000..881a6bd --- /dev/null +++ b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf new file mode 100755 index 0000000..9da91de Binary files /dev/null and b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf differ diff --git a/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff new file mode 100755 index 0000000..b0e5b68 Binary files /dev/null and b/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff differ diff --git a/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot new file mode 100755 index 0000000..22fff5b Binary files /dev/null and b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot differ diff --git a/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg new file mode 100755 index 0000000..c5013b3 --- /dev/null +++ b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf new file mode 100755 index 0000000..daceffb Binary files /dev/null and b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf differ diff --git a/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff new file mode 100755 index 0000000..440ae04 Binary files /dev/null and b/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff differ diff --git a/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot new file mode 100755 index 0000000..4ef9973 Binary files /dev/null and b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot differ diff --git a/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg new file mode 100755 index 0000000..24cf3ef --- /dev/null +++ b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf new file mode 100755 index 0000000..5ae5198 Binary files /dev/null and b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf differ diff --git a/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff new file mode 100755 index 0000000..10eb336 Binary files /dev/null and b/tufte-css/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff differ diff --git a/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot new file mode 100755 index 0000000..bcc6f9d Binary files /dev/null and b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot differ diff --git a/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg new file mode 100755 index 0000000..a6c168a --- /dev/null +++ b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf new file mode 100755 index 0000000..725af42 Binary files /dev/null and b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf differ diff --git a/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff new file mode 100755 index 0000000..5753ca4 Binary files /dev/null and b/tufte-css/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff differ diff --git a/tufte-css/img/exports-imports.png b/tufte-css/img/exports-imports.png new file mode 100755 index 0000000..43a7369 Binary files /dev/null and b/tufte-css/img/exports-imports.png differ diff --git a/tufte-css/img/imagequilt-animal-sounds.png b/tufte-css/img/imagequilt-animal-sounds.png new file mode 100644 index 0000000..d6bdf2d Binary files /dev/null and b/tufte-css/img/imagequilt-animal-sounds.png differ diff --git a/tufte-css/img/imagequilt-chinese-calligraphy.png b/tufte-css/img/imagequilt-chinese-calligraphy.png new file mode 100644 index 0000000..7289463 Binary files /dev/null and b/tufte-css/img/imagequilt-chinese-calligraphy.png differ diff --git a/tufte-css/img/napoleons-march.png b/tufte-css/img/napoleons-march.png new file mode 100644 index 0000000..ec4bc40 Binary files /dev/null and b/tufte-css/img/napoleons-march.png differ diff --git a/tufte-css/img/rhino.png b/tufte-css/img/rhino.png new file mode 100644 index 0000000..e16306f Binary files /dev/null and b/tufte-css/img/rhino.png differ diff --git a/tufte-css/img/table-example-be-page-159.png b/tufte-css/img/table-example-be-page-159.png new file mode 100755 index 0000000..7546b28 Binary files /dev/null and b/tufte-css/img/table-example-be-page-159.png differ diff --git a/tufte-css/index.html b/tufte-css/index.html new file mode 100644 index 0000000..7da2816 --- /dev/null +++ b/tufte-css/index.html @@ -0,0 +1,158 @@ + + + + + Tufte CSS + + + + + + +
+

Tufte CSS

+

Dave Liepmann

+
+

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

+

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

+

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

+

Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

+
+ +
+

Getting Started

+

To use Tufte CSS, copy tufte.css and the et-book directory of font files to your project directory, then add the following to your HTML document’s head block:

+ + 
<link rel="stylesheet" href="tufte.css"/>
+ +

Now you just have to use the provided CSS rules, and the Tufte CSS conventions described in this document. For best results, View Source and Inspect Element frequently.

+
+ +
+

Fundamentals

+

Sections and Headings

+

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

+

Tufte CSS uses h1 for the document title, p with class subtitle for the document subtitle, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:

+
+

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.

+ +
+

As a bonus, this excerpt regarding the use of headings provides an example of block quotes. In Tufte CSS they are just lightly styled, semantically correct HTML using blockquote and footer elements. See page 20 of The Visual Display of Quantitative Information for an example in print.

+

In his later booksBeautiful Evidence, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section> tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

+ +

Text

+

Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors. Tufte CSS uses #fffff8 and #111111 because they are nearly indistinguishable from their ‘pure’ cousins, but dial down the harsh contrast. We stick to the greyscale for text, reserving color for specific, careful use in figures and images.

+

In print, Tufte has used the proprietary Monotype BemboSee Tufte’s comment in the Tufte book fonts thread. font. A similar effect is achieved in digital formats with the now open-source ETBook, which Tufte CSS supplies with a @font-face reference to a .ttf file. In case ETBook somehow doesn’t work, Tufte CSS shifts gracefully to other serif fonts like Palatino and Georgia.

+

Also notice how Tufte CSS includes separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice.

+

If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice.

+

Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a dummy example that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining. However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard text-decoration. Credit goes to Adam Schwartz for that technique.

+

As always, these design choices are merely one approach that Tufte CSS provides by default. Other approaches can also be made to work. The goal is to make sentences readable without interference from links, as well as to make links immediately identifiable even by casual web users.

+
+ +
+

Epigraphs

+
+
+

The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.

+
George Orwell, “Politics and the English Language”
+
+
+

For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.

+
Richard P. Feynman, “What Do You Care What Other People Think?”
+
+
I do not paint things, I paint only the differences between things.
Henri Matisse, Henri Matisse Dessins: thèmes et variations (Paris, 1943), 37
+
+

If you’d like to introduce your page or a section of your page with some quotes, use epigraphs. Modeled after chapter epigraphs in Tufte’s books (particularly Beautiful Evidence), these are blockquote elements with a bit of specialized styling. Quoted text is italicized. The source goes in a footer element inside the blockquote. We have provided three examples in the epigraph of this section, demonstrating shorter and longer quotes, with and without a paragraph tag, and showing how multiple quotes within an epigraph fit together with the use of a wrapper class.

+
+ +
+

Sidenotes: Footnotes and Marginal Notes

+

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes.This is a sidenote. Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.

+

Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.

+

Sidenotes consist of two elements: a superscript reference number that goes inline with the text, and a sidenote with content. To add the former, just put a label and dummy checkbox into the text where you want the reference to go, like so:

+ 
<label for="sn-demo"
+       class="margin-toggle sidenote-number">
+</label>
+<input type="checkbox"
+       id="sn-demo"
+       class="margin-toggle"/>
+

You must manually assign a reference id to each side or margin note, replacing “sn-demo” in the for and the id attribute values with an appropriate descriptor. It is useful to use prefixes like sn- for sidenotes and mn- for margin notes.

+

Immediately adjacent to that sidenote reference in the main text goes the sidenote content itself, in a span with class sidenote. This tag is also inserted directly in the middle of the body text, but is either pushed into the margin or hidden by default. Make sure to position your sidenotes correctly by keeping the sidenote-number label close to the sidenote itself.

+

If you want a sidenote without footnote-style numberings, then you want a margin note. + + + + This is a margin note. Notice there isn’t a number preceding the note. + On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (&#8853;), but it’s up to you.

+

Margin notes are created just like sidenotes, but with the marginnote class for the content and the margin-toggle class for the label and dummy checkbox. For instance, here is the code for the margin note used in the previous paragraph:

+ 
<label for="mn-demo" class="margin-toggle">&#8853;</label>
+<input type="checkbox" id="mn-demo" class="margin-toggle"/>
+<span class="marginnote">
+  This is a margin note. Notice there isn’t a number preceding the note.
+</span>
+

Figures in the margin are created as margin notes, as demonstrated in the next section.

+
+ +
+

Figures

+

Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.

+

Figures should try to use the figure element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

+
+ From Edward Tufte, Visual Display of Quantitative Information, page 92. + Exports and Imports to and from Denmark & Norway from 1700 to 1780 +
+ +

Image of a RhinocerosF.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s Visual Explanations. But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph.

+

If you need a full-width figure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen. This approach is demonstrated below using Edward Tufte’s English translation of the Napoleon’s March data visualization. From Beautiful Evidence, page 122-124.

+
+ Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813 +
+

One obstacle to creating elegant figures on the web is the difficulty of handling different screen sizes, especially on the fly. Embedded iframe elements are particularly troublesome. For these instances we provide a helper class, iframe-wrapper, the most common use for which is probably YouTube videos, e.g.

+ 
<figure class="iframe-wrapper">
+  <iframe width="853" height="480" src="https://www.youtube.com/embed/YslQ2625TR4" frameborder="0" allowfullscreen></iframe>
+</figure>
+
+ +
+

You can use this class on a div instead of a figure, with slightly different results but the same general effect. Experiment and choose depending on your application.

+
+ +
+

Code

+

Technical jargon, programming language terms, and code samples are denoted with the code class, as I’ve been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS follows GitHub’s font selection, which shifts gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier.

+

Extended code examples should live in a code element within a pre element. This adds control over indentation and overflow as well:

+ 
;; Some code examples in Clojure. This is a comment.
+
+;; applying a function to every item in the collection
+(map tufte-css blog-posts)
+;;;; if unfamiliar, see http://www.lispcast.com/annotated-map
+
+;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq
+(doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d)))
+
+;; that same side-effecty loop, formatted
+(doseq [[[a b] [c d]] (map list
+                           (sorted-map :1 1 :2 2)
+                           (sorted-map :3 3 :4 4))]
+  (prn (* b d)))
+
+;; If this proselytizing has worked, check out:
+;; http://howistart.org/posts/clojure/1
+
+ +
+

ImageQuilts

+

Tufte CSS provides support for Edward Tufte and Adam Schwartz’s ImageQuilts. See the ET forum announcement thread for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other figure.

+

This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:

+
Image of Chinese Calligraphy
+

Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained to the main text region. This quilt has ragged edges, but the image itself is of course still rectangular.

+
Image of animal sounds
+
+ +
+

Epilogue

+

Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.

+
+
+ + diff --git a/tufte-css/latex.css b/tufte-css/latex.css new file mode 100644 index 0000000..2db66ef --- /dev/null +++ b/tufte-css/latex.css @@ -0,0 +1,18 @@ +.latex-sub, .latex-sup { text-transform: uppercase; + font-size: smaller; + position: relative; } + +.latex-sub { top: 0.2rem; + margin-left: -0.1667rem; + margin-right: -0.125rem; } + +.latex-sup { top: -0.2rem; + margin-left: -0.36rem; + margin-right: -0.15rem; + text-shadow: none; } + +.latex::selection, .latex span:not(.latex-sup)::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; + background: #b4d5fe; } + +.latex::-moz-selection, .latex span:not(.latex-sup)::-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; + background: #b4d5fe; } diff --git a/tufte-css/package.json b/tufte-css/package.json new file mode 100644 index 0000000..5a0b1b9 --- /dev/null +++ b/tufte-css/package.json @@ -0,0 +1,27 @@ +{ + "name": "tufte-css", + "version": "1.7.2", + "description": "Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts.", + "repository": { + "type": "git", + "url": "git+https://github.com/edwardtufte/tufte-css.git" + }, + "keywords": [ + "tufte", + "css", + "HTML", + "typography", + "sidenotes" + ], + "author": "Dave Liepmann", + "license": "MIT", + "bugs": { + "url": "https://github.com/edwardtufte/tufte-css/issues" + }, + "homepage": "https://edwardtufte.github.io/tufte-css/", + "files": [ + "tufte.css", + "tufte.min.css", + "et-book/" + ] +} diff --git a/tufte-css/tufte.css b/tufte-css/tufte.css new file mode 100644 index 0000000..976bbd9 --- /dev/null +++ b/tufte-css/tufte.css @@ -0,0 +1,470 @@ +@charset "UTF-8"; + +/* Import ET Book styles + adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); + 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"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); + 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"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); + 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"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "et-book-roman-old-style"; + src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); + 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"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +/* Tufte CSS styles */ +html { + font-size: 15px; +} + +body { + width: 87.5%; + margin-left: auto; + margin-right: auto; + padding-left: 12.5%; + font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; + background-color: #fffff8; + color: #111; + max-width: 1400px; + counter-reset: sidenote-counter; +} + +h1 { + font-weight: 400; + margin-top: 4rem; + margin-bottom: 1.5rem; + font-size: 3.2rem; + line-height: 1; +} + +h2 { + font-style: italic; + font-weight: 400; + margin-top: 2.1rem; + margin-bottom: 1.4rem; + font-size: 2.2rem; + line-height: 1; +} + +h3 { + font-style: italic; + font-weight: 400; + font-size: 1.7rem; + margin-top: 2rem; + margin-bottom: 1.4rem; + line-height: 1; +} + +hr { + display: block; + height: 1px; + width: 55%; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +p.subtitle { + font-style: italic; + margin-top: 1rem; + margin-bottom: 1rem; + font-size: 1.8rem; + display: block; + line-height: 1; +} + +.numeral { + font-family: et-book-roman-old-style; +} + +.danger { + color: red; +} + +article { + padding: 5rem 0rem; +} + +section { + padding-top: 1rem; + padding-bottom: 1rem; +} + +p, +dl, +ol, +ul { + font-size: 1.4rem; + line-height: 2rem; +} + +p { + margin-top: 1.4rem; + margin-bottom: 1.4rem; + padding-right: 0; + vertical-align: baseline; +} + +/* Chapter Epigraphs */ +div.epigraph { + margin: 5em 0; +} + +div.epigraph > blockquote { + margin-top: 3em; + margin-bottom: 3em; +} + +div.epigraph > blockquote, +div.epigraph > blockquote > p { + font-style: italic; +} + +div.epigraph > blockquote > footer { + font-style: normal; +} + +div.epigraph > blockquote > footer > cite { + font-style: italic; +} +/* end chapter epigraphs styles */ + +blockquote { + font-size: 1.4rem; +} + +blockquote p { + width: 55%; + margin-right: 40px; +} + +blockquote footer { + width: 55%; + font-size: 1.1rem; + text-align: right; +} + +section > p, +section > footer, +section > table { + width: 55%; +} + +/* 50 + 5 == 55, to be the same width as paragraph */ +section > dl, +section > ol, +section > ul { + width: 50%; + -webkit-padding-start: 5%; +} + +dt:not(:first-child), +li:not(:first-child) { + margin-top: 0.25rem; +} + +figure { + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + max-width: 55%; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + margin: 0 0 3em 0; +} + +figcaption { + float: right; + clear: right; + margin-top: 0; + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.6; + vertical-align: baseline; + position: relative; + max-width: 40%; +} + +figure.fullwidth figcaption { + margin-right: 24%; +} + +/* Links: replicate underline that clears descenders */ +a:link, +a:visited { + color: inherit; +} + +.no-tufte-underline:link { + background: unset; + text-shadow: unset; +} + +a:link, .tufte-underline, .hover-tufte-underline:hover { + text-decoration: none; + background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor); + background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor); + -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-repeat: no-repeat, no-repeat, repeat-x; + 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; + background-position: 0% 93%, 100% 93%, 0% 93%; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + a:link, .tufte-underline, .hover-tufte-underline:hover { + background-position-y: 87%, 87%, 87%; + } +} + +a:link::selection, +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; + background: #b4d5fe; +} + +/* Sidenotes, margin notes, figures, captions */ +img { + max-width: 100%; +} + +.sidenote, +.marginnote { + float: right; + clear: right; + margin-right: -60%; + width: 50%; + margin-top: 0.3rem; + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.3; + vertical-align: baseline; + position: relative; +} + +.sidenote-number { + counter-increment: sidenote-counter; +} + +.sidenote-number:after, +.sidenote:before { + font-family: et-book-roman-old-style; + position: relative; + vertical-align: baseline; +} + +.sidenote-number:after { + content: counter(sidenote-counter); + font-size: 1rem; + top: -0.5rem; + left: 0.1rem; +} + +.sidenote:before { + content: counter(sidenote-counter) " "; + font-size: 1rem; + top: -0.5rem; +} + +blockquote .sidenote, +blockquote .marginnote { + margin-right: -82%; + min-width: 59%; + text-align: left; +} + +div.fullwidth, +table.fullwidth { + width: 100%; +} + +div.table-wrapper { + overflow-x: auto; + font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; +} + +.sans { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + letter-spacing: .03em; +} + +code, pre > code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 1.0rem; + line-height: 1.42; + -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 */ +} + +.sans > code { + font-size: 1.2rem; +} + +h1 > code, +h2 > code, +h3 > code { + font-size: 0.80em; +} + +.marginnote > code, +.sidenote > code { + font-size: 1rem; +} + +pre > code { + font-size: 0.9rem; + width: 52.5%; + margin-left: 2.5%; + overflow-x: auto; + display: block; +} + +pre.fullwidth > code { + width: 90%; +} + +.fullwidth { + max-width: 90%; + clear:both; +} + +span.newthought { + font-variant: small-caps; + font-size: 1.2em; +} + +input.margin-toggle { + display: none; +} + +label.sidenote-number { + display: inline; +} + +label.margin-toggle:not(.sidenote-number) { + display: none; +} + +.iframe-wrapper { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + padding-top: 25px; + height: 0; +} + +.iframe-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +@media (max-width: 760px) { + body { + width: 84%; + padding-left: 8%; + padding-right: 8%; + } + + hr, + section > p, + section > footer, + section > table { + width: 100%; + } + + pre > code { + width: 97%; + } + + section > dl, + section > ol, + section > ul { + width: 90%; + } + + figure { + max-width: 90%; + } + + figcaption, + figure.fullwidth figcaption { + margin-right: 0%; + max-width: none; + } + + blockquote { + margin-left: 1.5em; + margin-right: 0em; + } + + blockquote p, + blockquote footer { + width: 100%; + } + + label.margin-toggle:not(.sidenote-number) { + display: inline; + } + + .sidenote, + .marginnote { + display: none; + } + + .margin-toggle:checked + .sidenote, + .margin-toggle:checked + .marginnote { + display: block; + float: left; + left: 1rem; + clear: both; + width: 95%; + margin: 1rem 2.5%; + vertical-align: baseline; + position: relative; + } + + label { + cursor: pointer; + } + + div.table-wrapper, + table { + width: 85%; + } + + img { + width: 100%; + } +} diff --git a/tufte-css/tufte.min.css b/tufte-css/tufte.min.css new file mode 100644 index 0000000..6244390 --- /dev/null +++ b/tufte-css/tufte.min.css @@ -0,0 +1 @@ +@charset "UTF-8";@font-face{font-family:et-book;src:url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot);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");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:et-book;src:url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot);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");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:et-book;src:url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot);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");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:et-book-roman-old-style;src:url(et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot);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");font-weight:400;font-style:normal;font-display:swap}html{font-size:15px}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:et-book,Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;background-color:#fffff8;color:#111;max-width:1400px;counter-reset:sidenote-counter}h1{font-weight:400;margin-top:4rem;margin-bottom:1.5rem;font-size:3.2rem;line-height:1}h2{font-style:italic;font-weight:400;margin-top:2.1rem;margin-bottom:1.4rem;font-size:2.2rem;line-height:1}h3{font-style:italic;font-weight:400;font-size:1.7rem;margin-top:2rem;margin-bottom:1.4rem;line-height:1}hr{display:block;height:1px;width:55%;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}p.subtitle{font-style:italic;margin-top:1rem;margin-bottom:1rem;font-size:1.8rem;display:block;line-height:1}.numeral{font-family:et-book-roman-old-style}.danger{color:red}article{padding:5rem 0}section{padding-top:1rem;padding-bottom:1rem}ol,p,ul{font-size:1.4rem;line-height:2rem}p{margin-top:1.4rem;margin-bottom:1.4rem;padding-right:0;vertical-align:baseline}div.epigraph{margin:5em 0}div.epigraph>blockquote{margin-top:3em;margin-bottom:3em}div.epigraph>blockquote,div.epigraph>blockquote>p{font-style:italic}div.epigraph>blockquote>footer{font-style:normal}div.epigraph>blockquote>footer>cite{font-style:italic}blockquote{font-size:1.4rem}blockquote p{width:55%;margin-right:40px}blockquote footer{width:55%;font-size:1.1rem;text-align:right}section>footer,section>p,section>table{width:55%}section>ol,section>ul{width:50%;-webkit-padding-start:5%}li:not(:first-child){margin-top:.25rem}figure{padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;max-width:55%;-webkit-margin-start:0;-webkit-margin-end:0;margin:0 0 3em 0}figcaption{float:right;clear:right;margin-top:0;margin-bottom:0;font-size:1.1rem;line-height:1.6;vertical-align:baseline;position:relative;max-width:40%}figure.fullwidth figcaption{margin-right:24%}a:link,a:visited{color:inherit}.no-tufte-underline:link{background:unset;text-shadow:unset}.hover-tufte-underline:hover,.tufte-underline,a:link{text-decoration:none;background:-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(#fffff8,#fffff8),-webkit-linear-gradient(currentColor,currentColor);background:linear-gradient(#fffff8,#fffff8),linear-gradient(#fffff8,#fffff8),linear-gradient(currentColor,currentColor);-webkit-background-size:.05em 1px,.05em 1px,1px 1px;-moz-background-size:.05em 1px,.05em 1px,1px 1px;background-size:.05em 1px,.05em 1px,1px 1px;background-repeat:no-repeat,no-repeat,repeat-x;text-shadow:.03em 0 #fffff8,-.03em 0 #fffff8,0 .03em #fffff8,0 -.03em #fffff8,.06em 0 #fffff8,-.06em 0 #fffff8,.09em 0 #fffff8,-.09em 0 #fffff8,.12em 0 #fffff8,-.12em 0 #fffff8,.15em 0 #fffff8,-.15em 0 #fffff8;background-position:0 93%,100% 93%,0 93%}@media screen and (-webkit-min-device-pixel-ratio:0){.hover-tufte-underline:hover,.tufte-underline,a:link{background-position-y:87%,87%,87%}}a:link::-moz-selection,a:link::selection{text-shadow:.03em 0 #b4d5fe,-.03em 0 #b4d5fe,0 .03em #b4d5fe,0 -.03em #b4d5fe,.06em 0 #b4d5fe,-.06em 0 #b4d5fe,.09em 0 #b4d5fe,-.09em 0 #b4d5fe,.12em 0 #b4d5fe,-.12em 0 #b4d5fe,.15em 0 #b4d5fe,-.15em 0 #b4d5fe;background:#b4d5fe}img{max-width:100%}.marginnote,.sidenote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:0;margin-bottom:0;font-size:1.1rem;line-height:1.3;vertical-align:baseline;position:relative}.sidenote-number{counter-increment:sidenote-counter}.sidenote-number:after,.sidenote:before{font-family:et-book-roman-old-style;position:relative;vertical-align:baseline}.sidenote-number:after{content:counter(sidenote-counter);font-size:1rem;top:-.5rem;left:.1rem}.sidenote:before{content:counter(sidenote-counter) " ";font-size:1rem;top:-.5rem}blockquote .marginnote,blockquote .sidenote{margin-right:-82%;min-width:59%;text-align:left}div.fullwidth,table.fullwidth{width:100%}div.table-wrapper{overflow-x:auto;font-family:"Trebuchet MS","Gill Sans","Gill Sans MT",sans-serif}.sans{font-family:"Gill Sans","Gill Sans MT",Calibri,sans-serif;letter-spacing:.03em}code,pre>code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:1rem;line-height:1.42;-webkit-text-size-adjust:100%}.sans>code{font-size:1.2rem}h1>code,h2>code,h3>code{font-size:.8em}.marginnote>code,.sidenote>code{font-size:1rem}pre>code{font-size:.9rem;width:52.5%;margin-left:2.5%;overflow-x:auto;display:block}pre.fullwidth>code{width:90%}.fullwidth{max-width:90%;clear:both}span.newthought{font-variant:small-caps;font-size:1.2em}input.margin-toggle{display:none}label.sidenote-number{display:inline}label.margin-toggle:not(.sidenote-number){display:none}.iframe-wrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}@media (max-width:760px){body{width:84%;padding-left:8%;padding-right:8%}hr,section>footer,section>p,section>table{width:100%}pre>code{width:97%}section>ol{width:90%}section>ul{width:90%}figure{max-width:90%}figcaption,figure.fullwidth figcaption{margin-right:0;max-width:none}blockquote{margin-left:1.5em;margin-right:0}blockquote footer,blockquote p{width:100%}label.margin-toggle:not(.sidenote-number){display:inline}.marginnote,.sidenote{display:none}.margin-toggle:checked+.marginnote,.margin-toggle:checked+.sidenote{display:block;float:left;left:1rem;clear:both;width:95%;margin:1rem 2.5%;vertical-align:baseline;position:relative}label{cursor:pointer}div.table-wrapper,table{width:85%}img{width:100%}} \ No newline at end of file