hugo-theme-paradox/assets/styles/common/content.scss

.content {
	/* text */
	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;
		max-inline-size: 80ch;
	}
	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);
			transition:
				background var(--color-crossfade-duration) var(--color-crossfade-ease),
				color var(--color-crossfade-duration) var(--color-crossfade-ease);
		}
	}
	@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);
			transition:
				background var(--color-crossfade-duration) var(--color-crossfade-ease),
				color var(--color-crossfade-duration) var(--color-crossfade-ease);
		}
		/* and prevent double-styling for nested keys */
		kbd kbd {
			background: none;
		}
	}
	mark {
		background: var(--primary-accent-transparent);
		color: var(--ui-text);
		--pad-highlight: 0.125em;
		padding-inline: var(--pad-highlight);
		transition:
			background var(--color-crossfade-duration) var(--color-crossfade-ease),
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
	}
	abbr[title]:after {
		content: '?';
		font-size: var(--script-size);
		color: var(--ui-text-muted);
		transition:
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
	}
	/* lists */
	ul {list-style: disc; margin-block: 1em;}
	li {margin-inline-start: 1em; margin-block-end: 1em; line-height: 1.4;}
	ol {list-style: decimal; margin-block: 1em;}
	dl {margin-block: 1em; line-height: 1.4;}
	dt {font-weight: 700;}
	dd {margin-inline-start: 1em; margin-block-end: 1em;}
	/* block elements */
	img {
		inline-size: 100%;
		margin-block-end: 1em;
	}
	blockquote {
		font-style: italic;
		font-size: 1.3rem;
		margin-block: 1em;
		padding: 0.5rem 1rem;
		line-height: 1.4;
		cite {
			font-size: 1rem;
		}
	}
	pre {
		font-family: monospace;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		transition:
			background var(--color-crossfade-duration) var(--color-crossfade-ease),
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
		padding: 1em;
		line-height: 2;
		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);
		transition:
			background var(--color-crossfade-duration) var(--color-crossfade-ease),
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
		padding: 0.25rem;
	}
	:not(.highlight) > pre {
		line-height: 1.5;
		background: var(--ui-overlay);
		transition:
			background var(--color-crossfade-duration) var(--color-crossfade-ease);
		padding: 1em;
	}
	pre code {
		padding: 0;
	}
	code .line {
		padding-inline: 1em;
	}
	.highlight pre {
		padding-block: 1em;
	}
	/* figures */
	figure {
		margin-block: 1em;
		display: grid;
		place-items: center;
	}
	figure img {
		inline-size: max-content;
		max-inline-size: 100%;
		margin-block-end: -0.125em;
	}
	figcaption {
		font-style: italic;
		line-height: 1.2;
		inline-size: 100%;
		text-align: center;
		p {
			margin: 1em auto;
		}
	}
	/* tables */
	table {text-align: center;}
	thead {
		font-weight: 700;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		transition:
			background var(--color-crossfade-duration) var(--color-crossfade-ease),
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
	}
	th, td {
		border: 1px solid;
		border-color: var(--ui-text);
		padding: 0.5em;
		transition:
			border-color var(--color-crossfade-duration) var(--color-crossfade-ease);
	}
	/* 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);
				transition:
					color var(--color-crossfade-duration) var(--color-crossfade-ease);
				text-transform: uppercase;
				font-weight: 900;
				font-size: 0.8em;
			}
			&:after {
				content: '';
				inline-size: 100%;
				margin-inline-start: 1rem;
				border-block-end: 1px solid;
				border-color: var(--ui-text-muted);
				transition:
					border-color var(--color-crossfade-duration) var(--color-crossfade-ease);

			}
		}
	}
}