char/sorcery

git clone https://git.t4t.associates/char/sorcery

Charlotte Somset text-size-adjust6f745f92026-09-11

@font-face {
  font-family: "InterVariable";
  src: local("Inter Variable"), local("InterVariable"), url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: local("Inter Variable Italic"), local("InterVariableItalic"), url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ioskeley";
  src: local("Ioskeley Mono"), local("Ioskeley-Mono"), url("/fonts/ioskeley/IoskeleyMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ioskeley";
  src: local("Ioskeley Mono Medium"), local("Ioskeley-Mono-Medium"), url("/fonts/ioskeley/IoskeleyMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ioskeley";
  src: local("Ioskeley Mono Semibold"), local("Ioskeley-Mono-Semibold"), url("/fonts/ioskeley/IoskeleyMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* palette & syntax colours lifted from char.lt */
:root {
  --bg-col: #100e11;
  --bg-col-2: #181419;
  --bg-col-3: #211a22;

  --fg-col: #f3eef2;
  --fg-col-mute: #958792;

  --accent-col: #ff9df5;
  --accent-col-mute-1: #b86caf;
  --accent-col-mute-2: #493045;
  --accent-col-fade-1: #ffd0fb;

  --hl-comment: #9da8bb;
  --hl-keyword: #9bedff;
  --hl-builtin: #ff94d1;
  --hl-string: #95ffc3;
  --hl-ident: #d8a8ff;
  --hl-number: var(--hl-string);

  --font-mono: "Ioskeley", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  font-family: "InterVariable", "Inter", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  background: var(--bg-col);
  color: var(--fg-col);
}

body {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

::selection {
  background-color: #6d3567;
}

/* type scale: 0.75 / 0.875 / 1 / 1.5 / 1.75rem. Ioskeley has a larger
   x-height than Inter, so mono sits a step down to read as the same size. */
h1 { font-size: 1.75rem; font-weight: 520; margin: 0 0 0.75em; line-height: 1.08; }
h1:has(+ .desc) { margin-bottom: 0.25em; }
h2 { font-size: 1.5rem; font-weight: 650; margin-top: 2rem; }
/* repositories page: user headings sit directly on their list */
h2:has(+ .catalog) { margin-bottom: 0; }

pre, code, kbd, .code, .cid, .sha, .path, table.diff, table.commit-meta td {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}
pre, table.diff {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
time { font-variant-numeric: tabular-nums; }

/* chrome links are bare and signal with colour; only prose underlines */
a { color: var(--accent-col); text-decoration: none; }
a:hover { color: var(--accent-col-fade-1); }
.readme a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

progress { accent-color: var(--accent-col); }

noscript .callout {
  margin: 0 0 1.5rem;
  padding: 0.6rem 1rem;
  background: var(--bg-col-2);
  border: 1px solid var(--accent-col-mute-2);
  color: var(--fg-col-mute);
  font-size: 0.875rem;
  
  p { margin: 0; }
}

/* ref switcher (static only), crumbs, stats, actions;
   its rule separates the chrome from the content below */
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--accent-col-mute-2);
  font-size: 0.875rem;
}
.topbar:has(+ .languages) { margin-bottom: 0; border-bottom: none; }
.topbar nav.crumbs { margin: 0; white-space: nowrap; overflow-x: auto; }
.topbar > .actions {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
  white-space: nowrap;
}
.topbar > .actions:empty { display: none; }

a.back {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--fg-col-mute);
}
a.back:hover { color: var(--accent-col); }

details.switcher { position: relative; }
details.switcher > summary {
  list-style: none;
  cursor: pointer;
  background: var(--bg-col-2);
  border: 1px solid var(--accent-col-mute-2);
  padding: 0.2em 0.75em;
  font-weight: 650;
}
details.switcher > summary::-webkit-details-marker { display: none; }
details.switcher > summary::after { content: " ▾"; color: var(--fg-col-mute); }
details.switcher[open] > summary { background: var(--bg-col-3); }
details.switcher > .menu {
  position: absolute;
  z-index: 1;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-col-2);
  border: 1px solid var(--accent-col-mute-2);
  padding: 0.4rem 0;
  display: flex;
  flex-direction: column;
}
details.switcher > .menu strong {
  padding: 0.3rem 0.75rem 0.1rem;
  color: var(--fg-col-mute);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
details.switcher > .menu a {
  padding: 0.15rem 0.75rem;
  color: var(--fg-col);
  white-space: nowrap;
}
details.switcher > .menu a:hover { background: var(--accent-col-mute-2); }
details.switcher > .menu a.current { color: var(--accent-col); font-weight: 650; }
details.switcher > .menu a.all { color: var(--fg-col-mute); margin-top: 0.25rem; }

nav.crumbs { color: var(--fg-col-mute); }
nav.crumbs .cur { color: var(--fg-col); }

.view-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--fg-col-mute);
  white-space: nowrap;
}
.snapshot-commit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  color: var(--fg-col-mute);
  font-size: 0.875rem;
}
.view-stats > span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border: 1.5px solid var(--fg-col-mute);
  border-radius: 50%;
  background: var(--fg-col-mute);
}
.view-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.snapshot-commit .commit-message { color: var(--fg-col); }
.snapshot-commit a.commit-message:hover { color: var(--accent-col); }
.snapshot-sha {
  margin-left: auto;
  padding: 0.1em 0.55em;
  background: var(--bg-col-2);
  color: var(--fg-col-mute);
}
a.snapshot-sha:hover { color: var(--accent-col); }
.history-status { min-height: 1.3rem; margin-top: 0; }
.history-log { margin-top: 0.25rem; }
.history-log .deleted { color: var(--hl-builtin); }
@media (max-width: 760px) {
  .snapshot-sha { margin-left: 0; }
}
.meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--fg-col-mute);
  font-size: 0.875rem;
}

/* Small circle separators between adjacent segments, as tangled. The
   segments are inline-flex so the dot centres geometrically against the
   text; vertical-align can't do this portably. */
.meta > span,
.who > * {
  display: inline-flex;
  align-items: center;
}
.meta > span + span::before,
.who > * + *::before,
nav.crumbs > .label::before {
  content: "";
  width: 3px;
  height: 3px;
  border: 1.5px solid var(--fg-col-mute);
  border-radius: 50%;
  background: var(--fg-col-mute);
  margin-right: 0.75rem;
}
nav.crumbs > .label::before {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.75rem;
}
.desc { color: var(--fg-col-mute); margin: 0; }

/* repo header: name and description beside the clone command, which is
   read once and shouldn't outweigh them */
header.repo {
  display: grid;
  grid-template-columns: minmax(50%, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
  margin: 0 0 1.5rem;
}
@media (max-width: 760px) {
  header.repo { grid-template-columns: 1fr; }
}

/* root pages: file listing beside the recent-commits log */
/* columns stretch to the row height so the divider spans it fully */
.overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* structural boundary: stronger than the per-row rules, like .readme's */
.overview > .files {
  padding-right: 1.25rem;
  border-right: 1px solid var(--accent-col-mute-1);
}
.overview > .commits {
  padding-left: 1.25rem;
}
@media (max-width: 920px) {
  .overview { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .overview > .files { padding-right: 0; border-right: 0; }
  .overview > .commits { padding-left: 0; }
}

/* the overview owns its divider from a following readme, so the readme's
   margin sits below the line rather than above it */
.overview:has(+ .readme) {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--accent-col-mute-1);
}
.overview + .readme {
  margin-top: 1.5rem;
  border-top: 0;
  padding-top: 0;
}

.overview h2,
h2.file-heading {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--fg-col-mute);
  text-align: right;
}
.overview h2 > a { color: inherit; }
.overview h2 > a:hover { color: var(--accent-col); }
ol.log { list-style: none; margin: 0; padding: 0; }
ol.log li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--accent-col-mute-2);
}
ol.log .cid { color: var(--hl-ident); }
ol.log .sha { color: var(--fg-col-mute); }
ol.log a:is(.cid, .sha):hover { color: var(--accent-col); }
ol.log .msg { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.log .who {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-col-mute);
  font-size: 0.875rem;
}
ol.log .who > * + *::before { margin-right: 0.5rem; }
/* hold ten two-line rows so paging doesn't shift the readme below */
.overview > .commits > ol.log.paginated:not(.exhausted) {
  min-height: calc(10 * (2lh + 0.8rem + 1px));
}
.log-pagination { justify-content: space-between; margin: 0.4rem 0 0; }
button.log-page-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-col);
  font: inherit;
  cursor: pointer;
}
button.log-page-button:hover { color: var(--accent-col-fade-1); }
button.log-page-button:disabled { color: var(--fg-col-mute); cursor: default; }

.catalog {
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog a {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 4fr);
  gap: 0.75rem;
  width: 100%;
  padding: 0.25rem 0;
  border-top: 1px solid var(--accent-col-mute-2);
}
.catalog .msg { color: var(--fg-col-mute); }
.catalog a:hover { background: var(--bg-col-2); }
.catalog a:focus-visible { outline: 1px solid var(--accent-col); outline-offset: 2px; }
@media (max-width: 35rem) {
  .catalog a { grid-template-columns: 1fr; gap: 0; }
}

table.list { border-collapse: collapse; width: 100%; }
/* rows carry their top edge: a line under the heading, none after the last row */
table.list td {
  padding: 0.25rem 0.75rem 0.25rem 0;
  border-top: 1px solid var(--accent-col-mute-2);
}
table.list td.size, table.list td.date {
  color: var(--fg-col-mute);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.list td.msg { color: var(--fg-col-mute); }

/* blob view: each logical line shares a grid row with its number, so wrapped
   source makes that row taller without displacing the following numbers */
pre.code {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  padding: 1rem 0;
  background: var(--bg-col-2);
  border-left: 2px solid var(--accent-col-mute-1);
  line-height: 1.45;
}
.code-line { display: contents; }
.code-break {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
pre.code .ln {
  padding-left: 0.75rem;
  padding-right: 0.6rem;
  text-align: right;
  color: var(--fg-col-mute);
  user-select: none;
  border-right: 1px solid var(--accent-col-mute-2);
}
pre.code a.ln:hover { color: var(--fg-col); }
pre.code a.ln:target { color: var(--accent-col); font-weight: 600; }
.code-text {
  min-width: 0;
  min-height: 1lh;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* markdown blob pages: no-JS rendered/code tabs */
.markdown-view {
  display: grid;
  grid-template-columns: repeat(2, max-content) 1fr;
  gap: 0 0.25rem;
}
.markdown-view > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.markdown-view > label {
  cursor: pointer;
  padding: 0.2em 0.75em;
  border: 1px solid var(--accent-col-mute-2);
  color: var(--fg-col-mute);
}
.markdown-view > input:focus-visible + label { outline: 2px solid var(--accent-col); }
.markdown-view > input:checked + label {
  color: var(--accent-col);
  background: var(--bg-col-2);
  border-color: var(--accent-col-mute-1);
  font-weight: 650;
}
.markdown-view > .rendered,
.markdown-view > .code-panel {
  display: none;
  grid-column: 1 / -1;
}
#markdown-rendered:checked ~ .rendered,
#markdown-code:checked ~ .code-panel { display: block; }
.markdown-view > .readme { margin-top: 1rem; }
.markdown-view > .code-panel { margin-top: 1rem; }

.readme {
  width: 100%;
  margin-top: 2.5rem;
  border-top: 1px solid var(--accent-col-mute-1);
  padding-top: 0.5rem;
  overflow-wrap: anywhere;
}
/* a readme's own title sits under the page h1, so its headings step down */
.readme h1 { font-size: 1.5rem; font-weight: 650; }
.readme h2 { font-size: 1.25rem; }
.readme pre {
  background: var(--bg-col-2);
  border-left: 2px solid var(--accent-col-mute-1);
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.45;
}
.readme code {
  background: var(--bg-col-2);
  padding: 0.125em 0.25em;
  margin: 0 0.125em;
  font-size: 0.875em;
}
.readme pre code { background: none; padding: 0; margin: 0; font-size: inherit; }
.readme img { max-width: 100%; }
.readme blockquote {
  border-left: 2px solid var(--accent-col-mute-1);
  margin: 1.5rem 0;
  padding-left: 1rem;
  color: var(--fg-col-mute);
}
.readme table { border-collapse: collapse; }
.readme th, .readme td { border: 1px solid var(--accent-col-mute-2); padding: 0.25rem 0.6rem; }

/* right-aligned in the header, so the accent rule sits on the outer edge */
pre.clone {
  margin: 0;
  background: var(--bg-col-2);
  border: 1px solid var(--accent-col-mute-2);
  border-right: 2px solid var(--accent-col-mute-1);
  padding: 0.6rem 1rem;
  overflow-x: auto;
}

.languages { margin: 0 0 1.5rem; }
.languages summary {
  display: flex;
  gap: 2px;
  height: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  list-style: none;
}
.languages summary::-webkit-details-marker { display: none; }
.languages summary > span:not(.language-label) { display: block; }
.languages .language-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
}
.languages li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.languages li i { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
.languages li small { color: var(--fg-col-mute); }
.languages li a { color: inherit; }
.languages li a:hover { color: var(--accent-col); }

/* client-rendered commit view, laid out like tangled's commit page. the
   subject and body read as one block; the metadata table and the diff each
   sit a full step below */
.commit-view .commit-subject { margin: 0.25rem 0 0; }
.commit-view .commit-body {
  white-space: pre-wrap;
  font: inherit;
  color: var(--fg-col-mute);
  margin: 0.5rem 0 0;
}

table.commit-meta {
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}
table.commit-meta th {
  text-align: left;
  font-weight: 400;
  color: var(--fg-col-mute);
  padding: 0.05rem 1.5rem 0.05rem 0;
  vertical-align: top;
}
table.commit-meta td { word-break: break-all; }

.add-count { color: var(--hl-string); }
.del-count { color: var(--hl-builtin); }
.diffstat { margin: 1.5rem 0 0; }

.commit-view .status.added { color: var(--hl-string); }
.commit-view .status.deleted { color: var(--hl-builtin); }
.commit-view .status.modified { color: var(--fg-col-mute); }

.file-diff {
  margin-top: 0.75rem;
  border: 1px solid var(--accent-col-mute-2);
}
.file-diff + .file-diff { margin-top: 1.5rem; }
.file-diff > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg-col-2);
  color: var(--fg-col-mute);
  font-size: 0.875rem;
  cursor: pointer;
  list-style: none;
}
.file-diff > summary::-webkit-details-marker { display: none; }
.file-diff > summary::before {
  content: "";
  position: relative;
  top: -0.17rem;
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  align-self: baseline;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.file-diff:not([open]) > summary::before {
  top: -0.1rem;
  transform: rotate(-45deg);
}
.file-diff > summary:focus-visible { outline: 2px solid var(--accent-col); outline-offset: 2px; }
.file-summary-content {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  flex: 1;
  min-width: 0;
}
.file-summary-content .path {
  color: var(--fg-col);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.file-summary-content .file-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-left: auto;
}
.file-diff .binary-note { padding: 0.5rem 0.75rem; }
.file-diff .generated-note { color: var(--fg-col-mute); font-style: italic; }

table.diff {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--accent-col-mute-2);
  line-height: 1.5;
}
table.diff td { padding: 0 0.6rem; }
table.diff td.text { white-space: pre-wrap; word-break: break-word; width: 100%; }
table.diff td.text::before {
  content: " ";
  display: inline-block;
  width: 1ch;
  margin-right: 0.5ch;
}
table.diff tr.add td.text::before { content: "+"; color: var(--hl-string); }
table.diff tr.del td.text::before { content: "-"; color: var(--hl-builtin); }
table.diff td.ln {
  text-align: right;
  color: var(--fg-col-mute);
  user-select: none;
  white-space: nowrap;
  min-width: 2.5rem;
}
table.diff tr.hunk td {
  color: var(--fg-col-mute);
  background: var(--bg-col-2);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
table.diff tr.add { background: color-mix(in srgb, var(--hl-string) 9%, transparent); }
table.diff tr.del { background: color-mix(in srgb, var(--hl-builtin) 9%, transparent); }

/* syntax highlighting, as char.lt */
a-c, a-cd, a-er {
  color: var(--hl-comment);
}

a-k, a-kc, a-ko, a-kd, a-ke, a-kf, a-ki, a-kp, a-kr, a-kt, a-ky, a-km, a-dr,
a-in, a-sc, a-rp, a-cn, a-ex, a-pp,
a-co, a-cb, a-m,
a-tu, a-tr {
  color: var(--hl-keyword);
  font-weight: 600;
}

/* builtins & types */
a-t, a-tb, a-tq, a-tf, a-fb {
  color: var(--hl-builtin);
}

a-s, a-ss, a-se, a-rx, a-ch, a-cs {
  color: var(--hl-string);
}

a-n {
  color: var(--hl-number);
}

a-f, a-fm, a-fd, a-fc, a-cr, a-ns,
a-tg, a-td, a-at, a-pr, a-vm, a-l {
  color: var(--hl-ident);
}

a-da { color: var(--hl-string); }
a-dd { color: var(--hl-comment); }

a-em { font-style: italic; }
a-st, a-tt { font-weight: 600; }
a-tx { text-decoration: line-through; }

/* match the old behaviour of only colouring shell-script variables */
.language-bash a-v, .language-shell a-v, .language-zsh a-v {
  color: var(--hl-ident);
}