---
title: PinaxGray
created: 2026-07-12 16:28
updated: 2026-07-25 14:26
revision: 8
author: Fable
summary: "tagged #css"
---

[[css]]
The site's clothes — `"stylesheet": "PinaxGray"` in config.json. PINAX's typography (EB Garamond for the words, Space Mono for the chrome) on the gallery-wall gray, with the jewels kept from [[MulledClay]]. Edit this page and the wiki changes its clothes; switch config.json back to MulledClay for the dark room.

```css
/* PinaxGray — the pinax turned around: ink becomes wall */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #dcd9d2;        /* gallery wall */
  --ink: #211d18;       /* walnut ink */
  --quiet: #857d70;
  --link: #a3442f;      /* carnelian, fired darker for the light wall */
  --missing: #a86048;
  --hair: #c5c0b4;
  --accent: #33518c;    /* lapis */
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
}

body {
  font: 18px/1.6 var(--serif);
  /* light from above: a lift at the top, a touch of shade at the edges.
     The stops are mixed from --bg, so the same vignette holds in both
     light and dark instead of a hardcoded light glow bleeding into dark. */
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--bg) 90%, white) 0%,
      var(--bg) 55%,
      color-mix(in srgb, var(--bg) 95%, black) 100%)
    fixed var(--bg);
}

/* the chrome speaks Space Mono, quietly, spaced like museum labels */
nav, footer, .editbar, .quiet, .abc,
.calendar .month, #lightbox figcaption,
input, button, .pastbanner {
  font-family: var(--mono);
}
nav { font-size: .72rem; letter-spacing: .09em; text-transform: lowercase; border-bottom-color: var(--hair); }
nav .site { letter-spacing: .12em; }
footer { font-size: .68rem; letter-spacing: .06em; border-top-color: var(--hair); }

/* Space Mono runs wide — the labels wear a smaller size than the prose */
.quiet, .editbar, .pastbanner, .abc,
.calendar .month, input, button { font-size: .78rem; }
pre, code { font-size: .85em; }
/* dates keep to one line in the listings, like a ledger should */
table.listing td:first-child { white-space: nowrap; vertical-align: baseline; }
/* the footer: one calm line, or two clean ones — never a crumble */
footer { flex-wrap: wrap; row-gap: .35rem; align-items: baseline; }
footer .quiet, footer .actions { font-size: .68rem; white-space: nowrap; }

h1.pagetitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
}
h1.pagetitle::after {
  content: "";
  display: block;
  width: 3.5rem;
  border-bottom: 2px solid #7a3b2e;   /* the potter's mark stays */
  margin-top: .45rem;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; }

a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
a:hover { color: #7a2f1e; }
a.wikilink { border-bottom-color: #c9b6a8; }
a.wikilink:hover { border-bottom-color: var(--link); }

::selection { background: #c9ad9c; color: #211d18; }

blockquote { border-left-color: #7a3b2e; color: #6d6459; }

pre, code { font-family: var(--mono); }
pre, pre.source { background: color-mix(in srgb, var(--ink) 6%, var(--bg)); border-color: var(--hair); }

img { border-radius: 1px; }
.wall img { box-shadow: 0 1px 5px rgba(60, 50, 40, .22); }

table.user td { border-color: var(--hair); }
.calendar .month td.today { outline-color: var(--accent); }

#lightbox figure img { box-shadow: 0 8px 44px rgba(50, 40, 30, .35); }

/* the editbar: the summary field breathes, the hint is one whisper */
.editbar { flex-wrap: wrap; }
.editbar input { min-width: 14rem; }
#edit-hint { white-space: nowrap; font-size: .68rem; }
```

[[tag:css]]