css/tufte.scss

---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
nav_exclude: true
---
/*****************************************************************************/
/* Tufte Jekyll blog theme
/* - source: https://github.com/clayh53/tufte-jekyll
/* - based on Tufte CSS by Dave Liepmann ( https://github.com/edwardtufte/tufte-css )
/*****************************************************************************/

// Imports to create final

@import "../_sass/fonts";
@import "../_sass/settings";
@import "../_sass/syntax-highlighting";

/* Changes from original tufte.css

- use border-box instead of content-box for box-sizing
- change font size as browser width expands or contracts
- add MathJax styling
- removes underline from <a> links and sets their color to $constrast-color, except for links that are inside <p>
- uses marginnote for maincolumn figure caption

*/

// global resets
*, *:before, *:after {
    margin: 0;
    box-sizing: border-box;
}

html, body { height: 100%; }

/* clearfix hack after Cederholm (group class name) */
.group:after {
    content: "";
    display: table;
    clear: both;
}

// MathJax styling
.mathblock, .MJXc-display {
    font-size: 1.5rem !important;
    clear: left;
}

// variable font size
html {
    font-size: 11px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 800px){ html{ font-size: 12px; } }
@media screen and (min-width: 900px){ html{ font-size: 13px; } }
@media screen and (min-width: 1000px){ html{ font-size: 14px; } }
@media screen and (min-width: 1100px){ html{ font-size: 15px; } }

body {
    width: 100%;
    padding-left: 12.5%;
    max-width: calc(12.5% + 1400px); // max-width of content box = 1400px
    margin: 0 auto;
    font-family: $body-font;
    background-color: $bg-color;
    color: $text-color;
    counter-reset: sidenote-counter;
}

// changed
h1 {
    font-weight: 400;
    margin-top: 1.568rem;
    margin-bottom: 1.568rem;
    font-size: 2.5rem;
    line-height: 0.784;
}

h2 {
    font-style: italic;
    font-weight: 400;
    margin-top: 4rem; /* 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;
}

p.subtitle {
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    display: block;
    line-height: 1;
}

article {
    width: 55%;
    padding: 5rem 0;
}

/* ==============================
 *         Main Body Text
 * ============================== */

p, ol, ul {
    font-size: 1.4rem;
    line-height: 2rem;
    margin: 1.4rem 0;
}

p {
    padding-right: 0;
    vertical-align: baseline;
}

li { margin-bottom: 0.5em; }

blockquote p, pre { padding-right: 0 10%; }

blockquote * { font-size: 1.1rem; }
blockquote p { line-height: 1.75rem; }
blockquote footer { text-align: right; }

/* ==============================
 *      Figures and Margins
 * ============================== */

// the caption of a figure.maincolumn is never hidden
figure.maincolumn { margin-bottom: 3em; }
figure.maincolumn > figcaption { display: block !important; }

figure.fullwidth figcaption {
    float: left;
    margin-right: 0%;
    margin-left: 36%;
}

img { max-width: 100%; }

.sidenote, .marginnote {
    // goal: width = 50% of <p> (= 27.5% of 87.5% <body>)
    // - vw for constant width regardless of container
    // - 336.875px = 24.0625% of 1400px (max-width of <body>)
    width: 24.0625vw;
    max-width: 336.875px;

    // goal: 5.5vw of spacing between main column and sidebar
    // - assuming container has width of <article>, then
    //   10% (spacing) + 50% (width) = 60%
    margin-right: -60%;

    float: right;
    clear: right;
    font-size: 1rem;

    margin-top: 0;
    margin-bottom: 1.4rem;
    line-height: 1.4;
    vertical-align: baseline;
    position: relative;
}

.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number:after, .sidenote:before {
    font-family: et-book-roman-old-style;
    color: $contrast-color; // added
    position: relative;
    vertical-align: baseline;
}
.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 1rem;
    top: -0.5rem; // use top instead of vertical-align to avoid affecting line-height
    left: 0.1rem;
}
.sidenote:before {
    // unicode for a non-breaking space
    content: counter(sidenote-counter) ".\000a0";
}

// account for indentation of list items and blockquotes
blockquote .sidenote, blockquote .marginnote {
    margin-right: -82.35%;  // =70%/85%
}
li .sidenote, li .marginnote {
    margin-right: -63.29%;  // not quite right yet
}

// margin toggle
// - hide if screen is wide enough
input.margin-toggle,
label.margin-toggle:not(.sidenote-number) {
    display: none;
}

/* ==============================
 *             Links
 * ============================== */

// new link behavior
a {
    color: $contrast-color;
    text-decoration: none;
}

/* Links: replicate underline that clears descenders */
p > a:link, p > a:visited { color: inherit; }

p > a:link {
    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) {
    p > a:link {
        background-position-y: 87%, 87%, 87%;
    }
}

p > a:link::selection,
p > 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;
}

/* ==============================
 *              Code
 * ============================== */

// Markdown code blocks (```, ~~~, or indented blocks) are always <pre><code></code></pre>
// Markdown code spans (`, ``) are always <p><code></code></p>

pre, code {
    font-family: $code-font;
    font-size: 1rem;
    line-height: 1.42;
    margin-top: 1.42rem;
    -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 */ }
pre { overflow-x: auto; }

/* ==============================
 *         Miscellaneous
 * ============================== */

.sans {
    font-family: $sans-font;
    letter-spacing: .03em;
}

.fullwidth { max-width: 90%; }

.full-width {
    .sidenote, .sidenote-number, .marginnote {
        display: none;
    }
}

span.newthought {
    font-variant: small-caps;
    font-size: 1.2em;
    letter-spacing: 0.05rem;
} // added

// helper classes
.contrast { color: $contrast-color; }

.smaller { font-size: 80%; }

hr.slender {
    border: 0;
    height: 1px;
    margin-top: 1.4rem;
    margin-bottom:1.4rem;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

/* ==============================
 *            Tables
 * ============================== */

// Use booktabs style as default for all tables, including Markdown tables
table, table.booktabs {
    width: auto;
    margin: 0 auto;
    border-spacing: 0px;
    border-top: 2px solid $border-color;
    border-bottom: 2px solid $border-color;
}

th, .booktabs th {
    border-bottom: 1px solid $border-color;
    padding: 0.65ex 0.5em 0.4ex 0.5em;
    font-weight: normal;
    text-align: center;
}

th, td {
    font-size: 1.2rem;
    line-height: 1.71428571;
}

th, .booktabs th.cmid {
    border-bottom: 1px solid lighten($border-color, 25%);
}

.booktabs th.nocmid {
    border-bottom: none;
}

// add space between thead row and tbody
tr:first-child td, .booktabs tbody tr:first-child td {
    padding-top: 0.65ex;
}

td, .booktabs td {
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: left;
}

caption, .booktabs caption {
    font-size: 90%;
    text-align: left;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1ex;
    caption-side: top;
}

.booktabs tbody tr td.l { text-align: left !important; }
.booktabs tbody tr td.c { text-align: center !important; }
.booktabs tbody tr td.r { text-align: right !important; }

.table-caption {
    float: right;
    clear: right;
    margin-right: -60%;
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.0rem;
    line-height: 1.96;
}

/* ==============================
 *         Small Screens
 * ============================== */

@media (max-width: 760px) {
    article {
        width: 90%;
    }

    figure {
        max-width: 90%;
    }

    figcaption, figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none;
    }

    blockquote p, blockquote footer {
        padding-right: 10%;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
        color: $contrast-color;
    }

    blockquote .sidenote,
    blockquote .marginnote,
    li .sidenote,
    li .marginnote,
    .sidenote,
    .marginnote {
        // treat as-if inline
        width: 100%;
        max-width: 100%;

        display: none;
        float: left;
        padding: 0 5%;
        margin: 1rem 0;
        vertical-align: baseline;
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
    }

    label {
        cursor: pointer;
    }

    .table-caption {
        display: block;
        float: right;
        clear: both;
        width: 98%;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        margin-left: 1%;
        margin-right: 1%;
        vertical-align: baseline;
        position: relative;
    }

    div.table-wrapper,
    table,
    table.booktabs {
        width: 85%;
    }
}

/* ==============================
 *     Nav and Footer Styling
 * ============================== */

header > nav.group, body footer {
    width: 95%;
    padding-top: 2rem;
}

// escaped unicode for the carats and then a space on active menu links
nav.group a.active:before{
    content:"\0003c\000a0";
}
nav.group a.active:after{
    content:"\000a0\0003e";
}

header > nav a {
    font-size: 1.2rem;
    font-family: $sans-font;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: $contrast-color;
    padding-top: 1.5rem;
    display: inline-block;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 2rem;
    vertical-align: baseline;
}

ul.footer-links, .credits {
    list-style: none;
    text-align: center;
    margin: 0 auto;
}
ul.footer-links li {
    display: inline;
    padding: 0.5rem 0.25rem;
}
.credits {
    padding: 1rem 0rem;
}

// change font color for credit links in footer
.credits{
    font-family: $sans-font;
    & a {
        color: $contrast-color;
    }
}

/* ==============================
 * Full-width page styling
 * ============================== */

body.full-width {
    width: 90%;
    padding: 0 5%;
}

.full-width article p {
    width: 90%;
}

/* ==============================
 * @media print / screen
 * ============================== */

// do not display a print-footer for screen display
@media screen {
    .print-footer{ display: none; }
}

@media print {
    *, *:before, *:after {
        background: transparent !important;
        color: #000 !important;  // Black prints faster
        box-shadow: none !important;
        text-shadow: none !important;
    }

    @page {
        margin: 0.75in 0.5in 0.75in 0.5in;
        orphans: 4;
        widows: 2;
    }

    body {
        font-size: 12pt;
        padding-left: 5%;
        max-width: calc(5% + 1400px);  // max-width of content box = 1400px
    }

    article {
        padding: 0;
    }

    /* this only applies when @media width > 760px */
    .sidenote, .marginnote {
        // goal: width = 50% of <p> (= 27.5% of 95% <body>)
        // - vw for constant width regardless of container
        // - 365.75px = 26.125% of 1400px (max-width of <body>)
        width: 26.125vw;
        max-width: 365.75px;
    }

    html body span.print-footer {
      font-family: $sans-font;
      font-size: 9pt;
      margin-top: 22.4pt;
      padding-top: 4pt;
      border-top: 1px solid #000;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        break-inside: avoid;
    }

    article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
        break-after: avoid;
    }

    body header, body footer {
        display: none;
    }
}

@media print and (max-width: 760px) {
    blockquote .sidenote,
    blockquote .marginnote,
    li .sidenote,
    li .marginnote,
    .sidenote,
    .marginnote {
        // treat as-if inline
        width: 100%;
        max-width: 100%;
        display: block;
    }
}