johnandersen777.bsky.social/knotless

Switch repository

Loading…

/* Starlight in the pages' own look: its palette, type and links taken
   from web/src/tokens.css, which change with the colour scheme as the
   app's do. Starlight's light palette names its colours as its dark one
   does, the strongest text `white` and the page `black`, so one mapping
   holds in both. */

@import '../../web/src/tokens.css';

:root,
:root[data-theme='light'] {
  --sl-color-white: var(--fg);
  --sl-color-gray-1: var(--fg);
  --sl-color-gray-2: var(--fg);
  --sl-color-gray-3: var(--mute);
  --sl-color-gray-4: var(--faint);
  --sl-color-gray-5: var(--line);
  --sl-color-gray-6: var(--soft);
  --sl-color-gray-7: var(--panel);
  --sl-color-black: var(--bg);
  --sl-color-accent-low: var(--accent-soft);
  --sl-color-accent: var(--primary);
  --sl-color-accent-high: var(--accent);
  --sl-color-bg-nav: var(--bg);
  --sl-color-bg-sidebar: var(--bg);
  --sl-color-hairline: var(--line);
  --sl-color-hairline-light: var(--line);
  --sl-color-hairline-shade: var(--line);
  --sl-font: var(--font-sans);
  --sl-font-mono: var(--font-mono);
  --sl-line-height: var(--leading-prose);
  /* Type on the pages' prose scale, not Starlight's larger one. */
  --sl-text-body: var(--text-md);
  --sl-text-h1: var(--text-3xl);
  --sl-text-h2: var(--text-xl);
  --sl-text-h3: var(--text-lg);
  --sl-text-h4: var(--text-md);
  --sl-text-h5: var(--text-md);
  --sl-text-h6: var(--text-md);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* A section's heading is ruled off, as in the pages' prose. */
.sl-markdown-content .level-h2 {
  padding-bottom: var(--space-1-5);
  border-bottom: var(--border);
}

/* The header: the pages' brand, in their mono. */
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font: var(--weight-semibold) var(--text-base) var(--font-mono);
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.brand.section {
  font-weight: var(--weight-normal);
  color: var(--mute);
}

/* Links underlined quietly, as the pages' prose has them. */
.sl-markdown-content a:not(:where(.not-content *)) {
  color: var(--fg);
  text-decoration-color: var(--link-line);
  text-underline-offset: var(--underline-offset);
}
.sl-markdown-content a:not(:where(.not-content *)):hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}

/* Sidebar: the page one is on marked as the pages mark the tab one is on. */
.sidebar-content a[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: var(--weight-semibold);
}

/* Diagrams take the page's colours, as the repository pages' do. */
.sl-markdown-content .diagram {
  line-height: normal;
  overflow-x: auto;
  --pele-bg: var(--bg);
  --pele-fg: var(--fg);
  --pele-muted: var(--mute);
  --pele-line: var(--mute);
  --pele-surface: var(--soft);
  --pele-surface-alt: var(--panel);
  --pele-border: var(--faint);
  --pele-accent: var(--primary);
  --pele-critical: var(--rem);
  --pele-error: var(--rem);
  --pele-font: var(--font-sans);
  --pele-font-mono: var(--font-mono);
}

/* Reference: a table of names and what each does, drawn as a list of
   them (reference.mjs), each name on a line of its own. */
.sl-markdown-content .ref-list {
  margin-top: var(--space-4);
  border-top: var(--border);
}
.sl-markdown-content .ref-list dt {
  margin-top: 0;
  padding-top: var(--space-4);
  font-weight: var(--weight-normal);
}
.sl-markdown-content .ref-list dt code {
  background: none;
  padding: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  /* A signature breaks between its words, never inside a flag. */
  overflow-wrap: normal;
  word-break: normal;
}
.sl-markdown-content .ref-list dd {
  margin: var(--space-1) 0 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--border);
}
.sl-markdown-content .ref-list dd > * + * {
  margin-top: var(--space-2);
}
.sl-markdown-content .ref-meta {
  font-size: var(--text-sm);
  color: var(--mute);
}
.ref-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--faint);
  margin-right: var(--space-1);
}

/* An HTTP method, as a badge before its route. */
.method {
  display: inline-block;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-sm);
  font: var(--weight-semibold) var(--text-2xs) / 1.6 var(--font-mono);
  letter-spacing: 0.02em;
  vertical-align: 0.15em;
  background: var(--accent-soft);
  color: var(--accent);
}
.method-post {
  background: var(--soft);
  color: var(--green);
}
.method-ws {
  color: var(--purple);
}

/* A method's lexicon, folded away under it. */
.sl-markdown-content .lexicon {
  margin-top: var(--space-2);
  border: var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.sl-markdown-content .lexicon summary {
  padding: var(--space-1-5) var(--space-3);
  color: var(--mute);
  cursor: pointer;
}
.sl-markdown-content .lexicon[open] summary {
  border-bottom: var(--border);
}
.sl-markdown-content .lexicon > :not(summary) {
  margin: var(--space-3);
}
.sl-markdown-content .lex-title {
  font-weight: var(--weight-semibold);
  color: var(--fg);
  margin-bottom: var(--space-1) !important;
}
.sl-markdown-content .lex-fields {
  display: table;
  table-layout: fixed;
  width: calc(100% - 2 * var(--space-3));
  font-size: var(--text-sm);
}
.sl-markdown-content .lex-fields td {
  vertical-align: top;
}
.lex-type {
  display: block;
  margin-top: var(--space-0-5);
  color: var(--mute);
  font-size: var(--text-xs);
}
.sl-markdown-content .lex-fields td:first-child {
  width: 40%;
}
.sl-markdown-content .ref-list dt .word {
  white-space: nowrap;
}
.sl-markdown-content .lex-source {
  color: var(--mute);
}

/* The header's link to the repository, quiet as the pages' header links
   are, and no divider after it: Starlight's sits before the theme
   picker, which the docs leave out. */
.social-icons::after {
  display: none;
}
.social-icons a {
  color: var(--mute);
}
.social-icons a:hover {
  color: var(--fg);
}