<commit_before><!DOCTYPE html>
<head>
  <meta charset="utf-8"/>
  <title>Tufte CSS</title>
  <link rel="stylesheet" href="tufte.css"/>
  <link rel="stylesheet" href="latex.css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   /* Tufte CSS covers table styling, but styles specific to the data in these specific tables is put here because it is not part of Tufte CSS table styling. */
   
   /* "Newspaper Tone" demo table */
   table#newspaper-tone { font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   table#newspaper-tone > tbody > tr > td:nth-child(1) { padding-right: 15%; }
   table#newspaper-tone > thead > tr > th:nth-child(2) { min-width: 70px; }
   table#newspaper-tone > thead > tr > th:nth-child(3) { padding: 0 59px;
                                                         min-width: 180px; }

   @media screen and (max-width: 760px) {
     table#newspaper-tone > thead > tr > th:nth-child(3) { padding: 0 1em; }}

   /* "How Groups Voted For President" table */
   table#groups-voting > thead > tr > th:nth-child(1) { text-align: center;
                                                        min-width: 200px; }
   table#groups-voting > thead > tr > th:nth-child(2) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(3) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(4) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(5) { text-align: center;
                                                        min-width: 8em; }

   table#groups-voting > tbody > tr > td:nth-child(1) { width: 40%; }
   table#groups-voting > tbody > tr > td:nth-child(2) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(3) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(4) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(5) { width: 15%; }

   table#groups-voting.supertable > tbody > tr > td.pseudoparagraph-heading { padding-left: 0em;
                                                                              text-indent: 0em; }

   /* Table about O-rings from the Challenger shuttle disaster */
   table#o-rings { border-spacing: 10px 0px;
                   font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   
   table#o-rings > tbody > tr:nth-child(1) > td { padding-top: 1rem; }
   table#o-rings > thead > tr > th { vertical-align: top;
                                     text-align: center; }
   table#o-rings > thead > tr > th.text { text-align: left; }
   
   table#o-rings > thead > tr > th:nth-child(1) { width: 3%; }
   table#o-rings > thead > tr > th:nth-child(2) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(3) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(4) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(5) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(6) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(7) { width: 57%; }

   /* Statistical graphic density */
   table#pravda { width: 25em;
                  margin: 0 auto;
                  padding: 0 4em;
                  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   table#pravda > caption { font-variant: small-caps; } /* need ET Book to supply real small caps! */
   table#pravda > tbody > tr > td { vertical-align: bottom; }
   
   
  </style>
</head>

<body>
  <article>
    <h1>Tufte CSS</h1>
    <p class="subtitle"><NAME></p>
    <section>
      <p>Tufte CSS provides tools to style web articles using the ideas demonstrated by <NAME>’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.</p>
      <p>The idea was cribbed in whole from <a href="https://tufte-latex.github.io/tufte-latex/">Tufte-<span class="latex">L<span class="latex-sup">a</span>T<span class="latex-sub">e</span>X</span></a> and <a href="http://rmarkdown.rstudio.com/tufte_handout_format.html">R Markdown’s Tufte Handout format</a><label for="sn-tufte-handout" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-tufte-handout" class="margin-toggle"/>.
        <span class="sidenote">
          This page was in fact originally an adaptation of the <a href="http://rmarkdown.rstudio.com/examples/tufte-handout.pdf">Tufte Handout Example</a> PDF.
        </span>
        I give hearty thanks to all the people who have contributed to those projects.</p>
      <p>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: <a href="https://github.com/edwardtufte/tufte-css">tufte-css</a>. Please note the <a href="https://github.com/edwardtufte/tufte-css#contributing">contribution guidelines</a>.</p>
      <p>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.</p>
    </section>

    <section>
      <h2>Getting Started</h2>
      <p>To use Tufte CSS, copy <span class="code">tufte.css</span> and the <span class="code">et-book</span> directory of font files to your project directory, then add the following to your HTML document’s <span class="code">head</span> block:</p>

      <pre class="code">&lt;link rel="stylesheet"
      href="tufte.css"/&gt;</pre>

      <p>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.</p>
    </section>

    <section>
      <h2>Fundamentals</h2>
      <h3>Sections and Headings</h3>
      <p>Organize your document with an <span class="code">article</span> element inside your <span class="code">body</span> tag. Inside that, use <span class="code">section</span> tags around each logical grouping of text and headings.</p><commit_msg>Change attributive subtitle<commit_after><!DOCTYPE html>
<head>
  <meta charset="utf-8"/>
  <title>Tufte CSS</title>
  <link rel="stylesheet" href="tufte.css"/>
  <link rel="stylesheet" href="latex.css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   /* Tufte CSS covers table styling, but styles specific to the data in these specific tables is put here because it is not part of Tufte CSS table styling. */
   
   /* "Newspaper Tone" demo table */
   table#newspaper-tone { font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   table#newspaper-tone > tbody > tr > td:nth-child(1) { padding-right: 15%; }
   table#newspaper-tone > thead > tr > th:nth-child(2) { min-width: 70px; }
   table#newspaper-tone > thead > tr > th:nth-child(3) { padding: 0 59px;
                                                         min-width: 180px; }

   @media screen and (max-width: 760px) {
     table#newspaper-tone > thead > tr > th:nth-child(3) { padding: 0 1em; }}

   /* "How Groups Voted For President" table */
   table#groups-voting > thead > tr > th:nth-child(1) { text-align: center;
                                                        min-width: 200px; }
   table#groups-voting > thead > tr > th:nth-child(2) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(3) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(4) { text-align: center;
                                                        min-width: 6em; }
   table#groups-voting > thead > tr > th:nth-child(5) { text-align: center;
                                                        min-width: 8em; }

   table#groups-voting > tbody > tr > td:nth-child(1) { width: 40%; }
   table#groups-voting > tbody > tr > td:nth-child(2) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(3) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(4) { width: 15%; }
   table#groups-voting > tbody > tr > td:nth-child(5) { width: 15%; }

   table#groups-voting.supertable > tbody > tr > td.pseudoparagraph-heading { padding-left: 0em;
                                                                              text-indent: 0em; }

   /* Table about O-rings from the Challenger shuttle disaster */
   table#o-rings { border-spacing: 10px 0px;
                   font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   
   table#o-rings > tbody > tr:nth-child(1) > td { padding-top: 1rem; }
   table#o-rings > thead > tr > th { vertical-align: top;
                                     text-align: center; }
   table#o-rings > thead > tr > th.text { text-align: left; }
   
   table#o-rings > thead > tr > th:nth-child(1) { width: 3%; }
   table#o-rings > thead > tr > th:nth-child(2) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(3) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(4) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(5) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(6) { width: 8%; }
   table#o-rings > thead > tr > th:nth-child(7) { width: 57%; }

   /* Statistical graphic density */
   table#pravda { width: 25em;
                  margin: 0 auto;
                  padding: 0 4em;
                  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; }
   table#pravda > caption { font-variant: small-caps; } /* need ET Book to supply real small caps! */
   table#pravda > tbody > tr > td { vertical-align: bottom; }
   
   
  </style>
</head>

<body>
  <article>
    <h1>Tufte CSS</h1>
    <p class="subtitle">By <NAME> & <NAME></p>
    <section>
      <p>Tufte CSS provides tools to style web articles using the ideas demonstrated by <NAME>’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.</p>
      <p>The idea was cribbed in whole from <a href="https://tufte-latex.github.io/tufte-latex/">Tufte-<span class="latex">L<span class="latex-sup">a</span>T<span class="latex-sub">e</span>X</span></a> and <a href="http://rmarkdown.rstudio.com/tufte_handout_format.html">R Markdown’s Tufte Handout format</a><label for="sn-tufte-handout" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-tufte-handout" class="margin-toggle"/>.
        <span class="sidenote">
          This page was in fact originally an adaptation of the <a href="http://rmarkdown.rstudio.com/examples/tufte-handout.pdf">Tufte Handout Example</a> PDF.
        </span>
        I give hearty thanks to all the people who have contributed to those projects.</p>
      <p>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: <a href="https://github.com/edwardtufte/tufte-css">tufte-css</a>. Please note the <a href="https://github.com/edwardtufte/tufte-css#contributing">contribution guidelines</a>.</p>
      <p>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.</p>
    </section>

    <section>
      <h2>Getting Started</h2>
      <p>To use Tufte CSS, copy <span class="code">tufte.css</span> and the <span class="code">et-book</span> directory of font files to your project directory, then add the following to your HTML document’s <span class="code">head</span> block:</p>

      <pre class="code">&lt;link rel="stylesheet"
      href="tufte.css"/&gt;</pre>

      <p>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.</p>
    </section>

    <section>
      <h2>Fundamentals</h2>
      <h3>Sections and Headings</h3>
      <p>Organize your document with an <span class="code">article</span> element inside your <span class="code">body</span> tag. Inside that, use <span class="code">section</span> tags around each logical grouping of text and headings.</p>
{'fraction_non_alphanumeric': 0.13286454478164322, 'fraction_numerical': 0.01228719467061436, 'mean_word_length': 2.6996166484118294, 'pattern_counts': {'":': 0, '<': 162, '<?xml version=': 0, '>': 320, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 32, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3037385', 'n_tokens_mistral': 4458, 'n_tokens_neox': 4259, 'n_words': 1301}