bavbavhaus.net/public_html/css/style.css

/*
 * 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;
  --font-family: monospace;

  /* colors */
  --black: #000000;
  --red: #fa3500;
  --green: #009843;
  --orange: #d06600;
  --blue: #856cff;
  --magenta: #ff1170;
  --cyan: #008cca;
  --white: #e2e2e2;
  --bright-black: #848484;
  --bright-red: #ff888e;
  --bright-green: #00c55b;
  --bright-orange: #ff8d48;
  --bright-blue: #ac9fff;
  --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;
  }
}

/* reset */

:root {
  box-sizing: border-box;
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

*, 
*::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 {
  color: var(--black);
  background-color: var(--white);
}

/* blocks */

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: bold;
}

h1::before { content: "#"; }
h2::before { content: "##"; }
h3::before { content: "###"; }
h4::before { content: "####"; }
h5::before { content: "#####"; }
h6::before { content: "######"; }

:is(h1, h2, h3, h4, h5, h6)::before {
  color: var(--md-formatting-color);
}

article :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2rlh;
}

article :is(blockquote, dl, div, figure, hr, menu, ol, p, pre, ul) {
  margin-top: 1rlh;
}

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,
figcaption::before,
dd::before {
  position: absolute;
  left: -1ch;
  color: var(--md-formatting-color);
}

blockquote::before {
  content: ">";
}

figcaption::before {
  content: "!";
}

dd::before {
  content: ":";
}

dt {
  font-style: italic;
}

figure {
  display: grid;
  grid-template-rows: round(down, calc(min(160ch, 100vw)/2), 1rlh) auto;
}

figure img {
  place-self: center;
}

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

ol, ul, menu {
  padding-left: 1ch;
}

ol:has(li:nth-child(10)) {
  padding-left: 2ch;
}

ol:has(li:nth-child(100)) {
  padding-left: 3ch;
}

li::marker {
  color: var(--md-formatting-color);
}

ol>li::marker {
  content: counter(list-item);
}

ul>li::marker {
	content: "-";
}

li p + p {
  text-indent: 2ch;
}


p {
  hyphens: auto;
}

pre {
  overflow-x: scroll;
}

pre::before,
pre::after {
  display: block;
  content: "```";
  color: var(--md-formatting-color);
}


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: inherit;
  cursor: pointer;
  text-decoration: underline solid var(--blue) 1pt;
}

a:active {
  color: var(--red);
  text-decoration-color: var(--red);
}

a:visited {
  text-decoration-color: var(--magenta);
}

a:visited:active {
  text-decoration-color: var(--red);
}

code {
  font-family: monospace;
}

:not(pre)>code::before,
:not(pre)>code::after {
  content: "`";
  color: var(--blue);
}


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);
}

sub::before,
sub::after {
  content: "~";
  color: var(--md-formatting-color);
}

u {
  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);
}


/* tables */

table {
  display: block;
  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-left: 1ch;
  padding-right: 1ch;
}

th {
  vertical-align: bottom;
  border-bottom: 1pt solid white;
}

td {
  vertical-align: baseline;
}

table caption {
  text-align: unset;
}

table caption::before {
  content: "!";
  color: var(--md-formatting-color);
}


/* layout */

body {
  width: round(down, min(160ch, 100vw), 2ch);
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

main>article#recto {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: scroll;
  scroll-snap-type: inline proximity;
}

main>article#recto>* {
  scroll-snap-align: end;
}

main>article#verso,
main>article#recto>* {
  overflow-y: scroll;
}


/* div.horizontal */

div.horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: scroll;
  scroll-snap-type: inline proximity;
}

div.horizontal>* {
  margin-top: unset;
  scroll-snap-align: end;
}

/* pandoc specific */

.smallcaps {
  font-variant: small-caps;
}

.display.math {
  display: block;
  text-align: center;
}

/* footnotes */

#footnotes>ol {
  list-style-position: inside;
  padding-left: unset;
}

#footnotes>ol>li>*:first-child {
  display: inline;
}

a.footnote-back {
  color: var(--blue);
}

a.footnote-back:active {
  color: var(--red);
}

/* internal links */

a.internal-next {
  color: var(--blue);
}

a.internal-next:active {
  color: var(--red);
}