style.css

/* 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;
}