code-31a8a6faa2fa/doc/_static/style.css0000644000000000000000000003014415171350452016132 0ustar 00000000000000/* layout*/ /* Set up fluid type scale. Major third for smaller screens and perfect fourth for larger screens. Allow override using --font-level-X. https://utopia.fyi/type/calculator?c=320,16,1.25,1280,18,1.333,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --_font-level_-2: var(--font-level_-2, clamp(0.63em, 0.64rem + -0.01vw, 0.64em) ); --_font-level_-1: var(--font-level_-1, clamp(0.80rem, 0.79rem + 0.07vw, 0.84rem) ); --_font-level-0: var(--font-level-0, clamp(1rem, 0.96rem + 0.21vw, 1.13rem) ); --_font-level-1: var(--font-level-1, clamp( 1.25 * var(--_font-level-0), 1.17rem + 0.42vw, 1.5rem) ); --_font-level-2: var(--font-level-2, clamp( 1.25 * var(--_font-level-1), 1.42rem + 0.73vw, 2rem) ); --_font-level-3: var(--font-level-3, clamp( 1.25 * var(--_font-level-2), 1.72rem + 1.19vw, 2.66rem) ); --_font-level-4: var(--font-level-4, clamp( 1.25 * var(--_font-level-3), 2.07rem + 1.85vw, 3.55rem) ); } * + * { margin-block-start: 1.2em;} /* shrink spacing between first and following paragraph in a list item when the first paragraph is bold/strong. Try to tie the first paragraph pseudo header closer to the following paragraph. */ li > p:has(strong):first-child { /* background: red; */ margin-block-end: -0.75em; } /* shrink spacing between list elements in tables of contents, badge displays */ div.toctree-wrapper * + *, div.contents * + *, div.release_info * { margin-block-start: 0.25em; } h1, h2, h3, h4, h5, h6 { line-height: 1.1; /* Larger spacing before header and smaller after to make header part of following section */ margin-block-end: 0.3em; } h1 { font-size: var(--_font-level-4); } /* remove whitespace at top of main column */ main h1 { margin-block-start: 0; } h2 { font-size: var(--_font-level-3); } h3 { font-size: var(--_font-level-2); } h4 { font-size: var(--_font-level-1); } /* snug header up to first paragraph of it's section. */ :is(h1,h2,h3,h4,h5,h6) + p { margin-block-start: 0; } body { background-color: #f5f5f5; color: rgb(20,20,20); font-family: sans-serif, Arial, Helvetica; font-size: var(--_font-level-0); margin:0; padding: 0 3em 0 14em; } /* -14em is size of table of contents/nav */ body > .header { margin: 0 0 0 -14em;} body > header > div.mobile { display:none; } body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;} body > .footer { margin: 1em 0 1em -14em; clear:both;} body > .navigation { float: left; margin-left: -14em; margin-inline-start: -14em; margin-block-start: unset; width: 14em; } body > .content { margin: 0; width: 100%; } body > .header > #searchbox { position: absolute; right: 1em; top: 1em;} body > .content > #subnav { position: absolute; right: 1.5em; top: 6em;} main { line-height: calc(1.5 * 1em); max-width: 65ch; } /* full bleed for highlighted example code. This works for highlighted code directly in each section. If the example is inside a list, table etc, the list/table is constrained to 65ch and we don't get a full bleed example. div.section *:not(div[class^=highlight-]):not(div[class^=highlight-] *):not(div.section) { max-width: 65ch; } */ /* trying to full bleed highlighted code section using using grid layout. Doesn't work as each header level inserts a div.section, so the grid is applied to main > div > div > div.section and highlighted code isn't in a grid display environment anymore. Subgrid would fix this but.... main > div > div { display: grid; grid-template-columns: 65ch 1fr; } main > div > div > * { grid-column: 1/2; } div[class^=highlight] { width: 100%; grid-column: 1 / 3; } */ /* try full bleed without grid. Make everything except the highlight container and its children 65ch in width. However need to explicitly set a width for some reason on the container and children. 100% or other relative width doesn't work. Probably again because of div.section being set to 65ch max width. Can use absolute size values, but how to calculate them when I don't know where the left margin is of the highlight div. main :not(div[class^=highlight-]):not(div[class^=highlight-] *) { position: relative; max-width: 65ch; } div[class^=highlight-], div[class^=highlight-] * { width: calc(100vw - 15em); } */ /* style */ :link { color: rgb(220,0,0); text-decoration: none;} /* improve contrast to AA */ .admonition.note :link { color: rgb(170,1,1); text-decoration: none;} :link:hover { text-decoration: underline solid clamp(1px, .3ex, 4px); text-underline-position: under; } :visited { color: rgb(200,0,0); text-decoration: none;} :visited:hover { /* would like to change from solid line to dashed, but because of privacy abusing people I can't change that value. So settle for darkgrey underline. */ text-decoration-color: darkgrey; } :is(h1,h2,h3,h4) > :link:hover { text-underline-offset: -0.1em; } a.toc-backref { color: #000000; } .header h1 { margin-left: 1em; } .menu { padding: 0; margin-right: 1em;} .menu ul { padding: 0; margin: 0; } .menu li { margin: 5pt 0; } .menu > ul > li > * { display: block; padding: 2pt 2pt 2pt 10pt; border: solid thin #dadada; background-color:#ffffff; } .menu > ul > li.current > * { background-color: #f0f0f0; border-block-end: solid medium #cccccc; } .menu ul li:first-child { margin-top:0;} .menu ul { list-style-type:none;} /* sub-menus are indented */ .menu > ul > li > ul, .menu > ul > li.current > ul { border:none; background-color: inherit; } .menu ul ul { margin-left: 1em; font-size: smaller; } /* sub-menu items draw a separator */ .menu ul ul > li { margin: 0; padding: 0.5em; border: none; border-top: solid thin #dadada; background-color: inherit; } .menu ul ul > li:first-child { border-top: none; } /* make submenu items clickable cross whole width of menu */ .menu ul ul > li > a { display: block; } .menu ul li.toctree-l2.current { background-color: #f0f0f0; border-inline-start: solid 2px rgb(220, 0, 0); padding-block: 1em; } /* related */ div.related { width: 100%; font-size: 90%; } div.related-top { border-bottom: solid thin #dadada;} div.related-bottom { border-top: solid thin #dadada;} div.related ul { margin: 0; padding: 0 0 0 10px; list-style: none; } div.related li { display: inline;} div.related li.right { float: right; margin-right: 5px; } .footer { font-size: small; text-align: center; color: black; } .footer img { vertical-align: middle; } .content { padding: 1em; border: solid thin #dadada; background-color: #f7f7f7; } /* style for the floating release_info badge block on the home page */ #roundup-issue-tracker .release_info { float: right; width: auto; border: solid thin #dadada; background-color:#f5f5f5; padding: 1em; margin: 1em; } table { border-collapse: collapse; border-spacing: 1px; background-color: #fafafa; } table:has(caption) { margin-block: 1em; } table caption { font-weight: bold; font-size: smaller; } table.footnote { font-size: var(--_font-level_-1); position: relative } table.footnote::before { border: 1px solid black; content: ""; left: 0; position: absolute; top: 0; width: 25%; } table.captionbelow { caption-side: bottom; } td { /* pull text away from borders */ padding-inline: 0.5em; } td > p { /* remove top margin on a p inside table cell so that columns with paragraphs align at top of cell rather than leaving a blank margin */ margin-block-start: 0px; } input, textarea { border-width: 1px; } a.headerlink { font-size: 0.8em; margin-left: 0.3em; color: #c99; } div.admonition { padding-inline: 1em; padding-block: 0.25em; border-inline-start: grey solid 4px; background-color: #dfdfdf; } div.admonition.caution { border-inline-start: red solid 4px; } div.admonition.warning { border-inline-start: yellow solid 4px; } p.admonition-title { border-block-end: grey solid 2px; font-weight: bold; font-size: larger; margin-block: 0; } div.admonition.caution p.admonition-title { border-block-end: red solid 2px; } dt { font-weight: bold; margin-block-start: 1em;} dt + dd { margin-block-start: 0.25em; } dd p.first { margin-block-start: 0; } dd > ul:first-child { /* reduce indent with list inside dd. I want to reduce margin-inline-start on dd but :has(> ul:first-child) doesn't work in firefox yet, so use negative margin on ul. */ margin-inline-start: -32px; } #skiplink { display: block; margin-block-start: 1em; margin-inline-start: 1em;} #skiplink a { /* force stuff for screenreader off screen */ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; padding: 0 0.75em; font-weight: bold; } #skiplink a:focus { position: static; width: auto; height: auto; } /* remove solid black border when focus is around the main section due to activation of skip-link. Page jumps there, that's enough. */ #main:focus-visible {outline: none;} /* Prevent examples from extending outside the viewport */ /*div.highlight > pre { overflow-wrap: anywhere; white-space: break-spaces; }*/ /* improve color contrast to AA against yellowish highlight bg */ div.highlight .c1 { color: rgb(3,114,3); } div.highlight .na { color: rgb(220,2,2); } /* Forcing wrap in a pre leads to some confusing line breaks. Use a horizontal scroll. Indicate the scroll by using rounded scroll shadows. https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ https://blogit.create.pt/pedrolopes/2022/03/24/css-scroll-shadows/ */ div.highlight > pre { overflow-wrap: normal; overflow-x: auto; /* Shadows */ background-image: /* Shadow covers */ linear-gradient(to right, #f5f4d8, #f5f4d8), linear-gradient(to right, #f5f4d8, #f5f4d8), /* Shadow */ radial-gradient(farthest-side at 0px 50%, rgba(181, 181, 113, 0.75), rgba(255, 255, 255, 0)), radial-gradient(farthest-side at 100% 50%, rgba(181, 181, 113, 0.75), rgba(255, 255, 255, 0)); /* square shadows */ /* linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); */ background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-color: #f5f4d8; background-size: 20px 100%, 20px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; padding: 0.5em; } /* https://moderncss.dev/totally-custom-list-styles/ make a list use multiple columns */ ul.multicol { display: grid; /* adjust the `min` value to your context */ grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); grid-gap: 0 1rem; /* no row gap */ } ul.multicol > * { margin-block-start: 0; /* remove spacing added by * + * here */ } ul.multicol > li > p { /* remove spacing around paragraphs to tighten up list */ margin: 0; } div.file_insert { /* use to insert COPYING into license.txt */ background: #f3f1cc; padding-inline: 0.5em; } table.valign-top tbody td { vertical-align: top; } .footnote-list { border: lightgrey dotted 2px; font-size: smaller; margin-inline: 2em; padding-inline: 1em; } aside.footnote > span + p { margin-block-start: unset; } /* consider highlighting header element that is a target */ /* :target > :is(h1,h2,h3,h4,h5,h6) { background: rgb(254, 227, 227); outline: rgb(254, 227, 227) solid 3px; padding: 0.3em; } */ /* move the target off the top of the viewport by a little */ :target { scroll-margin-block-start: 2em; } /* Make feature blocks look like raised cards for some variety. */ div.card { box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; padding: 1em; }