chadtmiller.com/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);
}