wiki.trwnh.com/assets/styles/common/content.scss

.content {
	/* text */
	p, li {max-inline-size: 80ch;}
	h1 {font-size: 1.8em}
	h2 {font-size: 1.6em}
	h3 {font-size: 1.423em}
	h4 {font-size: 1.265em}
	h5 {font-size: 1.125em}
	h6 {font-size: 1em}
	h1, h2, h3, h4, h5, h6 {
		line-height: 1.2;
		margin-block-start: 2rem;
		margin-block-end: 1rem;
		font-weight: 700;
	}
	p {
		line-height: 2;
		margin-block-end: 1em;
	}
	a {
		word-wrap: break-word;
	}
	/* semantics */ 
	em {font-style: italic}
	strong {font-weight: 700}
	/* text formatting */
	--script-size: 0.65em;
	sup {
		position: relative;
		font-size: var(--script-size);
		inset-block-start: -1em;
	}
	sub {
		position: relative;
		font-size: var(--script-size);
	}
	@supports #{'selector\(:has(kbd))'} {
		/* style individual keys only (for the innermost <kbd> element) */
		kbd kbd,
		kbd:not(:has(kbd)) {
			font-family: monospace;
			padding: 0.25em;
			background: var(--ui-overlay);
			color: var(--ui-overlay-text);
		}
	}
	@supports not #{'selector\(:has(kbd))'} {
		/* style the entire key sequence */
		kbd {
			font-family: monospace;
			padding: 0.25em;
			background: var(--ui-overlay);
			color: var(--ui-overlay-text);
		}
		/* and prevent double-styling for nested keys */
		kbd kbd {
			background: none;
		}
	}
	mark {
		background: var(--primary-accent-transparent);
		color: var(--ui-text);
		--pad-x-highlight: 0.125em;
		padding-inline-start: var(--pad-x-highlight);
		padding-inline-end: var(--pad-x-highlight);
	}
	abbr[title]:after {
		content: '?';
		font-size: var(--script-size);
		color: var(--ui-text-muted);
	}
	/* lists */
	ul, ol {
		padding-inline-start: 0;
		margin-block: 1em;
		position: relative;
	}
	ul {list-style: disc;}
	ol {list-style: decimal;}
	li {margin-block-end: 1em; line-height: 1.4; margin-inline-start: 1em;}
	dl {margin-block: 1em; line-height: 1.4;}
	dt {font-weight: 700;}
	dd {margin-inline-start: 1em;}
	/* block elements */
	img {
		width: 100%;
		margin-block-end: 1em;
	}
	blockquote {
		font-style: italic;
		font-size: 1em;
		margin: 1em 0;
		border-inline-start: 0.25rem solid var(--ui-text-bold);
		padding-inline-start: 0.75em;
		line-height: 1.4;
	}
	pre {
		font-family: monospace;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		padding: 1em;
		line-height: 1.4;
		overflow-inline: auto;
		white-space: pre;
		display: grid;
		tab-size: 3;
		margin-block-end: 1em;
	}
	code {
		font-family: monospace;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		padding: 0.25rem;
	}
	:not(.highlight) > pre {
		line-height: 1.5;
		background: var(--ui-overlay);
		padding: 1em;
	}
	pre code {
		background: inherit;
		padding: 0;
	}
	.highlight pre {
		padding-block: 1em;
	}
	/* figures */
	figure {
		margin-block-end: 1em;
	}
	figure img {
		width: 100%;
		margin-block-end: -0.125em;
	}
	figcaption {
		background: #212121;
		color: white;
		font-style: italic;
		padding: 1em;
		font-size: 0.8em;
		line-height: 1.2;
	}
	/* tables */
	table {text-align: center;}
	thead {
		font-weight: 700;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
	}
	th, td {
		border: 1px solid var(--ui-text);
		padding: 0.5em;
	}
	/* {{<hint>}} shortcode */
	.hint, .callout {
		padding: 1em;
		line-height: 2;
		&.info, &.tip
		{
			background: rgba(142, 226, 142, 0.2);
			border-inline-start: 4px solid rgb(142, 226, 142);
		}
		&.warning {
			background: rgba(218, 226, 142, 0.2);
			border-inline-start: 4px solid rgb(218, 226, 142);
		}
		&.danger {
			background: rgba(226, 142, 142, 0.2);
			border-inline-start: 4px solid rgb(226, 142, 142);
		}
	}
	/* hugo-specific citation footnote */
	cite sup {
		position: inherit;
		font-size: inherit;
		a {
			padding: 0.25em;
		}
		&:before {
			content: ' [';
		}
		&:after {
			content: ']';
		}
	}
	/* the actual footnotes section */
	.footnotes {
		hr {
			display: flex;
			align-items: center;
			border: 0;
			&:before {
				content: 'Footnotes';
				color: var(--ui-text);
				text-transform: uppercase;
				font-weight: 900;
				font-size: 0.8em;
			}
			&:after {
				content: '';
				width: 100%;
				margin-inline-start: 1rem;
				border-block-end: 1px solid var(--ui-text-muted);
			}
		}
	}
}