* { box-sizing: border-box; } body { font-size: 18px; line-height: 1.5; color: #333; background: #ffffff; font-family: "Source Sans Pro", sans-serif; /* font-family: "Open Sans", sans-serif; */ } main { margin: 40px auto; max-width: 1000px; padding: 0 10px; } .toc { height: 100%; width: 300px; position: absolute; right: 0; padding-left: 20px; padding-top: 20px; background-color: rgba(255,255,255,0.95); transition: all 300ms ease-in-out; transform: translateX(100%); } .toc.open { box-shadow: 0 0 5px #c8c8c8; transform: translateX(0); } @media (min-width: 1000px) { #content { margin-right: 300px; } .toc { right: calc((100% - 1000px) / 2); transform: translateX(0); } .toc-menu { display: none; } } .toc .is-active-link::before { background-color: #0074D9; } .is-position-fixed { position: fixed !important; top: 0; } .toc-menu { position: fixed; top: 0; right: 40px; /* to leave room for hypothes.is bar */ z-index: 2; margin: .25rem; padding: .25rem; background-color: #f4f4f4; line-height: 1; border-radius: .125rem; border-color: #999; border-style: solid; border-width: 1px; } h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { display: block; content: " "; height: 40px; margin-top: -40px; visibility: hidden; } p { margin-bottom: 1.4rem; overflow-x: auto; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { /* fix weird outline when clicking a TOC link */ outline: 0; } h1 { margin-top: 0; font-size: 4rem; } h2 { font-size: 3rem; } h3 { font-size: 2.25rem; } h4 { font-size: 1.5rem; margin-bottom: 1.5rem; } h5 { font-size: 1.25rem; font-variant: small-caps; margin-bottom: 1rem; } h6 { font-size: 1.125rem; font-variant: small-caps; margin-bottom: 1rem; } small { font-size: 0.8rem; } a { color: #0074D9; } a.external-link::after { content: url('data:image/svg+xml;utf8,'); padding-left: 3px; } code { font-family: "Source Code Pro", monospace; font-size: 0.9rem; color: #B10DC9; } pre { display: block; color: #212529; overflow: auto; margin-top: 0; margin-bottom: 1rem; } .notice { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .notice p:first-child { margin-top: 0; } .notice p:last-child { margin-bottom: 0; } ol ol { list-style-type: lower-alpha; } #toc ul { list-style-type: none; } #toc>ul { padding-left: 0; } table { border-collapse: collapse; width: 100%; } table tr { border-top: 1px solid #dee2e6; } th, td { padding-left: 5px; } table thead tr { border-bottom: 2px solid #dee2e6; } table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,.05); } figure { margin-left: 0; margin-right: 0; } figcaption { color: #888; font-size: 90%; padding-left: 10px; padding-right: 10px; } dl { margin-left: 10px; } dt { font-style: italic; } dd + dt { margin-top: 10px; } /* add padding to compensate for overlay scrollbars on mac.*/ /* overlay scrollbars on one-line-high code blocks hide the code */ /* ideally id only target mac but idk how */ .has-scroll { padding-bottom: 13px; }