/* The default x-height for code is slightly too large in side notes */ .marginnote code, .sidenote code {

font-size: 0.9rem;

} /* … and slightly too small in body text */ code {

font-size: 1.05rem;

} /* Also make the sidenote numbers hang */ .sidenote {

text-indent: -0.4rem;

} .sidenote:before {

/* removes trailing space from the counter content */
content: counter(sidenote-counter);
left: -0.4rem;

}

/* To get spacing between lists, use paragraphs.

* 0.25rem of spacing between list elements looks bad. */

li:not(:first-child) {

margin-top: initial;

}

/* Make “Home” link small */ p.signoff {

font-size: 1.2rem;

}

body {

max-width: 1150px;

}

/**

* Makes it so that top-level <p> don't need to be wrapped in <section>
*/

article > p, article > li, article > footer, article > table {

width: 55%;

}

/*

* Enable hyphens on supported platforms
*/

article {

-webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

} /* Sidenotes end up with a bunch of hyphens because they're so small */ .sidenote, .marginnote {

hyphens: none;

}

/* <details> is a little used collapsible block. */ details {

@extend section;
summary > p { display: inline; }

}

/* Tabular numbers for list items, small-caps Roman numerals */ article ol, article ul {

& > li::marker {
font-variant: tabular-nums oldstyle-nums all-small-caps;
}

}

/* Typographically correct small caps. */ .smallcaps { font-variant: all-small-caps; }

/* The alignment in l.311 of _tufte.scss results in sidenotes

* for blockquotes that do not align with other sidenotes and
* marginnotes. Here we correct this discrepancy. */

blockquote .sidenote, blockquote .marginnote {

margin-right: -60%;
min-width: 50%;

}

/* Semantic emulation of NEWTHOUGHT

*
* .newthought provides no semantic cues in the markup.
* However, we can style semantic elements so that they
* look just like Tufte's emphasized paragraph openings.
* We do this to <h5> and <h6> by analogy with the LaTeX
* \paragraph and \subparagraph features. We have also
* thrown in <dt> because what else are we going to use
* definition lists for? */

// First, we make sure line heights and font sizes match. article > dl, section > dl {

clear: left;
font-size: 1.4rem;
line-height: 2rem;

}

// …second, we float the headings so they run in with // the following paragraph… dt, h5, h6 {

float: left;
font-size: 1.4rem;
margin: 0 1.4rem 0 0;
padding: 0;

}

// …third, we take care of the styling… dt, dt > a, h5, h6 {

@extend .newthought;
clear: left;
font-style: normal;
font-weight: 400;

}

// Finally, we flush the <dt> inline with the <dd>. // This reverses the margin setting on l.160 of _tufte.scss dt:not(:first-child), li:not(:first-child) {

margin-top: 0;

}

// Bonus: fix width of <dl> inside <li> li > dl {

&, & > p {
    width: 100%;
}

} /* Here there ends the semantic emulation of .newthought */

/* Pandoc and Pandoc-crossref have strict and peculiar ways

* of generating HTML figures. Notably, Pandoc applies classes
* not to the <figure> tag, but to the <img> within it.
* Pandoc-crossref has a .subfigures class used for complex
* figures containing several related images. The caption of a
* .subfigures is not a <figcaption> but a simple <p>. Here we
* try to account for all these cases and make sure everything
* lines up. */

// Subfigures need to share width and margin features of regular // figures, but zero-padding them leads to unexpected results. div.subfigures {

max-width: 55%;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
margin: 0 0 3em 0;
& > p:last-of-type { // Subfigure captions
    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%;
}

}

// Fullwidth images within Pandoc-crossref figures and subfigures div.fullwidth {

& > figure {
    max-width: 100%;
}
&.subfigures {
    max-width: 90%;
    & > p:last-of-type { // Subfigure captions
        max-width: 33%;
    }
}
figcaption {
    max-width: 33%; // Correctly align Pandoc-crossref figcaptions in full-width figures
}

}

/* Pandoc will not generate figures with captions if the

* image is within a <span>, so the .marginnote class needs
* to be applied to a freestanding image. This makes sure its
* caption is properly aligned. */

img.marginnote~figcaption {

margin-right: -60%;
max-width: 50%;

}

// Fixes an edge case of figure~figure.marginnote alignment. p~figure > img.marginnote, div.notes~figure > img.marginnote { margin-top: 1.6rem; }

// Finally, make sure marginnote image captions are shown // inline on small screens. @media (max-width: 760px) {

img.marginnote~figcaption {
    margin-right: 0%;
    max-width: none;
}

} /* Here there ends the styling of Pandoc and Pandoc-crossref figures */

// Dark colorscheme with a softer background // TODO: use variables and a rebase mixin instead of // hard-coding every color twice. @media (prefers-color-scheme: dark) {

body { color: #fffff8;
       background-color: lighten(#111, 10%); }
a:link { text-decoration: none;
         background: -webkit-linear-gradient(#111, #111), -webkit-linear-gradient(#111, #111), -webkit-linear-gradient(lighten(#fffff8, 10%), lighten(#fffff8, 10%));
         background: linear-gradient(#111, #111), linear-gradient(#111, #111), linear-gradient(lighten(#fffff8, 10%), lighten(#fffff8, 10%));
         -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 #111, -0.03em 0 #111, 0 0.03em #111, 0 -0.03em #111, 0.06em 0 #111, -0.06em 0 #111, 0.09em 0 #111, -0.09em 0 #111, 0.12em 0 #111, -0.12em 0 #111, 0.15em 0 #111, -0.15em 0 #111;
         background-position: 0% 93%, 100% 93%, 0% 93%; }
img { background-color: darken(#fffff8, 10%); } // Prevents transparent PNGs from becoming unreadable
table { border-top: 2px solid #fffff8;
        border-bottom: 2px solid #fffff8; }
td { border-top: 1px solid #fffff8; }
th { border-bottom: 1px solid #fffff8; }

}