style.css

/* vitrine stylesheet.  Embedded in the binary; served at /-/style.css. */

:root {
	--ink: #24292f;
	--ink-soft: #57606a;
	--accent: #0a5fa4;
	--rule: #d0d7de;
	--paper: #fdfdfc;
	--well: #f3f5f7;
	--well-edge: #c9d1d9;
}

body {
	font-family: sans-serif;
	color: var(--ink);
	background: var(--paper);
	max-width: 56rem;
	margin: 1rem auto;
	padding: 0 1rem;
	line-height: 1.5;
}

a { color: var(--accent); }

nav {
	border-bottom: 2px solid var(--accent);
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}
nav .raw {
	float: right;
	font-size: .85rem;
	border: 1px solid var(--rule);
	border-radius: .25rem;
	padding: .1rem .5rem;
	text-decoration: none;
}
nav .raw:hover { background: var(--well); }

/* Host theme name: names the host whose accent color this page wears,
   so the color never has to carry that meaning alone. */
nav .theme {
	font-size: .75rem;
	color: var(--accent);
	margin-left: .25rem;
}

ul.listing { list-style: none; padding-left: 1.5rem; }
ul.listing li { padding: .15rem 0; }

iframe.passthrough {
	width: 100%;
	height: 75vh;
	border: 1px solid var(--well-edge);
	border-radius: .25rem;
	background: white;
}

/* Headings sit flush left; all other article content is inset,
   so headings read as structure at a glance. */
article > * { margin-left: 1.5rem; }
article > h1, article > h2, article > h3,
article > h4, article > h5, article > h6 { margin-left: 0; }

article h1, article h2 {
	border-bottom: 1px solid var(--rule);
	padding-bottom: .2rem;
}
article h1 { color: var(--accent); }

/* Chainlink anchors: subtle until the heading is hovered. */
a.anchor {
	font-size: .7em;
	text-decoration: none;
	margin-left: .4rem;
	opacity: 0;
}
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor,
h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor,
a.anchor:focus { opacity: .6; }

/* Code blocks: inset further than prose, bordered, in a well. */
article pre {
	margin-left: 3rem;
	background: var(--well);
	border: 1px solid var(--well-edge);
	border-left: 3px solid var(--accent);
	border-radius: .25rem;
	padding: .6rem .8rem;
	overflow-x: auto;
}
article code {
	background: var(--well);
	border-radius: .2rem;
	padding: .05rem .25rem;
}
article pre code { background: none; padding: 0; }

article blockquote {
	border-left: 3px solid var(--rule);
	color: var(--ink-soft);
	padding-left: .8rem;
}

article table { border-collapse: collapse; }
article th, article td {
	border: 1px solid var(--rule);
	padding: .2rem .5rem;
}
article th { background: var(--well); }

/* Callouts: :::type admonition boxes.  Inset like other article content,
   in a well with a bold left border, consistent with pre and blockquote.
   The per-type accent hue rides a single --callout variable so the base box
   below stays the one place that positions and paints the container. */
article .callout {
	--callout: var(--accent);
	background: var(--well);
	border: 1px solid var(--well-edge);
	border-left: 4px solid var(--callout);
	border-radius: .25rem;
	padding: .6rem .8rem;
}
/* The children are already inset by "article > *"; inside the box they
   should sit flush to its padding instead. */
article .callout > * { margin-left: 0; }
article .callout-title {
	margin-top: 0;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--callout);
}

/* Per-type accent hues.  note/info stay in the blue --accent family;
   the rest pick one hue each.  An unknown type matches none of these and
   falls back to the neutral base box above, still readable. */
article .callout-tip { --callout: #1a7f37; }
article .callout-warning,
article .callout-caution { --callout: #bf8700; }
article .callout-danger { --callout: #cf222e; }
article .callout-important { --callout: #8250df; }