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