/* 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; }
}