/* SIDTODO- Add Dark Mode */ @charset "UTF-8"; @font-face { font-family: "et-bembo"; src: local('ET Bembo RomanLF'), local('ETBembo-RomanLF'), url("/fonts/et-bembo-roman-line-figures/et-bembo-roman-line-figures.woff") format("woff"), url("/fonts/et-bembo-roman-line-figures/et-bembo-roman-line-figures.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: "et-bembo"; src: local("ET Bembo DisplayItalic"), local('ETBembo-DisplayItalic'), url("/fonts/et-bembo-display-italic-old-style-figures/et-bembo-display-italic-old-style-figures.woff") format("woff"), url("/fonts/et-bembo-display-italic-old-style-figures/et-bembo-display-italic-old-style-figures.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: "et-bembo"; src: local("ET Bembo BoldLF"), local('ETBembo-BoldLF'), url("/fonts/et-bembo-bold-line-figures/et-bembo-bold-line-figures.woff") format("woff"), url("/fonts/et-bembo-bold-line-figures/et-bembo-bold-line-figures.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } em { font-style: italic; } strong { font-weight: bold; } body { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } ul { list-style: outside circle; } ol { list-style: outside decimal; } ol ol { list-style: lower-roman; } ul.Letters { list-style-type: circle } p.list { margin-bottom: 3rem; } article > footer { text-align: right; } .de-emphasize { color: rgba(17, 17, 17, 0.5); } .copyright { padding-bottom: 2rem; font-size: 1rem; } /* Pygment is .highlight. Make everything the same width as Tufte paragraphs. */ div.highlight, article footer { width: 60%; } .highlight { border-radius: 3px; } .code > .highlight { border-radius: 0 3px 3px 0; } .linenos { border-radius: 3px 0 0 3px; background-color: #073642; border-right: 1px solid #00232C; color: #586E75; text-shadow: 0 -1px #021014; } td.code { width: 100%; max-width: 100px; } .linenos a { color: #586E75; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } article pre, .page pre { padding: .8em; line-height: 1.1em; overflow: auto; } header .header_box { padding-top: 4.5em; } footer.paginator { margin-top: 4rem; display: flex; justify-content: space-between; font-size: 1.2rem; } footer.paginator > span.hide { visibility: hidden; } code { background-color: #F9F2F4; border-radius: 4px; box-sizing: border-box; color: #C7254E; font-family: Consolas, Monaco, Menlo, "Courier New", monospace; line-height: 18px; padding: 2px 4px; white-space: nowrap; } pre { font-family: Consolas, Monaco, Menlo, "Courier New", monospace; } footer p { margin: 0; font-size: 1.2rem; } main { padding: 0 4rem 0 6rem; max-width: 1000px; width: 70%; } article > header > p { margin: 0; font-size: 1rem; } /* aside + nav-bar = asidebar! */ #asidebar { padding: 8rem 0 0 4rem; } #asidebar #logo { text-align: center; margin-bottom: 2rem; min-height: 123px; } #asidebar .main-menu ul { text-align: center; margin: 0; padding: 0; } #asidebar .main-menu ul li { margin: 0 0 20px 0; padding: 0; list-style: none; } #asidebar .main-menu ul li a { color: rgb(17, 17, 17); text-decoration: none; position: relative; padding: 10px 10px; } #asidebar .main-menu ul li a:after { content: ""; position: absolute; height: 2px; bottom: 7px; left: 10px; right: 10px; background-color: rgba(17, 17, 17, 0.7); visibility: hidden; transform: scaleX(0); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #asidebar .main-menu ul li a:hover { text-decoration: none; } #asidebar .main-menu ul li a:hover:after { visibility: visible; transform: scaleX(1); } #asidebar #social { text-align: center; padding: 0; margin: 2rem 0 0; display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; } #asidebar #social li { margin: 0; display: inline; list-style: none; flex: 1; } section.available { padding-top: 0; padding-bottom: 2rem; } section.available p { padding-top: 1rem; padding-bottom: 1rem; border-top: 1px dashed rgba(17,17,17,0.2); border-bottom: 1px dashed rgba(17,17,17,0.2); } @media screen and (max-width: 1200px) { main { padding-right: 0; } #asidebar #logo { min-height: initial; } #asidebar #logo img { max-width: 100px; } } @media screen and (max-width: 950px) { main { padding-left: 4rem; } #asidebar { padding-left: 2rem; } } /* sidebar mobile-ish break that coincides with Tufte's sidenotes disappearing */ @media screen and (max-width: 760px) { body { display: block; } main { padding-right: 4rem; overflow-x: hidden; box-sizing: border-box; width: 100%; } body > main > article:first-of-type { padding-top: 0; } div.highlight, article footer { width: 100%; } #asidebar { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 2rem 0 0 4rem; } #asidebar #logo img { max-width: 90px; } #asidebar #logo { margin-bottom: 0; } #asidebar .main-menu ul { margin: 0 0 2em 0; } #asidebar nav { padding-left: 2rem } #asidebar .main-menu ul { text-align: left } #asidebar .main-menu ul li { float: left; margin: 0; padding: 0 0.25rem; } #asidebar .main-menu ul li a:hover:after { display: none; } #asidebar .main-menu ul li a { padding: 0; margin-left: 0.25rem; } #asidebar .main-menu ul li a:link { text-decoration: none; background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333); 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%; } #asidebar .main-menu ul li a:link::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; } #asidebar .main-menu ul li 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; } #asidebar #social { padding-left: 2rem; display: block; margin: 0; } #asidebar #social li { padding-left: 0.25rem } article pre, article code { white-space: pre-wrap; } } @media screen and (max-width: 600px) { main { padding: 0 2rem; } #asidebar { padding: 2rem 2rem 0 2rem } } @media screen and (max-width: 420px) { #asidebar #logo img { max-width: 80px; } #asidebar .main-menu ul { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin: 0; } #asidebar .main-menu ul li { float: none; margin-bottom: 8px; } #asidebar #social { display: none; } #asidebar nav { max-width: 170px; } main > footer { padding-bottom: 0.5rem; } } /* make s accessible to screen readers. Thanks, MDN! */ del::before, del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } @media print { * { background: #fff; } main > article { padding-top: 0; } main { width: 100%; padding: 0; } #asidebar { display: none; } img { break-inside: avoid; } p, table, pre { widows: 3; orphans: 3; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } } /* Tufte CSS styles. Originally from https://edwardtufte.github.io/tufte-css/ Modified as needed to fit into a 2-column display by Eric Lawler in the green San Diegan spring of 2019. */ html { font-size: 15px; } body { font-family: et-bembo, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; background-color: #fffff8; color: #111; } h1 { font-weight: 400; margin-top: 4rem; margin-bottom: 1.5rem; font-size: 3.2rem; line-height: 1; } h2 { font-style: italic; font-weight: 400; margin-top: 2.1rem; margin-bottom: 1.4rem; font-size: 2.2rem; line-height: 1; } h3 { font-style: italic; font-weight: 400; font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1.4rem; line-height: 1; } hr { display: block; height: 1px; width: 60%; border: 0; border-top: 2px solid rgba(17, 17, 17, 0.1); margin: 1em 0; padding: 0; } hr.separator { margin: 0; } hr.separator.extra { margin: 4rem 0; } p.subtitle { font-style: italic; margin-top: 1rem; margin-bottom: 1rem; font-size: 1.8rem; display: block; line-height: 1; } .numeral { font-family: et-bembo-roman-old-style; } .danger { color: red; } article { counter-reset: sidenote-counter; position: relative; } article:first-of-type { padding: 4rem 0; } article.intro { padding-bottom: 0; } article:last-of-type { padding-bottom: 4rem; } section { padding-top: 1rem; padding-bottom: 1rem; } p, ol, ul { font-size: 1.4rem; line-height: 2rem; } p { margin-top: 1.4rem; margin-bottom: 1.4rem; padding-right: 0; vertical-align: baseline; } /* Chapter Epigraphs */ div.epigraph { margin: 5em 0; } div.epigraph > blockquote { margin-top: 3em; margin-bottom: 3em; } div.epigraph > blockquote, div.epigraph > blockquote > p { font-style: italic; } div.epigraph > blockquote > footer { font-style: normal; } blockquote > footer > cite { font-style: italic; } /* end chapter epigraphs styles */ blockquote { margin: 1.4rem 40px; font-size: 1.4rem; padding-left: 1.4rem; border-left: 2px solid rgba(17, 17, 17, 0.1); } blockquote p { width: 59%; } blockquote footer { width: 59%; font-size: 1.1rem; text-align: right; } section > p, section > footer, section > table, section > hr { width: 60%; } /* 54 + 6 == 60, to be the same width as paragraph */ section > ol, section > ul { width: 54%; -webkit-padding-start: 6%; -moz-padding-start: 6%; } li:not(:first-child) { margin-top: 0.25rem; } figure { padding: 0; border: 0; font: inherit; vertical-align: baseline; max-width: 60%; margin: 0 0 3em 0; } figcaption { 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%; } figure.fullwidth figcaption { margin-right: 24%; } /* Links: replicate underline that clears descenders */ a:link, a:visited { color: inherit; } article a:link { text-decoration: none; background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333); 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%; } /* make underlines sungglier on jobsphones */ @media screen and (-webkit-min-device-pixel-ratio: 0) { article a:link { background-position-y: 87%, 87%, 87%; } } article a:link::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; } article 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; } main > article > header > h1 > a:link.no-line { background: none; text-shadow: none; } .sidenote, .marginnote { float: right; clear: right; margin-right: -63%; width: 52%; margin-top: 0; margin-bottom: 0; font-size: 1.1rem; line-height: 1.3; vertical-align: baseline; position: relative; /* Otherwise, highlighting a paragraph correctly grabs the sidenotes TODO: figure out how to improve this later */ -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } @media (max-width: 1230px) { .sidenote, .marginnote { margin-right: -60%; width: 45%; } } .sidenote-number { counter-increment: sidenote-counter; } .sidenote-number:after, .sidenote:before { font-family: et-bembo-roman-old-style; position: relative; vertical-align: baseline; } .sidenote-number:after { content: counter(sidenote-counter); font-size: 1rem; top: -0.5rem; left: 0.1rem; } .sidenote:before { content: counter(sidenote-counter) " "; font-size: 1rem; top: -0.5rem; } blockquote .sidenote, blockquote .marginnote { margin-right: -82%; min-width: 59%; text-align: left; } article img { max-width: 100%; } div.fullwidth, table.fullwidth { width: 100%; } div.table-wrapper { overflow-x: auto; font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; } .sans { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; letter-spacing: .03em; } code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1.0rem; line-height: 1.42; } .sans > code { font-size: 1.2rem; } h1 > code, h2 > code, h3 > code { font-size: 0.80em; } .marginnote > code, .sidenote > code { font-size: 1rem; } .fullwidth { max-width: 90%; clear: both; } span.newthought { font-variant: small-caps; font-size: 1.2em; } input.margin-toggle { display: none; } label.sidenote-number { display: inline; } label.margin-toggle:not(.sidenote-number) { display: none; } .iframe-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 760px) { hr, section > p, section > footer, section > table { width: 100%; } pre.code { width: 97%; } section > ol { width: 90%; } section > ul { width: 90%; } figure { max-width: 90%; } figcaption, figure.fullwidth figcaption { margin-right: 0; max-width: none; } blockquote { margin-left: 0; margin-right: 0; } blockquote p, blockquote footer { width: 100%; } label.sidenote-number { text-decoration: underline; color: #6087dd; } label.margin-toggle:not(.sidenote-number) { display: inline; font-size: 1.2rem; color: #6087dd; vertical-align: super; margin-left: -4px; text-decoration: underline; } .sidenote, .marginnote { display: none; } .margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote { display: block; float: left; left: 1rem; clear: both; width: 95%; margin: 1rem 2.5%; vertical-align: baseline; position: relative; -moz-user-select: text; -ms-user-select: text; -webkit-user-select: text; user-select: text; } label { cursor: pointer; } div.table-wrapper, table { width: 85%; } } /* Solarized Dark For use with Jekyll and Pygments https://ethanschoonover.com/solarized SOLARIZED HEX ROLE --------- -------- ------------------------------------------ base03 #002b36 background base01 #586e75 comments / secondary content base1 #93a1a1 body text / default code / primary content orange #cb4b16 constants red #dc322f regex, special keywords blue #268bd2 reserved keywords cyan #2aa198 strings, numbers green #859900 operators, other keywords */ .highlight { background-color: #002b36; color: #93a1a1 } .highlight .c { color: #586e75 } /* Comment */ .highlight .err { color: #93a1a1 } /* Error */ .highlight .g { color: #93a1a1 } /* Generic */ .highlight .k { color: #859900 } /* Keyword */ .highlight .l { color: #93a1a1 } /* Literal */ .highlight .n { color: #93a1a1 } /* Name */ .highlight .o { color: #859900 } /* Operator */ .highlight .x { color: #cb4b16 } /* Other */ .highlight .p { color: #93a1a1 } /* Punctuation */ .highlight .cm { color: #586e75 } /* Comment.Multiline */ .highlight .cp { color: #859900 } /* Comment.Preproc */ .highlight .c1 { color: #586e75 } /* Comment.Single */ .highlight .cs { color: #859900 } /* Comment.Special */ .highlight .gd { color: #2aa198 } /* Generic.Deleted */ .highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */ .highlight .gr { color: #dc322f } /* Generic.Error */ .highlight .gh { color: #cb4b16 } /* Generic.Heading */ .highlight .gi { color: #859900 } /* Generic.Inserted */ .highlight .go { color: #93a1a1 } /* Generic.Output */ .highlight .gp { color: #93a1a1 } /* Generic.Prompt */ .highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #cb4b16 } /* Generic.Subheading */ .highlight .gt { color: #93a1a1 } /* Generic.Traceback */ .highlight .kc { color: #cb4b16 } /* Keyword.Constant */ .highlight .kd { color: #268bd2 } /* Keyword.Declaration */ .highlight .kn { color: #859900 } /* Keyword.Namespace */ .highlight .kp { color: #859900 } /* Keyword.Pseudo */ .highlight .kr { color: #268bd2 } /* Keyword.Reserved */ .highlight .kt { color: #dc322f } /* Keyword.Type */ .highlight .ld { color: #93a1a1 } /* Literal.Date */ .highlight .m { color: #2aa198 } /* Literal.Number */ .highlight .s { color: #2aa198 } /* Literal.String */ .highlight .na { color: #93a1a1 } /* Name.Attribute */ .highlight .nb { color: #B58900 } /* Name.Builtin */ .highlight .nc { color: #268bd2 } /* Name.Class */ .highlight .no { color: #cb4b16 } /* Name.Constant */ .highlight .nd { color: #268bd2 } /* Name.Decorator */ .highlight .ni { color: #cb4b16 } /* Name.Entity */ .highlight .ne { color: #cb4b16 } /* Name.Exception */ .highlight .nf { color: #268bd2 } /* Name.Function */ .highlight .nl { color: #93a1a1 } /* Name.Label */ .highlight .nn { color: #93a1a1 } /* Name.Namespace */ .highlight .nx { color: #93a1a1 } /* Name.Other */ .highlight .py { color: #93a1a1 } /* Name.Property */ .highlight .nt { color: #268bd2 } /* Name.Tag */ .highlight .nv { color: #268bd2 } /* Name.Variable */ .highlight .ow { color: #859900 } /* Operator.Word */ .highlight .w { color: #93a1a1 } /* Text.Whitespace */ .highlight .mf { color: #2aa198 } /* Literal.Number.Float */ .highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ .highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ .highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ .highlight .sb { color: #586e75 } /* Literal.String.Backtick */ .highlight .sc { color: #2aa198 } /* Literal.String.Char */ .highlight .sd { color: #93a1a1 } /* Literal.String.Doc */ .highlight .s2 { color: #2aa198 } /* Literal.String.Double */ .highlight .se { color: #cb4b16 } /* Literal.String.Escape */ .highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */ .highlight .si { color: #2aa198 } /* Literal.String.Interpol */ .highlight .sx { color: #2aa198 } /* Literal.String.Other */ .highlight .sr { color: #dc322f } /* Literal.String.Regex */ .highlight .s1 { color: #2aa198 } /* Literal.String.Single */ .highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ .highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */ .highlight .vc { color: #268bd2 } /* Name.Variable.Class */ .highlight .vg { color: #268bd2 } /* Name.Variable.Global */ .highlight .vi { color: #268bd2 } /* Name.Variable.Instance */ .highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */