Cloisonne

this is the page as it was on 2026-07-18 09:29 — all versions

The site's clothes — "stylesheet": "Cloisonne" in config.json. Enamel jewels set in gold cells: five colours — crimson, gold, teal, cobalt, violet — run as a ribbon through everything. Two moods: day (gilded ivory, aubergine ink) and night (deep indigo, glowing gold), following the light-mode/dark-mode toggle. Edit this page and the wiki changes its clothes; switch config.json back to PinaxGray for the gallery wall or MulledClay for the dark room.

/* Cloisonne — enamel jewels in gold cells, over the quiet base */

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

:root {
  --bg: #fbf3e4;        /* gilded ivory */
  --ink: #33214a;       /* aubergine ink — dark, but never black */
  --quiet: #8a7a9e;     /* dusty violet */
  --link: #234fc7;      /* cobalt */
  --missing: #c22f4e;   /* crimson */
  --hair: #e7d7bd;      /* gold-tinged hairline */
  --accent: #b8860b;

  --crimson: #c22f4e;
  --gold: #d99a06;
  --goldink: #a97a00;   /* gold fired dark enough to read as text on ivory */
  --teal: #0c7f72;
  --cobalt: #234fc7;
  --violet: #7a3fb3;
  --rose: #d4497a;

  --serif: 'EB Garamond', Georgia, serif;
  --display: 'Fraunces', Georgia, serif;
  --titlegrad: linear-gradient(100deg, var(--crimson), var(--violet) 70%);
  --ribbon: linear-gradient(90deg,
      var(--crimson), var(--gold), var(--teal), var(--cobalt), var(--violet));
}
/* the night palette. Same two-selector rule as the base skin: system
   preference (unless a light choice was made), and an explicit dark
   choice, must carry the same values — keep them in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1332;      /* deep indigo, the jewel box shut */
    --ink: #f2e9d8;     /* warm ivory */
    --quiet: #9c8fb8;
    --link: #f5b84f;    /* glowing gold */
    --missing: #e2637f;
    --hair: #3a2d5c;
    --accent: #58d6c0;

    --crimson: #ef6a8b;
    --gold: #f5b84f;
    --goldink: #f5b84f;
    --teal: #4fd6c2;
    --cobalt: #7fa3ff;
    --violet: #b598f2;
    --rose: #ef6a8b;

    --titlegrad: linear-gradient(100deg, var(--gold), var(--rose) 70%);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1332;
  --ink: #f2e9d8;
  --quiet: #9c8fb8;
  --link: #f5b84f;
  --missing: #e2637f;
  --hair: #3a2d5c;
  --accent: #58d6c0;

  --crimson: #ef6a8b;
  --gold: #f5b84f;
  --goldink: #f5b84f;
  --teal: #4fd6c2;
  --cobalt: #7fa3ff;
  --violet: #b598f2;
  --rose: #ef6a8b;

  --titlegrad: linear-gradient(100deg, var(--gold), var(--rose) 70%);
}

::selection { background: color-mix(in srgb, var(--gold) 38%, transparent); }
body {
  font: 18px/1.6 var(--serif);
  /* a violet dawn at the top of every page, mixed from the theme so it
     holds in both day and night */
  background: var(--bg);
  background-image: radial-gradient(120% 26rem at 50% -8rem,
      color-mix(in srgb, var(--violet) 8%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* nav — the ribbon of five jewels along the very top; border-image also
   tints the base's bottom hairline into a faint gradient thread */
nav {
  padding-top: .9rem;
  border-top: 4px solid transparent;
  border-image: var(--ribbon) 1;
}
nav a:hover { color: var(--rose); }
nav .site {
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--titlegrad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
nav .search-toggle:hover { color: var(--rose); }
nav form.searchform.open input { border-bottom-color: var(--gold); }
nav form.searchform input:focus { border-color: var(--rose); }
nav details.navdrop summary:hover,
nav details.navdrop[open] summary { color: var(--rose); }
nav details.navdrop .navdrop-menu { border-top: 3px solid var(--violet); }
nav details.navdrop .navdrop-menu a:hover {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
}

/* the category — a small enamel chip above the title */
p.category { font-size: .74rem; letter-spacing: .08em; margin-top: 1.6rem; }
p.category a.wikilink {
  display: inline-block;
  padding: .12rem .65rem;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  color: var(--violet);
}
p.category a.wikilink:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--bg);
}
p.category + h1.pagetitle { margin-top: .4rem; }

/* the title — the one loud thing on the page */
h1.pagetitle {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.12;
  margin: 1.4rem 0 1.1rem;
  background: var(--titlegrad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; }
h2 { color: var(--crimson); font-style: italic; }
h3 { color: var(--teal); }
h4 { color: var(--violet); }

a.wikilink { border-bottom-color: color-mix(in srgb, var(--gold) 55%, transparent); }
a.wikilink:hover {
  border-bottom: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
a.wikilink.missing { border-bottom: 1px dashed var(--missing); }
a.wikilink.missing:hover { background: color-mix(in srgb, var(--missing) 12%, transparent); }

/* a rule is an ornament, not a fence */
hr { border: none; margin: 2.4rem auto; text-align: center; }
hr::after {
  content: "\2726 \2726 \2726";  /* ✦ ✦ ✦ */
  letter-spacing: 1.2em;
  padding-left: 1.2em;  /* recenters: letter-spacing trails the last glyph */
  font-size: .8rem;
  background: var(--ribbon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

blockquote {
  margin: 1.2rem 0;
  padding: .7rem 1.1rem;
  border-left: 3px solid var(--violet);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--violet));
}
img { border-radius: 4px; }
code { color: var(--teal); }
pre {
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  padding: .8rem 1rem;
}
pre code { color: inherit; }

footer {
  border-top: 3px solid transparent;
  border-image: var(--ribbon) 1;
  padding-top: 1rem;
}
footer a:hover, .theme-toggle:hover { color: var(--rose); }

/* buttons wear the crimson-to-violet enamel */
.editform button, .editbar button, .loginform button, .uploadform button {
  background: linear-gradient(100deg, var(--crimson), var(--violet));
  color: #fff;
  border-radius: 999px;
  padding: .35rem 1.3rem;
}
.editform button:hover, .editbar button:hover,
.loginform button:hover, .uploadform button:hover { filter: brightness(1.12); }
.editbar button.ghost { background: transparent; color: var(--quiet); }
.editbar { border-top: 3px solid transparent; border-image: var(--ribbon) 1; }
.editbar input:focus { border-color: var(--gold); }
.editform textarea { border-radius: 6px; }
.editform textarea:focus { outline: none; border-color: var(--cobalt); }
h1.pagetitle.editing:focus { border-color: var(--gold); }
.deleteform button.danger { border-radius: 999px; padding: .35rem 1.3rem; }

/* a past version wears gold */
.pastbanner {
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.pastbanner button {
  border: 1px solid var(--goldink);
  border-radius: 999px;
  color: var(--goldink);
  padding: .15rem .8rem;
}
.pastbanner button:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }

ul.hits li.createhit {
  border-radius: 8px;
  background: color-mix(in srgb, var(--missing) 6%, transparent);
}

/* image wall — each picture lifts into violet light */
.wall { column-gap: 8px; }
.wall a { margin-bottom: 8px; }
.wall img {
  border-radius: 4px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.wall a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--violet) 35%, transparent);
}

.index h2.index-letter {
  font-style: normal;
  color: var(--goldink);
  border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* calendar */
.calendar .month caption {
  font-family: var(--display);
  font-style: italic;
  color: var(--crimson);
}
.calendar .month th { color: var(--violet); }
.calendar .month td.today { outline: 2px solid var(--gold); border-radius: 50%; }
.calendar .month td.empty a:hover { color: var(--rose); }

/* tags — every tag a little gem, cycling through the five jewels */
.cloud { line-height: 2.4; }
.tag {
  display: inline-block;
  padding: .05rem .6rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82em;
  color: var(--cobalt);
  border: 1px solid color-mix(in srgb, var(--cobalt) 40%, transparent);
  background: color-mix(in srgb, var(--cobalt) 9%, transparent);
}
.tag:nth-of-type(5n+1) {
  color: var(--crimson);
  border-color: color-mix(in srgb, var(--crimson) 40%, transparent);
  background: color-mix(in srgb, var(--crimson) 9%, transparent);
}
.tag:nth-of-type(5n+2) {
  color: var(--goldink);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.tag:nth-of-type(5n+3) {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
}
.tag:nth-of-type(5n+4) {
  color: var(--cobalt);
  border-color: color-mix(in srgb, var(--cobalt) 40%, transparent);
  background: color-mix(in srgb, var(--cobalt) 9%, transparent);
}
.tag:hover { filter: brightness(1.1); }

table.user tr:nth-child(odd) td { background: color-mix(in srgb, var(--violet) 4%, transparent); }

/* lightbox — violet glass */
#lightbox { background: color-mix(in srgb, var(--bg) 90%, var(--violet)); }
#lightbox figure img { box-shadow: 0 8px 44px color-mix(in srgb, var(--violet) 45%, transparent); }
#lightbox button:hover { color: var(--rose); }

.loginform input[type=password]:focus { outline: none; border-bottom-color: var(--gold); }
.uploadform textarea[name=alt] { border-radius: 6px; }
.uploadform textarea[name=alt]:focus { border-color: var(--cobalt); }

@media (max-width: 640px) {
  h1.pagetitle { font-size: 1.9rem; }
}