bavbavhaus.net/public_html/css/style.css

/* variables */
:root {
	--font-size: 12pt;
	--line-height: 1.625;
  --font-family: monospace;

  /* font-derived vertical and horizontal units */
  --v-un: calc(var(--font-size) * var(--line-height));
  --h-un: 1ch;

  /* gaps and paddings */
  --body-padding-h: var(--h-un);
  --body-padding-v: var(--v-un);
  --main-gap-h: calc(2 * var(--h-un));
  --main-gap-v: 0;

  /* font-derived column width */
  --col-w: calc(clamp(33.33vw, 74ch, 100vw) - 2ch);

  /* colors */
  --fg-c: #000000;
  --bg-c: #ffffff;
	--link-c: hsl(240 100% 50%);
	--visited-c: hsl(270 100% 50%);
	--active-c: hsl(0 100% 50%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg-c: #ffffff;
    --bg-c: #000000;
    --link-c: hsl(240 100% 75%);
    --visited-c: hsl(270 100% 75%);
    --active-c: hsl(0 100% 75%);
  }
}

/* reset */
* {
	box-sizing: border-box;
  margin: unset;
  hyphens: auto;
}

*:focus {
  outline: var(--link-c) solid 1px;
}

/* root */
:root {
	color: var(--fg-c);
	background-color: var(--bg-c);
  font: var(--font-size)/var(--line-height) var(--font-family);
  scrollbar-width: thin;
  scrollbar-color: var(--link-c) rgba(0,0,0,0);
}

/* content sectioning */
address {
  font-style: unset;
}

h1, h2, h3, h4, h5, h6 {
	font-size: unset;
  font-weight: bold;
}

/* text content */
/*
:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul, div)) +
:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul, div)) {
  margin-block-start: var(--v-un);
}

:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul)) +
:is(article :is(h1, h2, h3, h4, h5, h6)) {
  margin-block-start: calc(2 * var(--v-un));
  margin-block-end: var(--v-un);
}

:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul, div)) +
:is(article :is(address, article, aside, footer, header, hgroup, nav, section, search)) {
  margin-block-start: var(--v-un);
}

:is(article :is(h1, h2, h3, h4, h5, h6)) +
:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul)) {
  margin-block-start: var(--v-un);
}

:is(article :is(h1, h2, h3, h4, h5, h6)) +
:is(article :is(h1, h2, h3, h4, h5, h6)) {
  margin-block-start: calc(2 * var(--v-un));
  margin-block-end: var(--v-un);
}

:is(article :is(h1, h2, h3, h4, h5, h6)) +
:is(article :is(address, article, aside, footer, header, hgroup, nav, section, search)) {
  margin-block-start: var(--v-un);
}

:is(article :is(address, article, aside, footer, header, hgroup, nav, section, search)) +
:is(article :is(blockquote, dl, figure, menu, ol, p, pre, ul, div)) {
  margin-block-start: var(--v-un);
}

:is(article :is(address, article, aside, footer, header, hgroup, nav, section, search)) +
:is(article :is(h1, h2, h3, h4, h5, h6)) {
}*/

article :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: calc(2 * var(--v-un));
  margin-block-end: var(--v-un);
}

article :is(blockquote, dl, figure, menu, ol, p, pre, ul, div) {
  margin-block-start: var(--v-un);
}

blockquote {
	margin-inline: calc(4 * var(--h-un));
}

ol, ul, menu {
  padding-inline-start: calc(4 * var(--h-un));
}

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

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

hr {
  margin-block-start: var(--v-un);
	color: unset;
	border: unset;
  text-align: center;
}

hr:after {
  content: "---";
}

dt {
  font-style: italic;
}

dd {
  padding-inline-start: calc(4 * var(--h-un));
}

/* inline text semantics */
a {
  cursor: pointer;
  text-decoration: underline;
}

a:link {
  color: var(--link-c);
}

a:link:active {
  color: var(--active-c);
}

a:visited {
  color: var(--visited-c);
}

a:visited:active {
  color: var(--active-c);
}

/* layout */
body>main {
  width: 100vw;
	height: 100vh;
	display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col-w);
	overflow-x: scroll;
}

body>main>* {
	overflow-y: scroll;
  padding: var(--v-un) var(--h-un);
}

/* fenced divs */
div.horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: scroll;
}