website/site/site.css

:root {
  --width      : 36;
  --rounding   : 8px;
  --accent     : #1d3456;
  --dark-grey  : #ddd;
  --grey       : #eee;
  --light-grey : #f8f8f8;
  --code       : #bdd5f6;
  --content    : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem));
}

@font-face {
  font-family : 'Proza';
  font-weight : 400;
  src         : url('/proza-r.woff2') format('woff2');
}

@font-face {
  font-family : 'Proza';
  font-weight : 300;
  src         : url('/proza-l.woff2') format('woff2');
}

@font-face {
  font-family : 'Proza';
  font-weight : 300;
  font-style  : italic;
  src         : url('/proza-li.woff2') format('woff2');
}

*,
::before,
::after {
  box-sizing : border-box;
  margin     : 0;
}

html {
  height                   : 100%;
  font-family              : Proza,sans-serif;
  font-weight              : 300;
  font-size                : clamp(16px, 100vw / var(--width), 20px);
  font-feature-settings    : 'onum','pnum';
  line-height              : 1.5;
  -webkit-text-size-adjust : none;
  text-size-adjust         : none;
}

body {
  display            : grid;
  grid-template-rows : max-content 1fr max-content;
  height             : 100%;
  background         : var(--accent);
  color              : #fff;
}

header,
footer {
  font-weight : 400;
}

header {
  display               : grid;
  grid-template-columns : 30px calc(min(100vw, 1rem * var(--width)) - 60px - 2rem) 30px;
  justify-content       : center;
  align-items           : center;
  padding               : 0 1rem;
}

header svg {
  fill : #fff;
}

nav ul {
  display           : grid;
  grid-auto-flow    : column;
  grid-auto-columns : min-content;
  justify-content   : center;
  padding           : 1rem;
}

nav li {
  display : block;
}

nav a {
  display         : block;
  padding         : 0 0.5rem;
  border-radius   : 0.75rem;
  color           : inherit;
  text-decoration : none;
}

nav a.section {
  background : #fff;
  color      : var(--accent);
}

main {
  padding-bottom : 1rem;
  background     : #fff;
  color          : #000;
}

footer {
  padding    : 1rem;
  text-align : center;
}

footer > a{
  color                 : #fff;
  text-decoration-color : #fff;
}

h1,
h2,
h3,
p,
dl,
ol,
ul,
pre,
code,
table,
figure,
form,
main > div {
  max-width  : calc(1rem * var(--width));
  margin     : 0 auto;
  padding    : 1rem 1rem 0;
}

h1,
h2,
h3 {
  font-weight : 400;
  line-height : 1.1;
}

h1 {
  font-size : 2rem;
}

h2 {
  padding-top : 2rem;
  font-size   : 1.5rem;
}

h3 {
  padding-top : 2rem;
  font-size   : 1.1rem;
}

dl {
  padding : 0 2rem;
}

dt {
  padding-top : 1rem;
}

dd {
  padding-left : 1rem;
}

ol,
ul {
  padding : 1rem 2rem 0 3rem;
}

ul ul {
  padding : 0 0 0 1rem;
}

table {
  margin-top            : 1rem;
  border-collapse       : collapse;
  font-feature-settings : 'lnum','tnum';
}

thead {
  position : sticky;
  top      : 0;
}

th,
td {
  padding : 0.25rem 0.5rem;
}

th {
  background  : var(--accent);
  color       : #fff;
  font-weight : 400;
  text-align  : left;
}

.repotable tr:nth-child(even) td {
  background : var(--grey);
}

.numeric {
  text-align : right;
}

.negative {
  color : #f00;
}

figure,
form {
  width : max-content;
}

figure > img,
figure > svg {
  max-width : calc(100vw - 2rem);
}

form > div {
  padding       : 1rem;
  border-radius : var(--rounding);
  background    : var(--grey);
}

pre,
code {
  font                  : 0.7rem/1.1rem 'Consolas',Menlo,monospace;
  font-feature-settings : 'lnum','tnum';
}

pre {
  margin-top    : 1em;
  border-left   : 4px solid var(--accent);
  border-radius : var(--rounding);
  padding       : 4px 4px 4px 8px;
  background    : var(--code);
  overflow-x    : auto;
  width         : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem))
}

code {
  padding       : 2px 6px 2px;
  border-radius : var(--rounding);
  background    : var(--code);
}

a {
  color                     : var(--accent);
  text-decoration-color     : var(--accent);
  text-decoration-thickness : 1px;
  text-underline-offset     : 2px;
}

a:visited {
  color : inherit;
}

abbr {
  font-variant   : small-caps;
  text-transform : lowercase;
}

img,
svg {
  vertical-align : bottom;
}

input,
textarea,
select {
  border        : 2px solid var(--dark-grey);
  border-radius : var(--rounding);
  background    : #fff no-repeat center center;
  color         : #000;
}

:is(input, textarea, select):where(:active:not(:disabled), :focus) {
  border-color : var(--accent);
  outline      : none;
}

:is(input, textarea, select):disabled {
  background : var(--grey);
  color      : #000;
}

input:where([type="password"], [type="text"]),
textarea,
select {
  padding               : calc(0.25rem - 2px) calc(0.5rem - 2px);
  font-family           : Proza,sans-serif;
  font-weight           : 300;
  font-size             : 1rem;
  font-feature-settings : 'lnum','tnum';
  line-height           : 1.5;
}

input:where([inputmode="numeric"], [inputmode="decimal"]) {
  text-align : right;
}

select {
  -webkit-appearance  : none;
  appearance          : none;
  height              : 2rem;
  padding-right       : 30px;
  background-image    : url('/select.svg');
  background-position : right;
}

input:where([type="checkbox"], [type="radio"]) {
  -webkit-appearance : none;
  appearance         : none;
  width              : 22px;
  height             : 22px;
  margin             : calc(0.75rem - 11px) 0.25rem 0 0;
  vertical-align     : top;
}

input[type="checkbox"]:checked {
  background-image : url('/checkbox.svg');
}

input[type="radio"] {
  border-radius : 50%;
}

input[type="radio"]:checked {
  background-image : url('/radio.svg');
}

input[type="file"] {
  position : absolute;
  left     : -100vw;
}

button{
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-family : inherit;
  font-size   : inherit;
  line-height : inherit;
}

button:-moz-focus-inner {
  padding : 0;
  border  : 0;
}

button:where(:active, :focus) {
  outline : none;
}

button > span,
.button {
  display             : inline-block;
  padding             : 0 0.5rem;
  border              : 2px solid var(--accent);
  border-radius       : calc(0.75rem + 2px);
  background          : var(--accent);
  color               : #fff;
  font-weight         : 400;
  -webkit-user-select : none;
  user-select         : none;
  cursor              : pointer;
}

button:where(:active, :focus) > span,
.button:where(:active, :focus),
input[type="file"]:where(:active, :focus) + .button {
  background : #fff;
  color      : var(--accent);
}

.repotable {
    width       : 100%;
    border-radius: calc(0.75rem + 2px);
    overflow    : hidden;
    text-align  : left;
    vertical-align: top;
    width       : min(calc(1rem * var(--width) - 2rem),calc(100vw - 2rem));
}

.highlight > div {
  background    : var(--light-grey);
  overflow      : hidden;
  padding-right : 0.8rem;
  border-radius : var(--rounding * 2);
}

.highlight table {
  --horizontal : 0.8rem;
  --vertical   : 0.6rem;
  width        : 100%;
  margin       : 0;
  padding      : 0;
}

.highlight tr {
  display               : grid;
  grid-template-columns : max-content 1fr;
  gap                   : var(--horizontal);
  background : green;
}

.highlight td:first-child {
  padding    : var(--vertical) var(--horizontal);
  background : var(--grey);
  color      : #aaa;
}

.highlight td:last-child {
  overflow   : auto;
  padding    : var(--vertical) 0;
  background : transparent;
}

.highlight code {
  display    : block;
  padding    : 0;
  background : transparent;
}

.highlight :where(.c, .c1, .cm){
  color      : #aaa;
  font-style : italic;
}

.highlight :where(.o, .p){
  color : #aaa;
}

.highlight :where(.fm, .k, .kc, .kd, .nt),
.highlight .language-css :where(.nc, .nd, .nn, .s2){
  color : #c66;
}

.highlight :where(.na, .nb, .nf, .nv),
.highlight .language-css :where(.k, .kc, .kp, .kt),
.highlight .language-javascript .nx{
  color : #5b5;
}

.highlight :where(.cp, .nc, .ni, .nx),
.highlight .language-css :where(.n, .nv){
  color : #e94;
}

.highlight :where(.m, .mf, .mh, .mi, .s, .s1, .s2, .sr){
  color : #36b;
}

.photo-img {
    width: 100%;
}
.photo-mid {
    width: var(--content);
}
.photo-td {
    width: calc((var(--content) / 3) - (4 * 4px));
    padding: 4px;
}
.photo-table {
    width: var(--content);
    margin: auto;
    border: 0;
    padding: 0;
}

/* ASCIIDOCTOR FIXES */

.sect1, .sect0 {
    padding: 0;
}

div#preamble {
  padding: 0;
}