hugo-theme-paradox/assets/styles/features/headings.scss

h2.heading {
	border-bottom: 1px solid var(--ui-text-muted);
	padding-bottom: 1rem;
}

/* headings with no numbers */

article:not([autonumbering]) .heading {
	position: relative;
	margin-right: 2.5rem;
	&__anchor-link {
		display: inline-flex;
		align-content: center;
		margin-left: 0.25em;
		position: absolute;
		right: -2.5rem;
		top: 3px;
		font-size: 1rem;
	}
}

/* headings with autonumbering support */

body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}

article[autonumbering] {
	h2:before {
		counter-increment: h2;
		content: counter(h2) " ";
	}
	h3:before {
		counter-increment: h3;
		content: counter(h2) "." counter(h3) " ";
	}
	h4:before {
		counter-increment: h4;
		content: counter(h2) "." counter(h3) "." counter(h4) " ";
	}
	h2:before,
	h3:before,
	h4:before
	{
		margin-right: 1em;
		font-family: monospace;
		font-size: 1rem;
	}

	.heading {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		grid-gap: 0.5rem;
		&__text {
			grid-column: span 2;
		}
		&__anchor-link {
			font-size: 1rem;
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
		}
	}

	#TableOfContents :is(ol, ul) {
		counter-reset: item;
	}
	#TableOfContents li:before {
		content: counters(item, ".") ". ";
		counter-increment: item;
	}
}