/* —– Global settings ———————————————– {{{ */
:root {
/* --- Colors --- */ --background-color: #fff; --color-text: #1b2733; --color-text-secondary: #637282; --color-link: #0070e0; --color-sidenote: #616970; --highlight-red: #ea9999; --highlight-yellow: #ffe599; --highlight-green: #b6d7a8; --highlight-blue: #a4c2f4; --highlight-purple: #b4a7d6; --color-inline-code: #1b2733; --color-inline-code-bg: #f3f3f8; --color-border: #dfdfd0; --color-border-heavy: #ccccd4; --color-table-heading: #f3f3fb; /* --- Text --- */ --font-family-prose: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --font-family-heading: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --font-family-code: Menlo, monospace; --side-note-number-font-family: var(--font-family-prose); --line-height: 26px; --font-size: 17px; --inline-code-font-size: 15px; --code-block-font-size: 14px; --code-block-side-padding: 8px; --line-numbers-font-size: 12px; --tight-code-line-height: 18px; --tight-code-padding-top: 5px; --side-note-line-height: 20px; --side-note-font-size: 13px; --side-note-code-font-size: 13px; --side-note-baseline-offset: 4px; --side-note-sup-offset: -6px; --side-note-number-hang-left: -6px; --side-note-text-indent: -9px; --heading-font-weight: 500; --title-font-size: 42px; --title-code-font-size: 40px; --title-line-height: 48px; --title-margin-top: 92px; --h1-font-size: 32px; --h1-code-font-size: 29px; --h1-line-height: 36px; --h1-word-spacing: 1px; --h1-margin-top: 30px; --h1-margin-bottom: 12px; --h2-font-size: 22px; --h2-code-font-size: 20px; --h2-line-height: 28px; --h2-word-spacing: 0.5px; --h2-margin-top: 18px; --h2-margin-bottom: 6px; --ul-indent-size: 23px; --ol-indent-size: 19px; --ol-li-padding-left: 4px; --hr-margin-top: 18px; --hr-margin-bottom: calc(var(--line-height) - var(--hr-margin-top) - 1px); --extra-wide-scale-factor: 1.5; --figcaption-line-height: 21px; --figcaption-font-size: 14px; --figcaption-code-font-size: 13px; --figcaption-gap: 6px; --captioned-figure-gap: 10px; --table-line-height: 21px; --table-font-size: 14px; --table-code-font-size: 13px; --nav-toc-font-size: 12px; --nav-toc-code-font-size: 12px; --nav-toc-indent: 15px; --nav-toc-baseline-offset: 2px; /* --- Layout --- */ --main-width: 745px; --main-width-narrow: 550px;
}
*, *:after, *:before {
box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html {
/* https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ -webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-prose); color: var(--color-text); font-size: var(--font-size); line-height: var(--line-height); -webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures; /* Safari-only right now (macOS, iOS) but looks so good. */ hanging-punctuation: first; margin: 0; padding: 0; padding-top: var(--title-margin-top); width: 100%; background-color: var(--background-color);
}
@media print {
body { background-color: initial; }
}
/* }}} */ /* —– Side notes and margin notes ———————————– {{{ */ /* — Side note text and numbering — {{{ */
.sidenote, .marginnote {
color: var(--color-sidenote); font-size: var(--side-note-font-size); line-height: var(--side-note-line-height); vertical-align: baseline; /* Align first baseline to body. */ margin-top: var(--side-note-baseline-offset);
}
.sidenote code, .marginnote code {
color: var(--color-sidenote);
}
body {
counter-reset: sidenote-counter;
}
.sidenote-number {
counter-increment: sidenote-counter;
}
.sidenote-number:after, .sidenote:before {
content: counter(sidenote-counter); position: relative;
}
nav#TOC label, label.margin-toggle:not(.sidenote-number), .sidenote-number:after, .sidenote:before, .footnote-ref sup, sup {
font-size: var(--side-note-font-size); font-weight: 700; font-family: var(--side-note-number-font-family); -webkit-font-feature-settings: "tnum" 1; font-feature-settings: "tnum" 1; /* Mimic 'vertical-align: super' (browser style for sup tag) * without causing a gap in our text's implicit grid. */ vertical-align: baseline; position: relative; top: var(--side-note-sup-offset);
}
sup {
font-weight: inherit;
}
/* Make the superscript hang. */ .sidenote:before { left: var(–side-note-number-hang-left); } /* Get first first column of first row to line up with other rows. */ .sidenote { text-indent: var(–side-note-text-indent); }
/*}}} */ /* — Side note input controls — {{{ */
input.margin-toggle {
display: none;
} label.margin-toggle:not(.sidenote-number) {
display: none;
} label.sidenote-number {
display: inline;
}
/* Unfortunately, variables aren't in scope here.
* See calculations in Horizontal layouting. */
@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
.margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote { margin-top: var(--side-note-line-height); vertical-align: baseline; } label.margin-toggle { color: var(--color-link); } label.margin-toggle:not(.sidenote-number) { display: inline; } label { cursor: pointer; }
}
/* }}} */ /* }}} */ /* —– Headings —————————————————— {{{ */
h1, h2 {
font-family: var(--font-family-heading); font-weight: var(--heading-font-weight);
}
h4, h5, h6 {
font-weight: normal;
}
h1.title {
margin-top: var(--line-height); margin-bottom: var(--line-height); font-size: var(--title-font-size); line-height: var(--title-line-height);
}
h1.title code {
font-size: var(--title-code-font-size);
}
h1:not(.title) {
font-size: var(--h1-font-size); line-height: var(--h1-line-height); word-spacing: var(--h1-word-spacing); margin-top: var(--h1-margin-top); margin-bottom: var(--h1-margin-bottom);
}
h1:not(.title) code {
font-size: var(--h1-code-font-size);
}
h2 {
font-size: var(--h2-font-size); line-height: var(--h2-line-height); word-spacing: var(--h2-word-spacing); margin-top: var(--h2-margin-top); margin-bottom: var(--h2-margin-bottom);
}
h2 code {
font-size: var(--h2-code-font-size);
}
h3 {
font-size: var(--font-size); line-height: var(--line-height); font-weight: bold;
}
h1:not(.title) + *, h1:not(.title) + p { margin-top: var(–h1-margin-bottom); } h2 + *, h2 + p { margin-top: var(–h2-margin-bottom); } h3 + *, h3 + p { margin-top: 0; }
/* }}} */ /* —– Prose ——————————————————— {{{ */
p, main > ul, main > ol, div.sourceCode, main > pre, img, table {
margin-top: var(--line-height); margin-bottom: var(--line-height)
}
ul:not(.task-list) {
margin-left: var(--ul-indent-size);
} ol {
margin-left: var(--ol-indent-size);
}
ul.task-list {
list-style: none; margin-left: var(--ul-indent-size);
}
ul.task-list > li {
position: relative;
}
ul.task-list > li > input {
position: absolute; left: calc(-1 * var(--ul-indent-size)); height: var(--line-height);
}
ol > li {
padding-left: var(--ol-li-padding-left);
}
ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } ol ol ol ol { list-style-type: decimal; } ol ol ol ol ol { list-style-type: lower-alpha; } ol ol ol ol ol ol { list-style-type: lower-roman; } ol ol ol ol ol ol ol { list-style-type: decimal; } ol ol ol ol ol ol ol ol { list-style-type: lower-alpha; } ol ol ol ol ol ol ol ol ol { list-style-type: lower-roman; }
ul { list-style-type: disc; } ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } ul ul ul ul { list-style-type: disc; } ul ul ul ul ul { list-style-type: circle; } ul ul ul ul ul ul { list-style-type: square; } ul ul ul ul ul ul ul { list-style-type: disc; } ul ul ul ul ul ul ul ul { list-style-type: circle; } ul ul ul ul ul ul ul ul ul { list-style-type: square; }
blockquote {
border-left: 1px solid var(--color-text-secondary); padding-left: 1.5rem; font-style: italic;
}
blockquote > p {
margin-top: 0;
}
blockquote em, blockquote i, blockquote .sidenote-wrapper {
font-style: normal;
}
hr {
margin-top: var(--hr-margin-top); margin-bottom: var(--hr-margin-bottom); border-style: solid; color: var(--color-border-heavy); border-width: 1px 0 0;
}
a code, a:link code, a:visited code, a, a:link, a:visited {
color: var(--color-link); text-decoration: none;
}
a:hover {
text-decoration: underline;
}
span.mark, mark {
/* Reset browser styles */ color: inherit; padding: 2px 0 1px;
} span.mark.red, mark.red { background-color: var(–highlight-red); } span.mark.yellow, mark.yellow { background-color: var(–highlight-yellow); } span.mark.green, mark.green { background-color: var(–highlight-green); } span.mark.blue, mark.blue { background-color: var(–highlight-blue); } span.mark.purple, mark.purple { background-color: var(–highlight-purple); }
.subtitle {
margin-top: 0;
} .author, .date {
margin-top: 0; margin-bottom: 0;
} .signoff {
margin-top: calc(4 * var(--line-height)); margin-bottom: calc(4 * var(--line-height));
}
/* Pandoc utility classes */ span.smallcaps{ font-variant: small-caps; } span.underline{ text-decoration: underline; }
.katex-display {
background: var(--background-color); transform: translateZ(0px);
}
@media print {
.katex-display { background-color: initial; }
}
/* }}} */ /* —– Code ———————————————————- {{{ */
/* Pandoc code blocks with a language look like div.sourceCode > pre.sourceCode
* Otherwise, it's just a pre (without .sourceCode) * * The 'code' element is tricky because it's used for inline code and code in a * pre. */
code {
font-family: var(--font-family-code); word-spacing: normal; /* Only for inline code */ color: var(--color-inline-code); background-color: var(--color-inline-code-bg); font-size: var(--inline-code-font-size); margin: 0; padding: 2px 0 1px; border: 1px solid var(--color-border); border-radius: 1px;
}
.sidenote code, .marginnote code {
font-size: var(--side-note-code-font-size);
}
pre code {
/* Reset some changes meant to be inline-only */ color: inherit; background-color: inherit; font-size: var(--code-block-font-size); line-height: var(--line-height); margin: initial; padding: initial; border: initial; border-radius: initial;
}
pre > code {
position: relative; /* For line highlights */ display: inline-block; min-width: 100%; z-index: 1; white-space: pre-wrap; padding: 0 var(--code-block-side-padding);
}
code.sourceCode::selection {
/* Prevent bug where far right edge of text box shows as selected. */ background: transparent;
}
.wide > pre, .wide > div.sourceCode {
/* Put this in front of the table of contents */ transform: translateZ(0px);
}
.wide pre > code {
white-space: pre;
}
pre.numberSource code {
counter-reset: source-line 0;
}
pre > code.sourceCode > span {
line-height: var(--line-height); display: inline-block; min-width: 100%;
}
div.sourceCode {
/* Need to make room for line numbers (even if they're not going to be used). * Width doesn't matter, just needs to be big enough to hold the largest line * number. */ --line-numbers-width: calc(4 * var(--line-numbers-font-size)); --line-numbers-negative-width: calc(-1 * var(--line-numbers-width)); margin-left: var(--line-numbers-negative-width);
} div.sourceCode > pre {
margin-left: var(--line-numbers-width);
} pre.numberSource > code.sourceCode > span {
counter-increment: source-line; padding-left: var(--line-numbers-width); text-indent: var(--line-numbers-negative-width); position: relative; left: var(--line-numbers-negative-width);
} pre.numberSource > code.sourceCode > span > a:first-child::before {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; content: counter(source-line); font-size: var(--line-numbers-font-size); text-decoration: none; position: relative; text-align: right; display: inline-block; padding: 0 calc(2 * var(--code-block-side-padding)); width: var(--line-numbers-width);
} pre > code.sourceCode > span > a:first-child::before:hover {
text-decoration: underline;
}
/* Utility class for code blocks that contain things like box drawing characters, where it's nice for things to touch. */ .tight-code pre, pre.tight-code {
padding-top: var(--tight-code-padding-top);
}
pre.tight-code code, .tight-code pre code, .tight-code pre > code.sourceCode > span, pre.tight-code > code.sourceCode > span {
line-height: var(--tight-code-line-height);
}
/* — Code line highlights — {{{ */ /* I used some code I contributed to owickstrom's pandoc-emphasize-code as
* inspiration for these changes. * * The novel part is using :nth-of-type(...) selectors and CSS classes, instead * of needing a pandoc filter. This means that we can stick with pandoc's * default syntax highlighter, and not need to requirer JavaScript for syntax * highlighting. It has the obvious limitation that it places a fixed limit on * lines that can be highlighted, but these additional CSS styles are easy * enough to write, so anyone who needs more lines can write their own * stylesheet and include it to add more after the fact. * * [1] https://github.com/owickstrom/pandoc-emphasize-code/pull/3 */
pre > code.sourceCode > span::after {
position: absolute; background-color: var(--color-code-highlight-bg); z-index: -1; left: calc(var(--line-numbers-width) - var(--code-block-side-padding)); right: calc(var(--line-numbers-negative-width) - var(--code-block-side-padding)); top: 0; height: 100%;
}
pre.hl-1 > code.sourceCode > span:nth-of-type(1)::after { content: “”; } pre.hl-2 > code.sourceCode > span:nth-of-type(2)::after { content: “”; } pre.hl-3 > code.sourceCode > span:nth-of-type(3)::after { content: “”; } pre.hl-4 > code.sourceCode > span:nth-of-type(4)::after { content: “”; } pre.hl-5 > code.sourceCode > span:nth-of-type(5)::after { content: “”; } pre.hl-6 > code.sourceCode > span:nth-of-type(6)::after { content: “”; } pre.hl-7 > code.sourceCode > span:nth-of-type(7)::after { content: “”; } pre.hl-8 > code.sourceCode > span:nth-of-type(8)::after { content: “”; } pre.hl-9 > code.sourceCode > span:nth-of-type(9)::after { content: “”; } pre.hl-10 > code.sourceCode > span:nth-of-type(10)::after { content: “”; } pre.hl-11 > code.sourceCode > span:nth-of-type(11)::after { content: “”; } pre.hl-12 > code.sourceCode > span:nth-of-type(12)::after { content: “”; } pre.hl-13 > code.sourceCode > span:nth-of-type(13)::after { content: “”; } pre.hl-14 > code.sourceCode > span:nth-of-type(14)::after { content: “”; } pre.hl-15 > code.sourceCode > span:nth-of-type(15)::after { content: “”; } pre.hl-16 > code.sourceCode > span:nth-of-type(16)::after { content: “”; } pre.hl-17 > code.sourceCode > span:nth-of-type(17)::after { content: “”; } pre.hl-18 > code.sourceCode > span:nth-of-type(18)::after { content: “”; } pre.hl-19 > code.sourceCode > span:nth-of-type(19)::after { content: “”; } pre.hl-20 > code.sourceCode > span:nth-of-type(20)::after { content: “”; } pre.hl-21 > code.sourceCode > span:nth-of-type(21)::after { content: “”; } pre.hl-22 > code.sourceCode > span:nth-of-type(22)::after { content: “”; } pre.hl-23 > code.sourceCode > span:nth-of-type(23)::after { content: “”; } pre.hl-24 > code.sourceCode > span:nth-of-type(24)::after { content: “”; } pre.hl-25 > code.sourceCode > span:nth-of-type(25)::after { content: “”; } pre.hl-26 > code.sourceCode > span:nth-of-type(26)::after { content: “”; } pre.hl-27 > code.sourceCode > span:nth-of-type(27)::after { content: “”; } pre.hl-28 > code.sourceCode > span:nth-of-type(28)::after { content: “”; } pre.hl-29 > code.sourceCode > span:nth-of-type(29)::after { content: “”; } pre.hl-30 > code.sourceCode > span:nth-of-type(30)::after { content: “”; } pre.hl-31 > code.sourceCode > span:nth-of-type(31)::after { content: “”; } pre.hl-32 > code.sourceCode > span:nth-of-type(32)::after { content: “”; } pre.hl-33 > code.sourceCode > span:nth-of-type(33)::after { content: “”; } pre.hl-34 > code.sourceCode > span:nth-of-type(34)::after { content: “”; } pre.hl-35 > code.sourceCode > span:nth-of-type(35)::after { content: “”; } pre.hl-36 > code.sourceCode > span:nth-of-type(36)::after { content: “”; } pre.hl-37 > code.sourceCode > span:nth-of-type(37)::after { content: “”; } pre.hl-38 > code.sourceCode > span:nth-of-type(38)::after { content: “”; } pre.hl-39 > code.sourceCode > span:nth-of-type(39)::after { content: “”; } pre.hl-40 > code.sourceCode > span:nth-of-type(40)::after { content: “”; }
/* }}} */
/* }}} */ /* —– Images and figures ——————————————– {{{ */
/* There's only a figure if there's a caption. Tighten things up. */ figure {
margin-bottom: var(--captioned-figure-gap);
}
figure + p {
margin-top: var(--captioned-figure-gap);
}
figure > img, figure > pre, figure > div.sourceCode {
margin-bottom: var(--figcaption-gap);
}
img {
width: 100%; display: block;
}
.wide img {
/* Put this in front of the table of contents */ transform: translateZ(0px);
}
figcaption {
font-size: var(--figcaption-font-size); line-height: var(--figcaption-line-height); font-style: italic; text-align: center; color: var(--color-text-secondary);
}
.left-align-caption figcaption {
text-align: left;
}
figcaption code {
font-size: var(--figcaption-code-font-size);
}
/* }}} */ /* —– Tables ——————————————————– {{{ */
table {
-webkit-font-feature-settings: "tnum" 1; font-feature-settings: "tnum" 1; font-size: var(--table-font-size); line-height: var(--table-line-height); border-spacing: 0; border-collapse: collapse; border: 1px solid var(--color-border-heavy); width: 100%; /* Solid background to occlude table of contents */ background-color: var(--background-color);
}
@media print {
table { background-color: initial; }
}
table code {
font-size: var(--table-code-font-size);
}
table pre code {
font-size: inherit;
}
.wide table {
/* Put this in front of the table of contents */ transform: translateZ(0px);
}
table td, table th {
border: 1px solid var(--color-border-heavy); padding: 5px 8px; min-width: 100px;
} table th {
background-color: var(--color-table-heading);
}
table > caption {
caption-side: bottom; margin-top: var(--figcaption-gap); margin-bottom: calc(var(--captioned-figure-gap) - var(--line-height)); font-size: var(--figcaption-font-size); line-height: var(--figcaption-line-height); font-style: italic; text-align: center; color: var(--color-text-secondary);
}
.left-align-caption table > caption {
text-align: left;
}
table > caption code {
font-size: var(--figcaption-code-font-size);
}
/* — Notes are just single cell tables — */
.note table {
font-size: inherit; line-height: inherit;
} .note table, .note td {
border: none;
}
.note.red td { background: var(–highlight-red); } .note.yellow td { background: var(–highlight-yellow); } .note.green td { background: var(–highlight-green); } .note.blue td { background: var(–highlight-blue); } .note.purple td { background: var(–highlight-purple); }
/* }}} */ /* —– Table of contents ——————————————— {{{ */
.date.before-toc {
padding-bottom: var(--line-height);
}
nav#TOC {
margin-bottom: var(--line-height); border-left: 1px solid var(--color-text-secondary); padding-left: 1.5rem;
}
nav#TOC input {
display: none;
}
nav#TOC label {
color: var(--color-link); cursor: pointer;
}
nav#TOC > ul {
display: none;
}
nav#TOC > input:checked + ul {
display: block;
}
@media print {
nav#TOC > input + ul { display: block; }
}
/* Unfortunately, variables aren't in scope here.
* 745px = --main-width * 52px = 2 * --line-height * 206px = side note min width */
@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
header { margin-bottom: var(--line-height); } .date.before-toc { padding-bottom: initial; } nav#TOC { /* Unset some styles for small screen width */ margin-bottom: initial; border-left: initial; padding-left: initial; position: sticky; margin-top: calc(var(--nav-toc-baseline-offset)); float: left; top: var(--line-height); font-size: var(--nav-toc-font-size); color: var(--color-text-secondary); margin-left: var(--line-height); max-width: calc((100vw - var(--main-width)) / 2 - 2 * var(--line-height)); max-height: calc(100vh - 2 * var(--line-height)); overflow-y: scroll; } nav#TOC label { display: none; } nav#TOC ul { display: block; list-style: none; margin-left: var(--nav-toc-indent); } nav#TOC > ul { margin-left: 0; } nav#TOC code { font-size: var(--nav-toc-code-font-size); } nav#TOC code, nav#TOC a, nav#TOD a:link, nav#TOD a:visited { color: var(--color-text-secondary); } nav#TOC a:hover, nav#TOC a:hover code { text-decoration: none; color: var(--color-link); }
}
/* }}} */ /* —– Horizontal layouting (main, side notes, extra-wide) ———– {{{ */
.sidenote, .marginnote {
float: right; clear: right; position: relative; --side-note-max-width: 300px; width: var(--computed-width); max-width: var(--side-note-max-width); margin-right: calc(-1 * min(var(--computed-width), var(--side-note-max-width)) - var(--margin-left));
}
/* — Side notes always visible — {{{ */
/* Unfortunately, variables aren't in scope here.
* 745px = --main-width * 52px = 2 * --line-height * 206px = side note min width */
@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
header, nav#TOC, main, footer { max-width: var(--main-width); } header, main, footer { margin-left: auto; margin-right: auto; } .sidenote, .marginnote { --margin-left: calc(2 * var(--line-height)); --margin-right: var(--margin-left); --computed-width: calc((100vw - 100%) / 2 - var(--margin-right) - var(--margin-left)); } .wide { width: 100%; overflow-x: scroll; } .wide.extra-wide { margin-left: calc((1 - var(--extra-wide-scale-factor)) / 2 * 100%); width: calc(var(--extra-wide-scale-factor) * 100%); } .wide.full-width { margin-left: calc(var(--line-height) - ((100vw - var(--main-width)) / 2)); width: calc(100vw - 2 * var(--line-height)); } .wide.extra-wide figcaption, .wide.extra-wide table > caption { margin-left: calc(((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width)); max-width: var(--main-width); margin-right: calc(100% - var(--main-width) - (((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width))); } .wide.full-width figcaption, .wide.full-width table > caption { margin-left: calc((100vw - var(--main-width)) / 2 - var(--line-height)); max-width: var(--main-width); margin-right: calc(100% - var(--main-width) - ((100vw - var(--main-width)) / 2 - var(--line-height))); }
}
/* Unfortunately, variables aren't in scope here.
* 745px = --main-width * 52px = 2 * --line-height * 206px = side note min width */
@media screen and (min-width: calc(52px + 745px + 52px + 206px + 52px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
header, nav#TOC, main, footer { margin-left: calc(2 * var(--line-height)); max-width: var(--main-width); margin-right: auto; } .sidenote, .marginnote { --margin-left: calc(2 * var(--line-height)); --margin-right: var(--margin-left); --computed-width: calc(100vw - var(--main-width) - calc(2 * var(--line-height)) - var(--margin-right) - var(--margin-left)); } .wide { width: 100%; overflow-x: scroll; overflow-y: hidden; } .wide.extra-wide { margin-left: calc(-1 * var(--line-height)); width: calc(100vw - 2 * var(--line-height)); max-width: calc(var(--extra-wide-scale-factor) * var(--main-width)); } .wide.full-width { margin-left: calc(-1 * var(--line-height)); width: calc(100vw - 2 * var(--line-height)); max-width: calc(100vw - 2 * var(--line-height)); } .wide.extra-wide .katex-display, .wide.full-width .katex-display { padding-left: var(--line-height); padding-right: var(--line-height); } .wide.extra-wide .katex-display, .wide.extra-wide .katex-display > .katex, .wide.full-width .katex-display, .wide.full-width .katex-display > .katex { text-align: left; } .wide.extra-wide figcaption, .wide.extra-wide table > caption, .wide.full-width figcaption, .wide.full-width table > caption { text-align: left; margin-left: var(--line-height); max-width: var(--main-width); }
}
/* Unfortunately, variables aren't in scope here.
* 550px = --main-width-narrow * 26px = --line-height * 169px = side note min width narrow */
@media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(52px + 745px + 52px + 206px + 52px - 1px)) {
header, nav#TOC, main, footer { margin-left: var(--line-height); max-width: var(--main-width-narrow); margin-right: auto; } .sidenote, .marginnote { --margin-left: var(--line-height); --margin-right: var(--line-height); --computed-width: calc(100vw - var(--main-width-narrow) - var(--line-height) - var(--margin-right) - var(--margin-left)); } .wide { width: var(--main-width); overflow-x: scroll; overflow-y: hidden; } .wide .katex-display, .wide .katex-display > .katex { text-align: left; } .wide figcaption, .wide table > caption { text-align: left; max-width: var(--main-width-narrow); } .wide.extra-wide, .wide.full-width { width: calc(100vw - 2 * var(--line-height)); }
}
/* }}} */ /* — Side notes collapsed — {{{ */
/* Unfortunately, variables aren't in scope here.
* See calculations above. */
@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
header, nav#TOC, main, footer { margin-left: var(--line-height); margin-right: var(--line-height); } .sidenote, .marginnote { display: none; } .margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote { display: block; float: left; clear: both; width: 100%; max-width: 100%; } .wide { width: 100%; overflow-x: scroll; overflow-y: hidden; } .wide .katex-display, .wide .katex-display > .katex { text-align: left; } .wide figcaption, .wide table > caption { text-align: left; max-width: calc(100vw - 2 * var(--line-height)); }
}
/* }}} */ /* — Paged media (print styles) — {{{ */ @page {
size: letter; margin: 0.5in;
}
@media print {
body { padding-top: 0; } header, nav#TOC, main, footer { width: 5.25in; margin-right: auto; } .sidenote, .marginnote { width: 2in; margin-right: -2.25in; } .wide { width: 7.5in; overflow-x: hidden; overflow-y: hidden; } .wide .katex-display, .wide .katex-display > .katex { text-align: left; } .wide figcaption, .wide table > caption { text-align: left; width: 5.25in; } .wide pre > code { white-space: pre-wrap; }
}
h1, h2, h3 {
page-break-after: avoid;
}
table, figure, pre {
page-break-inside: avoid;
} /* }}} */ /* }}} */
/* vim:fdm=marker
*/