site/style.css

Ref: main v0.0.5   Size: 2.1 KiB   History

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The tab icon inverts with the reader's theme; the page follows it — unless
   the reader has said otherwise, in which case data-theme wins over the
   browser. Firefox reports a preference from its own appearance setting
   rather than the system's, so "the browser knows" is not enough on its own. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1a1a1a; --fg: #ececec; }
}

:root[data-theme="dark"] { --bg: #1a1a1a; --fg: #ececec; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: monospace;
  max-width: 72ch;
  margin: 0 auto;
  padding: 1em;
  line-height: 1.5;
}

a { color: inherit; }

/* The theme control is a nav word that happens to be a button. */
.theme {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Where you are goes left; what you are signed in as, and how the page
   looks, go right. */
nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1em; margin-bottom: 2em; }
nav a.active { font-weight: bold; text-decoration: none; }
nav .right { margin-left: auto; }
nav .sep { opacity: 0.5; }
/* "light" is a character wider than "dark": reserve the wider word so the
   nav does not shift when the theme flips. */
nav .theme { display: inline-block; min-width: 5ch; text-align: right; }

h1 { margin-bottom: 0.5em; }
h2 { margin-top: 1.5em; margin-bottom: 0.5em; }
h3 { margin-top: 1em; margin-bottom: 0.5em; }

p, ul, ol { margin-bottom: 1em; }
ul, ol { padding-left: 2em; }
li { margin-bottom: 0.25em; }

/* The contents list of a long page: links, not bullets. */
.toc { margin-bottom: 2em; }
.toc a { display: block; margin-bottom: 0.25em; }

pre {
  padding: 1em;
  margin-bottom: 1em;
  overflow-x: auto;
  border: 1px solid;
}

table { border-collapse: collapse; margin-bottom: 1em; }
th, td { border: 1px solid; padding: 0.25em 0.75em; text-align: left; }

code { word-break: break-all; }
pre code { word-break: normal; }