- uses marginnote for maincolumn figure caption */ img[src$="centerme"] { display:block; margin: 0 auto; } // 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

(= 27.5% of 87.5% ) // - vw for constant width regardless of container // - 336.875px = 24.0625% of 1400px (max-width of ) width: 24.0625vw; max-width: 336.875px; // goal: 5.5vw of spacing between main column and sidebar // - assuming container has width of

, 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

// Markdown code spans (`, ``) are always

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

(= 27.5% of 95% ) // - vw for constant width regardless of container // - 365.75px = 26.125% of 1400px (max-width of ) 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; } }