path: root/src/content/style.css

:root {
  --color-fg: #171D1A;
  --color-bg: #F3F5F3;
  --color-2nd-fg: #4A5651;
  --color-2nd-bg: #E9EDEA;
  --color-3rd-fg: #6F7B76;
  --color-line: #CBD3CE;
  --color-line-soft: #DDE3DF;
  --color-accent: #1F6F5B;
  --color-accent-soft: #D8E9E2;
  --color-ochre: #9A6B1F;
  --color-code-bg: #E6EBE8;
  --color-pre-border: #CBD3CE;

  --link-url: url(img/link/light.svg);

  /* The generic families and nothing else: a named face is a
     dependency that is either installed or silently is not, and
     the ones worth naming here are Windows and macOS fonts that
     are absent on the systems this site is built for.  The reader
     has already chosen these three; the hierarchy is in which of
     them is used where, not in which face answers. */
  --font-body: sans-serif;
  --font-display: serif;
  --font-mono: monospace;

  color:            var(--color-fg);
  background-color: var(--color-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #E4EAE7;
    --color-bg: #121716;
    --color-2nd-fg: #A7B3AE;
    --color-2nd-bg: #19201E;
    --color-3rd-fg: #7E8A85;
    --color-line: #2C3733;
    --color-line-soft: #222B28;
    --color-accent: #5CC2A2;
    --color-accent-soft: #1B3A31;
    --color-ochre: #D9A85A;
    --color-code-bg: #1C2522;
    --color-pre-border: #2C3733;

    --link-url: url(img/link/dark.svg);
  }
}

a {
  color: var(--color-accent);
}

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


/* General declarations */

body {
  margin: 0px auto;
  padding: 1%;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 25px; }
h4, h5, h6 { font-size: 20px; }

code, pre, .mono {
  font-family: var(--font-mono);
}

code {
  background-color: var(--color-code-bg);
}

.icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}


/* Navigation header */

header {
  margin-bottom: 30px;
  padding: 12px 0px 12px 0px;
}

/* The home link is the logo.  It shares the row with the rest of
   the navigation rather than sitting on a line above it, so the
   nav and its list are both rows and everything centres on the
   same line. */
nav, nav ol {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

nav ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}


nav a {
  font-size: 18px;
  margin: 12px;
  text-decoration: none;
}

/* Twice the logo's own 16-unit grid, so every square it is drawn
   from lands on whole pixels. */
nav a img {
  width: 32px;
  height: 32px;
}

/* The languages are a second tier of navigation, not more of the
   first: smaller, and away to the end of the row.  The one being
   read is not a link, so it is dimmed to say so. */
nav ol.languages {
  margin-left: auto;
}

nav ol.languages a, nav ol.languages li {
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 6px;
}

/* The language being read is the one worth seeing, so it is the
   only one at full strength.  Whether one of the others has been
   followed before says nothing about where it goes, so visited
   and unvisited look alike. */
nav ol.languages li {
  color: var(--color-fg);
}

nav ol.languages a,
nav ol.languages a:visited {
  color: var(--color-2nd-fg);
}

nav ol.languages a:hover {
  color: var(--color-fg);
}


/* A collection's name on the front page heads the list under it
   rather than inviting a click, so it is set as a heading and only
   says it is a link when pointed at. */
h2.collection a {
  color: var(--color-fg);
  text-decoration: none;
}

h2.collection a:hover {
  text-decoration: underline;
}


/* What the site says about itself, under the navigation on every
   page --- the header's counterpart to the licence line at the
   foot of it. */
#tagline {
  margin: 0px 12px 6px 12px;
  font-size: 14px;
  color: var(--color-2nd-fg);
}


/* A published recording */

#media video, #media audio {
  width: 100%;
  max-width: 100%;
}

/* Both ways down are filenames, which want the same face as any
   other filename does. */
#media-links {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-2nd-fg);
}


/* Article bodies */

#published-at, #updated-at {
  color: var(--color-2nd-fg);
  font-size: 14px;
  font-style: italic;
}

blockquote {
  font-style: italic;
  color: var(--color-2nd-fg);
  padding-left: 10px;
  border-left: 3px solid var(--color-2nd-fg);
}

.collection-list {
  list-style-type: none;
}

.collection-list li {
  margin: 20px 0px;
}


/* Footer */

body > footer {
  font-size: 14px;
  padding: 12px 0px 12px 0px;
}

body > footer li {
  list-style-type: none;
  margin-top: 10px;
}

body > footer li a {
  margin-left: 5px;
}

.content-footer, .page-footer, #footnotes {
  border-top: 0.5px solid var(--color-2nd-fg);
}



/* Code blocks */

/* The "lineno" class is the default generated by Rouge for table-row in code blocks, see:
   https://github.com/rouge-ruby/rouge */
pre.lineno {
  margin-right: 3px;
  padding-right: 3px;
  border-right: 1px solid;
  border-color: var(--color-pre-border);
  text-align: right;
  user-select: none;
}

.highlight, .listingblock .content {
  border: 1px solid;
  border-color: var(--color-pre-border);
  border-radius: 10px;
  background-color: var(--color-code-bg);
}

pre {
  overflow: auto;
}


/* Code block anchors */

a.code-line-anchor {
  color: var(--color-fg);
  user-select: none;
  text-decoration: none;
}

a.code-line-anchor:hover {
  text-decoration: underline;
}


/* Header anchor */

div.header-anchor {
  color: var(--color-fg);
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

div.header-anchor h1,
div.header-anchor h2,
div.header-anchor h3,
div.header-anchor h4,
div.header-anchor h5,
div.header-anchor h6 {
  display: inline;
}


div.header-anchor img {
  visibility: hidden;
}

div.header-anchor:hover img {
  visibility: visible;
}


/* Plaintext code block links */

.plaintext {
  margin: auto auto 0 auto;
  text-align: right;
  font-family: var(--font-mono);
}

a.anchor {
  background: transparent var(--link-url) center right no-repeat;
  padding-right: 22px;
  margin-left: 10px;
  visibility: hidden;
}

h2:hover a.anchor {
  visibility: visible;
}


/* Fix asciidoc shortcoming */

.line-through {
  text-decoration: line-through;
}


/* Messages from the mailing list, rendered on the page they
   answer.  They take the secondary background so a thread reads as
   something quoted onto the page rather than as more of the page,
   which is the one thing the archive's own rendering makes obvious
   at a glance. */
#comments .message {
  background-color: var(--color-2nd-bg);
  border: 1px solid;
  border-color: var(--color-pre-border);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

/* A reply sits under what it answers.  The depth is capped because
   a long exchange nests further than a narrow screen has room for,
   and past a few levels the indentation stops telling you anything
   the order does not. */
#comments .message[data-depth="1"] { margin-left: 1rem; }
#comments .message[data-depth="2"] { margin-left: 2rem; }
#comments .message[data-depth="3"] { margin-left: 3rem; }
#comments .message[data-depth="4"] { margin-left: 4rem; }
#comments .message:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]):not([data-depth="3"]):not([data-depth="4"]) {
  margin-left: 5rem;
}

#comments .message-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  font-size: 0.9em;
}

#comments .from {
  font-weight: bold;
}

#comments .date, #comments .reply {
  color: var(--color-2nd-fg);
}

#comments .message-body {
  background-color: transparent;
  border: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  #comments .message[data-depth] { margin-left: 0; }
}