docstyle.css

:root {
  --color: #111111;
  --back: #c2c3c5;
  --card-back: white;
  --card-head: hsl(220, 20%, 85%);
  --card-head-active: hsl(220, 80%, 70%);
  --focus: hsl(220, 50%, 50%);
  --code: rgb(255 255 185);
  --sidebar-width: 200px;
  --content-width: 800px;
  --layout-gap: 0.5em;
  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
  --content-back: #f8f8f8;
  color-scheme: dark light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #eeeeee;
    --back: #111111;
    --card-back: rgb(55.25, 55.25, 55.25);
    --card-head: hsl(220, 20%, 30%);
    --card-head-active: hsl(220, 80%, 30%);
  }
}

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: arial, ui-sans-serif, sans-serif;
  font-size: 1em;
  color: var(--color);
  background-color: var(--back);
}
html.sitelayout,
body.sitelayout {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: "header" "main" "sidebar" "footer";
  gap: var(--layout-gap);
  max-width: var(--doc-body-width);
  margin: 0 auto;
}
html.sitelayout:has(aside),
body.sitelayout:has(aside) {
  grid-template-columns: auto var(--sidebar-width);
  grid-template-areas: "header header" "main sidebar" "footer footer";
}
@media (width <= 1000px) {
  html.sitelayout:has(aside),
  body.sitelayout:has(aside) {
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}
html header,
body header {
  grid-area: header;
  /* background-color: #f0f0f0; */
  display: flex;
}
@media print {
  html header,
  body header {
    display: none !important;
  }
}
html header > *,
body header > * {
  align-self: flex-end;
  display: inline-block;
}
html header > *:not(:first-child),
body header > *:not(:first-child) {
  margin-left: var(--layout-gap);
}
html header > .logo,
body header > .logo {
  font-size: 160%;
  font-weight: bold;
}
html header a,
body header a {
  text-decoration: none;
  width: 12ch;
  text-align: center;
  padding: 0.2ch 1ch;
  transition: box-shadow 0.3s ease-in-out;
}
html header a:hover,
body header a:hover {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}
html aside,
body aside {
  grid-area: sidebar;
  background-color: lime;
  padding: var(--layout-gap);
}
@media print {
  html aside,
  body aside {
    display: none !important;
  }
}
html main,
body main {
  grid-area: main;
  background-color: var(--content-back);
  padding: var(--layout-gap);
}
html footer,
body footer {
  grid-area: footer;
  background-color: lightblue;
  padding: var(--layout-gap);
}

@media (width > 800px) {
  body {
    padding: 8px;
  }
}
/* apply a natural box layout model to all elements, but allowing components to change */
*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  max-width: 600px;
  height: auto;
}

svg {
  color: currentcolor;
}
svg.button {
  width: 2em;
  height: 2em;
}
svg.button .object {
  fill: hsl(220, 80%, 30%);
  fill-opacity: 1;
}
svg.button .connect {
  fill: #00cc00;
  fill-opacity: 1;
}
svg.icon {
  user-select: none;
}

p,
pre,
code,
h2,
h3,
h4 {
  margin: 0;
  min-height: 1rem;
}
p > img,
p > svg,
pre > img,
pre > svg,
code > img,
code > svg,
h2 > img,
h2 > svg,
h3 > img,
h3 > svg,
h4 > img,
h4 > svg {
  height: 1em;
  height: auto;
}
p > img:first-child,
p > svg:first-child,
pre > img:first-child,
pre > svg:first-child,
code > img:first-child,
code > svg:first-child,
h2 > img:first-child,
h2 > svg:first-child,
h3 > img:first-child,
h3 > svg:first-child,
h4 > img:first-child,
h4 > svg:first-child {
  margin-right: 0.2em;
}
p + p,
p + pre,
p + code,
p + h2,
p + h3,
p + h4,
pre + p,
pre + pre,
pre + code,
pre + h2,
pre + h3,
pre + h4,
code + p,
code + pre,
code + code,
code + h2,
code + h3,
code + h4,
h2 + p,
h2 + pre,
h2 + code,
h2 + h2,
h2 + h3,
h2 + h4,
h3 + p,
h3 + pre,
h3 + code,
h3 + h2,
h3 + h3,
h3 + h4,
h4 + p,
h4 + pre,
h4 + code,
h4 + h2,
h4 + h3,
h4 + h4 {
  margin-top: 0.5rem;
}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

h2,
h3,
h4 {
  text-wrap: balance;
  font-family: arial, ui-sans-serif, sans-serif;
  font-weight: bold;
}

h2 {
  font-size: 1.6em;
  min-height: 1.6em;
}

h3 {
  font-size: 1.25em;
  min-height: 1.25em;
}

h4 {
  font-size: 1em;
  min-height: 1em;
}

code,
.code,
code.hljs,
pre > code {
  background-color: var(--code);
  color: #111111;
  font-size: 1rem;
  font-family: "Courier New", Courier, monospace;
}
@media print {
  code,
  .code,
  code.hljs,
  pre > code {
    border: 1px solid #111111;
  }
}

p > code {
  padding-left: 8px;
  padding-right: 4px;
}

pre > code {
  display: block;
  border-radius: 8px;
  padding: 4px;
}

label,
input,
input + span,
input::placeholder,
select,
output,
button {
  display: inline-block;
  font-size: inherit;
  margin: 0;
  border: 1px solid transparent;
  padding: 0.1em 0.2em;
  color: currentcolor;
}

input[type=color] {
  padding: 0;
  border: 0;
}

input::placeholder {
  padding-top: 0.4em;
  font-size: 0.8em;
}

label {
  cursor: pointer;
  height: 1.6em;
}
label > img,
label > .icon {
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
}

input,
select,
button {
  border-color: var(--color);
}

input,
select {
  width: 22ch;
  border-radius: 0.2em;
}

select {
  padding-left: 0;
}

select:invalid,
input:invalid {
  border-color: #ff5555;
}

input[type=checkbox],
input[type=radio] {
  width: 2ch;
  vertical-align: baseline;
}

dialog::backdrop {
  background-color: rgba(200, 200, 200, 0.7);
}

dialog {
  position: relative;
  padding: 1rem;
  background-color: canvas;
  border: 0;
}
dialog .u-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 1.6rem;
  width: 1.6rem;
  background-color: red;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 12L36 36M36 12L12 36' stroke='white' stroke-width='8' stroke-linecap='round' /></svg>");
  z-index: 1 !important;
  user-select: none;
  cursor: pointer;
}
dialog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>");
}

nav {
  position: fixed;
  min-height: 100%;
  width: 24ch;
  z-index: 1;
  left: -24ch;
  transition: all 0.2s;
  padding: 1rem 0.2rem 0.2rem;
  background-color: var(--card-back);
}
nav.inpage {
  position: absolute;
}
nav.open {
  left: 0;
}
nav.inpage.open + main {
  margin-left: 24ch;
}
@media print {
  nav.inpage.open + main {
    margin-left: 0;
  }
}
nav a,
nav a:hover {
  text-decoration: none;
}
@media print {
  nav {
    display: none;
  }
}

main {
  transition: margin-left 0.2s;
}

.u-header {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0.5rem;
}
.u-header .icon {
  margin-right: 0.5rem;
  width: 2.6rem;
  height: 2.6rem;
  vertical-align: top;
}
.u-header h1 {
  margin: 0;
  font-size: 2.4rem;
  font-family: arial, ui-sans-serif, sans-serif;
  font-weight: bold;
}

.u-navbar {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0.5rem;
  padding: 8px 16px;
  background-color: hsl(220, 80%, 30%);
  color: white;
}
.u-navbar > .gap {
  flex-grow: 2;
}
.u-navbar > a {
  text-decoration: none;
  font-size: 1.25em;
  min-width: 2em;
  padding: 0 0.25rem;
}
.u-navbar > a:hover {
  border-color: var(--focus);
  background-color: var(--focus);
}
.u-navbar > img,
.u-navbar > svg {
  padding: 0;
  min-width: 1.4em !important;
  width: 1.4em !important;
  height: 1.4em !important;
}
.u-navbar > *:not(:first-child) {
  margin-left: 0.25rem;
}
@media print {
  .u-navbar {
    display: none;
  }
}

.error,
.warning,
.invalid {
  border: 2px solid #ff1111 !important;
  background-color: #ffcccc !important;
  color: #111111;
}

.valid {
  border: 2px solid #00cc00 !important;
  background-color: #ccffcc !important;
  color: #111111;
}

@media print {
  .noprint {
    display: none !important;
  }
}

h2 {
  clear: both;
}

table {
  empty-cells: show;
  border-collapse: collapse;
  border-left: solid 1px #203050;
  border-right: solid 1px #203050;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
table thead tr {
  background-color: #203050;
}
table thead tr th {
  vertical-align: top;
  padding: 0.2em 0.6em;
  color: white;
  font-weight: bold;
}
table td {
  vertical-align: top;
  padding: 0.2em 0.6em;
  border-bottom: 1px solid #203050;
}

.plaincard,
.imgcard,
.iconcard {
  position: relative;
  margin: 0.5rem 0.5rem 0.5rem 0;
  width: 100%;
  max-width: 100%;
  background-color: var(--card-back);
  page-break-inside: avoid;
}
.plaincard > h3,
.imgcard > h3,
.iconcard > h3 {
  margin-top: 0;
}

.plaincard {
  padding: 0.25rem;
  min-height: 6rem;
}

.iconcard {
  padding: 0.5rem 0.5rem 0.5rem 5rem;
  min-height: 5.4rem;
}
.iconcard svg {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  height: 4rem;
  width: 4rem;
}

.imgcard {
  padding: 0.25rem 0.25rem 0 9.85rem;
  min-height: 7.2rem;
}
.imgcard img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 9.6rem;
  max-height: 7.2rem;
}

img[title=w200] {
  width: 200px;
}

img[title=w400] {
  width: 400px;
}

img[title=w600] {
  width: 600px;
}

.warning {
  margin: 0.2rem;
  padding: 0.4rem;
  border-radius: 0.4rem;
}

a[href^=http]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  margin-left: 0.25em;
  background-size: 1em;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.689 4v4.918h13.114l-17.049 17.05 3.279 3.606 17.377-17.05v12.787H44V4z' /%3E%3Cpath d='M33 22.99V40H8V15h17v-4l-21 .001V44h33V22.952z' /%3E%3C/svg%3E");
}

@media print {
  html,
  body {
    font-size: 0.66em;
    background-color: white;
  }
  .short {
    border: 1px solid silver;
  }
}

/*# sourceMappingURL=docstyle.css.map */