bavbavhaus.net/public_html/css/style.css

/* variables */
:root {
  --font-size: 10pt;
	--line-height: 1.25;
  --font-family: monospace;

  /* font-derived column width */
  --col-w: clamp(40ch, 80ch, 50vw);

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

/* reset */

* {
	box-sizing: border-box;
  margin: unset;
  hyphens: auto;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) rgba(0,0,0,0);
}

/* root */

:root {
	color: var(--black);
	background-color: var(--white);
  font: var(--font-size)/var(--line-height) var(--font-family);
}

::selection {
  color: var(--white);
  background-color: var(--black);
}

/*
body {
  margin: 0;
}
*/

/* content sectioning */

address {
  font-style: unset;
}

h1, h2, h3, h4, h5, h6 {
  hyphens: none;
	font-size: unset;
  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(--blue);
}

:is(h1, h2, h3, h4, h5, h6) * {
  hyphens: none;
}

/* text content */

:is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 2rlh;
  margin-block-end: 1rlh;
}

:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) +
:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) {
  margin-block-start: 1rlh;
}

blockquote {
  position: relative;
	margin-inline-start: 1ch;
}

blockquote::before {
  content: ">";
  position: absolute;
  left: -1ch;
  color: var(--blue);
}

dt {
  font-style: italic;
}

dd {
  position: relative;
  margin-inline-start: 1ch;
}

dd::before {
  content: ":";
  position: absolute;
  left: -1ch;
  color: var(--blue);
}

figcaption {
  position: relative;
  margin-inline-start: 1ch;
}

figcaption::before {
  content: "!";
  position: absolute;
  left: -1ch;
  color: var(--blue);
}

ol {
  padding-inline-start: 2ch;
}

ul, menu {
  padding-inline-start: 1ch;
}

:is(ol, ul, menu) :is(ol, ul, menu) {
  margin-block: unset;
}

li::marker {
  color: var(--orange);
}

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

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

li :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
  margin-block: unset;
}

hr {
	color: unset;
	border: unset;
  text-align: center;
}

hr::after {
  content: "---";
  color: var(--blue);
}

pre {
  margin-inline: 2ch;
  overflow-y: scroll;
}


/* inline text semantics */

a {
  color: unset;
  cursor: pointer;
  text-decoration: underline;
}

a:link {
  text-decoration-color: var(--blue);
}

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

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

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

code {
  color: var(--orange);
}

sup {
  line-height: 0;
}


/* image and multimedia */

img {
  max-width: 100%;
}


/* table content */

table {
  table-layout: fixed;
  border-collapse: collapse;
}

th, td {
  padding-inline: 1ch;
}

th {
  border-bottom: thin solid;
  vertical-align: bottom;
  hyphens: none;
}

td {
  vertical-align: top;
}

/* layout */

body {
  width: clamp(var(--col-w), calc(2*var(--col-w)), 100vw);
  height: 100vh;
  margin-inline: auto;
}

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

main>* {
  height: 100%;
}

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

/* article.post */

article.post {
  height: 100%;
  overflow-y: scroll;
}

article.post>header,
article.post>nav {
  margin-block: 1rlh;
}

/* 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-block: unset;
  scroll-snap-align: end;
}

/* .display.math */

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