update `public_html` static files

public_html/css/style.css

@@ -1,4 +1,13 @@
+/*
+ * css styling for bavbavhaus.net
+ *
+ * A dark mono-sized monofont, two-column layout stylesheet with "compact"
+ * markdown formatting of html generated by `pandoc`.
+ *
+ * /
+
 /* variables */
+
 :root {
   --font-size: 9pt;
 	--line-height: 1.25;
@@ -21,8 +30,11 @@
   --bright-magenta: #ffb1c0;
   --bright-cyan: #92ccff;
   --bright-white: #ffffff;
+  --md-formatting-color: var(--blue);
+  --error-color: var(--red);
 }
 
+/* wider screens */
 @media (min-width: 120ch) {
   :root { 
     --font-size: 12pt;
@@ -31,20 +43,36 @@
 
 /* reset */
 
-* {
+:root {
   box-sizing: border-box;
-  margin: unset;
+  text-size-adjust: none;
-  hyphens: auto;
+  -moz-text-size-adjust: none;
-  overflow-wrap: anywhere;
+  -webkit-text-size-adjust: none;
-  scrollbar-width: none;
 }
 
-/* root */
+*, 
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+
+/* root, * */
 
 :root {
 	color: var(--white);
 	background-color: var(--black);
   font: var(--font-size)/var(--line-height) var(--font-family);
+  overflow-wrap: break-word;
+}
+
+*,
+*::before,
+*::after {
+  font: inherit;
+  scrollbar-width: none;
 }
 
 ::selection {
@@ -52,120 +80,104 @@
   background-color: var(--white);
 }
 
-/* content sectioning */
+/* blocks */
-
-address {
-  font-style: unset;
-}
 
 h1, h2, h3, h4, h5, h6 {
-  hyphens: none;
+  text-wrap: balance;
-	font-size: unset;
   font-weight: bold;
 }
 
-h1::before {
+h1::before { content: "#"; }
-  content: "#";
+h2::before { content: "##"; }
-}
+h3::before { content: "###"; }
-
+h4::before { content: "####"; }
-h2::before {
+h5::before { content: "#####"; }
-  content: "##";
+h6::before { content: "######"; }
-}
-
-h3::before {
-  content: "###";
-}
-
-h4::before {
-  content: "####";
-}
-
-h5::before {
-  content: "#####";
-}
-
-h6::before {
-  content: "######";
-}
 
 :is(h1, h2, h3, h4, h5, h6)::before {
-  color: var(--blue);
+  color: var(--md-formatting-color);
 }
 
-:is(h1, h2, h3, h4, h5, h6) * {
+article :is(h1, h2, h3, h4, h5, h6) {
-  hyphens: none;
-}
-
-/* text content */
-
-:is(h1, h2, h3, h4, h5, h6) {
   margin-top: 2rlh;
-  margin-bottom: 1rlh;
 }
 
-:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) +
+article :is(blockquote, dl, div, figure, hr, menu, ol, p, pre, ul) {
-:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) {
   margin-top: 1rlh;
 }
 
-blockquote {
+article :is(blockquote, div)>:is(blockquote, div, figure, hr, menu, ol, p, pre, ul):first-child {
+  margin-top: unset;
+}
+
+blockquote,
+figcaption,
+dd {
   position: relative;
   margin-left: 1ch;
 }
 
-blockquote::before {
+blockquote::before,
-  content: ">";
+figcaption::before,
+dd::before {
   position: absolute;
   left: -1ch;
-  color: var(--blue);
+  color: var(--md-formatting-color);
+}
+
+blockquote::before {
+  content: ">";
+}
+
+figcaption::before {
+  content: "!";
+}
+
+dd::before {
+  content: ":";
 }
 
 dt {
   font-style: italic;
 }
 
-dd {
+figure {
-  position: relative;
+  display: grid;
-  margin-left: 1ch;
+  grid-template-rows: round(down, calc(min(160ch, 100vw)/2), 1rlh) auto;
 }
 
-dd::before {
+figure img {
-  content: ":";
+  place-self: center;
-  position: absolute;
-  left: -1ch;
-  color: var(--blue);
 }
 
-dd :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
+hr {
+	color: unset;
+	border: unset;
+}
+
+hr::after {
+  content: "---";
+  color: var(--md-formatting-color);
+}
+
+:is(ol, ul, menu, dd, li) :is(blockquote, div, figure, hr, menu, ol, p, pre, ul) {
   margin-top: unset;
 }
 
-figcaption {
+ol, ul, menu {
-  position: relative;
-  margin-left: 1ch;
-}
-
-figcaption::before {
-  content: "!";
-  position: absolute;
-  left: -1ch;
-  color: var(--blue);
-}
-
-ol {
-  padding-left: 2ch;
-}
-
-ul, menu {
   padding-left: 1ch;
 }
 
-:is(ol, ul, menu) :is(ol, ul, menu) {
+ol:has(li:nth-child(10)) {
-  margin-top: unset;
+  padding-left: 2ch;
+}
+
+ol:has(li:nth-child(100)) {
+  padding-left: 3ch;
 }
 
 li::marker {
-  color: var(--blue);
+  color: var(--md-formatting-color);
 }
 
 ol>li::marker {
@@ -176,45 +188,46 @@ ul>li::marker {
 	content: "-";
 }
 
-li :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
+li p + p {
-  margin-top: unset;
+  text-indent: 2ch;
 }
 
-li p+p {
-  text-indent: 1ch;
-}
 
-hr {
+p {
-	color: unset;
+  hyphens: auto;
-	border: unset;
-}
-
-hr::after {
-  content: "---";
-  color: var(--blue);
 }
 
 pre {
-  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
 pre::before,
 pre::after {
   display: block;
   content: "```";
-  color: var(--blue);
+  color: var(--md-formatting-color);
 }
 
-/* inline text semantics */
+
+img, svg {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
+
+.math.display::before,
+.math.display::after {
+  content: "$$";
+  color: var(--md-formatting-color);
+}
+
+
+/* inlines */
 
 a {
-  color: unset;
+  color: inherit;
   cursor: pointer;
-  text-decoration: underline;
+  text-decoration: underline solid var(--blue) 1pt;
-}
-
-a:link {
-  text-decoration-color: var(--blue);
 }
 
 a:active {
@@ -230,42 +243,98 @@ a:visited:active {
   text-decoration-color: var(--red);
 }
 
+code {
+  font-family: monospace;
+}
+
 :not(pre)>code::before,
 :not(pre)>code::after {
   content: "`";
   color: var(--blue);
 }
 
-sup {
+
+em {
+  font-style: italic;
+}
+
+mark {
+  color: var(--orange);
+  background: unset;
+}
+
+strong {
+  font-weight: bold;
+}
+
+sup, sub {
+  font-size: unset;
+  vertical-align: unset;
   line-height: 0;
 }
 
+sup::before,
+sup::after {
+  content: "^";
+  color: var(--md-formatting-color);
+}
 
-/* image and multimedia */
+sub::before,
+sub::after {
+  content: "~";
+  color: var(--md-formatting-color);
+}
 
-img {
+u {
-  max-width: 100%;
+  text-decoration: var(--red) wavy underline;
+}
+
+del, ins {
+  text-decoration: unset;
+}
+
+del { color: var(--red); }
+del::before { content: "[-"; }
+del::after { content: "-]"; }
+
+ins { color: var(--green); }
+ins::before { content: "{+"; }
+ins::after { content: "+}"; }
+
+.math.inline::before,
+.math.inline::after {
+  content: "$";
+  color: var(--md-formatting-color);
 }
 
 
-/* table content */
+/* tables */
 
 table {
-  width: 100%;
+  display: block;
-  margin-inline: auto;
+  margin-top: 1rlh;
+  margin-left: auto;
+  margin-right: auto;
   border-spacing: 0;
+  overflow-x: scroll;
+}
+
+thead {
+  font-weight: bold;
+  overflow-x: scroll;
 }
 
 th, td {
-  padding-inline: 1ch;
+  padding-left: 1ch;
+  padding-right: 1ch;
 }
 
 th {
-  hyphens: none;
+  vertical-align: bottom;
+  border-bottom: 1pt solid white;
 }
 
-tr {
+td {
-  line-height: calc(1rlh - 2px); /* @hack */
   vertical-align: baseline;
 }
 
@@ -275,13 +344,14 @@ table caption {
 
 table caption::before {
   content: "!";
-  color: var(--blue);
+  color: var(--md-formatting-color);
 }
 
+
 /* layout */
 
 body {
-  width: round(down, min(160ch, 100vw), 1ch);
+  width: round(down, min(160ch, 100vw), 2ch);
   height: 100vh;
   margin-left: auto;
   margin-right: auto;
@@ -311,13 +381,6 @@ main>article#recto>* {
   overflow-y: scroll;
 }
 
-/* article.post */
-
-article.post>header,
-article.post>nav {
-  margin-top: 1rlh;
-  margin-bottom: 1rlh;
-}
 
 /* div.horizontal */
 
@@ -334,7 +397,11 @@ div.horizontal>* {
   scroll-snap-align: end;
 }
 
-/* .display.math */
+/* pandoc specific */
+
+.smallcaps {
+  font-variant: small-caps;
+}
 
 .display.math {
   display: block;
@@ -352,11 +419,6 @@ div.horizontal>* {
   display: inline;
 }
 
-a.footnote-ref>sup {
-  font-size: unset;
-  vertical-align: unset;
-}
-
 a.footnote-back {
   color: var(--blue);
 }