:root { background: #eee; background-image: url(images/paper.png); padding: 0; margin: 0; --note-block-color: rgb(255, 255, 246); --code-block-color: rgba(0, 0, 0, 0.03); --heading-color: #cfe6ff; --heading-text: #333; --line-numbers: 2.2em; --side-padding: 2em; --line-height: 16px; } body { margin: 0 auto; width: auto; background: #fff; box-shadow: 0 0 24px 16px white; color: black; --body-padding: 0.5em; padding: var(--body-padding); } @media screen and (min-width: 576px) { body { width: 540px; } } @media screen and (min-width: 768px) { body { --body-padding: 1em; width: 720px; padding: 1em; } } @media screen and (min-width: 992px) { body { width: 960px; } } @media screen and (min-width: 1200px) { body { width: 1140px; } } a, a:visited { color: rgb(0, 0, 238); } /* --------------------- */ h1 { background: var(--heading-color); color: var(--heading-text); padding: 0.2em 0.5em; } body header h1:first-child { margin-top: 0; } h1 div.nav { float: right; font-size: 0.6em; padding-top: 0.4em; } h1 div.nav a + a { margin-left: 1em; } header h2 + div { text-align: center; } ul.lang-switcher { display: inline; text-indent: 0; padding: 0; margin: 0; } ul.lang-switcher li { display: inline; text-indent: 0; padding: 0 0.2em; margin: 0; } ul.lang-switcher + p { font-size: 85%; margin-bottom: 2em; } ul.lang-switcher li .localisation-progress { font-size: 60%; vertical-align: middle; } /* @media screen and (min-width: 992px) { ul.lang-switcher + p { display: inline; margin-left: 0.25em; font-size: 75%; } } */ /* --------------------- */ label[for="changelogtoggle"] { display: inline-block; cursor: pointer; color: #2929b3; margin-left: 2em; } header nav h4 { text-indent: 1em; } header nav ol { margin: 0; } main { min-height: 75vh; } #changelogtoggle { display: none; } #changelogtoggle:not(:checked) ~ * { display: none; } /* --------------------- */ #chapters { counter-reset: section; } #chapters section h1:before { counter-increment: section; content: "ยง" counter(section); margin-right: 1em; } @media screen and (min-width: 768px) { #chapters section h1 { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid black; box-shadow: 0 0 0 0.5em white; } } #chapters section > h1 > a { text-decoration: none; color: inherit; } /* --------------------- */ div.print { display: none; } div.howtocode { position: relative; border: 1px solid black; background: #fcfcfd; margin: 1em; padding: 1em 1em 0 1em; } div.howtocode h3 { box-sizing: border-box; position: relative; width: calc(100% + 2em - 4px); left: calc(-1em + 2px); background: var(--heading-color); color: var(--heading-text); padding: 0.2em; margin: 0 auto; margin-top: -1em; border: 1px solid black; border-bottom: none; } div.note { position: relative; border: 1px solid black; background: var(--note-block-color); margin: 1em; margin-top: 2em; padding: 1em 1em 0 1em; } div.note:before { display: inline-block; content: "Note"; border: 1px solid black; border-radius: 0.5em; background: orange; padding: 0.2em 0.5em; position: absolute; top: -0.5em; left: -1em; } /* --------------------- */ img.LaTeX.SVG { margin: 0; background: white; padding: 1em 1em 0.25em 0; border-radius: 0.3em; } /* The next two rules are a wonky fix for paragraph vs. image margins */ p + img.LaTeX.SVG { margin-top: -0.9em; } img.LaTeX.SVG + p { margin-top: 0.5em; } div.note img.LaTeX.SVG { background: var(--note-block-color); } pre img.LaTeX.SVG { background: var(--code-block-color); } @media screen and (min-width: 768px) { img.LaTeX.SVG { margin-left: 1em; } } /* --------------------- */ graphics-element { background: #e8e8e8; } table.slider-wrapper { font-size: 75%; background: white; border: 1px solid black; border-collapse: collapse; margin-top: 0.5em; } .slider-wrapper tr td { width: 100%; } .slider-wrapper tr td:first-child { width: 3em; white-space: nowrap; } .slider-wrapper tr td:last-child { width: 3em; white-space: nowrap; padding-left: 1em; } .slider-wrapper .slider-label { font-family: Arial; padding: 0 0.5em; } .slider-wrapper .slider-value { padding: 0 0.25em; text-align-last: center; } .slider-wrapper .slider { width: 100%; vertical-align: text-top; } .grid { display: flex; flex-wrap: wrap; } /* --------------------- */ hr { width: calc(100% + 2 * var(--body-padding)); position: relative; left: calc(-1 * var(--body-padding)); border: none; border-top: 1px solid black; margin: 1em 0 2em 0; } div.scl img[usemap] { cursor: pointer; } div.dev, div.scl, div.github { z-index: 10; } div.dev { background: rgb(43, 49, 95); color: rgb(81, 181, 255); position: fixed; transform: rotate(-45deg); width: 22em; text-align: center; top: 4em; left: -6em; font-variant: small-caps; font-weight: bolder; font-family: Helvetica; box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3); opacity: 0.2; } div.scl { display: none; } /* --------------------- */ @media screen and (min-width: 768px) { div.scl { display: block; position: fixed; top: 0.25em; left: 0.25em; } } div.github { --scale: 0; position: fixed; top: 0; right: 0; height: 0; overflow: visible; transform-origin: top right; transform: scale(var(--scale)); } @media screen and (min-width: 992px) { div.github { --scale: 0.4; } } @media screen and (min-width: 1200px) { div.github { --scale: 0.5; } } @media screen and (min-width: 1470px) { div.github { --scale: 0.75; } } @media screen and (min-width: 1600px) { div.github { --scale: 0.9; } } div.github img area { cursor: pointer; } /* --------------------- */ h5.post-date { text-align: right; } /* --------------------- */ li code, p code { display: inline-block; border: 1px solid #ddd; border-radius: 5px; padding: 0 5px; background: #eee; font-weight: bold; vertical-align: 1px; } pre { display: inline-block; margin-left: 0; background-color: var(--code-block-color); padding: 0.5em; border: 1px dotted gray; } @media screen and (min-width: 768px) { pre { margin-left: 1em; } } code { font-family: Courier; } table.code { border-collapse: collapse; margin: 0; margin-left: var(--side-padding); width: calc(100% - 3 * var(--side-padding)); border: 0.5em solid #f0f0f0; border-width: 0.5em 0; } table.code td { background: #f0f0f0; border: none; padding: 0; cursor: default; } table.code td, table.code td textarea { font-family: Courier; font-size: 16px; white-space: pre; } table.code td textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; resize: none; cursor: text; color: inherit; padding-left: 1em; background: transparent; overflow: hidden; } table.code tr td[rowspan] { position: relative; } table.code tr td:first-child { width: 1.5em; padding-right: 0.25em; text-align: right; user-select: none; color: #999; cursor: default; border-right: 1px solid red; } /* --------------------- */ a.rss-link { position: relative; z-index: 10; float: right; } /* --------------------- */ div.btcfh { display: flex; flex-direction: row; } div.btcqr { flex: 0 0 auto; margin-top: 1em; align-self: center; } div.btcqr a { text-decoration: none; padding-left: 0.5em; } div.btcqr img { width: 50%; } a.btclk { font-family: courier; font-size: 100%; font-weight: 600; text-decoration: none; }