trwnh.com/unified.test.hugo/assets/styles/layouts/_default/single.scss

@import "../../mixins/shadow.scss";

.layout-_default-single {
	position: relative;
	.skip-to-end-of-header {
		position: absolute;
		inset-block-start: -5em;
		inset-inline-start: 1em;
		transition: 0.25s all ease-in;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		padding: 1em;
		@include shadow-low;
		&:focus {
			inset-block-start: 1em;
		}
	}
	.back-to-top {
		position: absolute;
		inset-block-end: 1em;
		inset-inline-start: -10em;
		transition: 0.25s all ease-in;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		padding: 1em;
		@include shadow-low;
		&:focus {
			inset-inline-start: 1em;
		}
	}
	.page-header {
		hr {display: none;}
		.container {
			max-width: 80ch;
			margin-inline: auto;
		}
	}
	.page-title {
		margin-block-start: 0;
		font-size: 2.025rem;
		line-height: 1.15;
		letter-spacing: -0.022rem;
		grid-area: title;
	}
	.page-summary {
		font-style: italic;
		font-size: 1.266rem;
		line-height: 1.15;
		letter-spacing: -0.022rem;
		margin-block-start: 0.5rem;
		grid-area: summary;
	}
	.page-author {
		grid-area: author;
		margin-block: 0;
	}
	.page-date {
		grid-area: date;
		margin-block-end: 0;
		.date {display: inline-block;}
	}
	.page-inreplyto {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.5em;
		align-items: center;
		.reply-icon {
			background: var(--ui-overlay);
			display: inline-block;
			width: 1em;
			height: 1em;
			padding: 0.25em;
			border-radius: 100em;
		}
	}
	.page-permalink {
		margin-block-end: 0;
		align-self: end;
		.u-url {font-family: monospace;}
	}
	.page-syndication {
		p {margin-block-end: 0;}
		.syndication-list {
			margin-block-start: 0;
			&-item {
				margin-block: 0;
				.u-syndication {}
			}
		}
	}
	.page-series {
		hr {display: none;}
		// background: var(--ui-overlay);
		// color: var(--ui-overlay-text);
		.container {
			max-width: 80ch;
			margin-inline: auto;
		}
		&__hint {
			font-style: italic;
		}
		.series {
			list-style: none;
			padding-inline-start: 1em;
			.current-post {
				font-weight: bold;
			}
			.series-post {
				margin-block: 0.5em;
				&__part {
					margin-inline-end: 0.5em;
				}
				&__title {

				}
				&__link {

				}
			}
		}
	}
	.page-content {
		width: 100%;
		max-width: 80ch;
		margin-inline: auto;
	}
	.page-footer {
		hr {display: none;}
		width: 100%;
		max-width: 80ch;
		margin-inline: auto;
		#footnotes h2 {
			font-size: 1rem;
			font-weight: 900;
			text-transform: uppercase;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				inset-inline-end: 0;
				inset-block-start: calc(50% - 1px);
				background: var(--ui-overlay);
				block-size: 1px;
				inline-size: calc(100% - 12ch);
			}
		}
	}
	.page[has-toc] {
		padding-block-end: 4em;
	}
	.page > .table-of-contents {
		display: none;
	}
	#toc-toggle {
		display: none;
		&:checked ~ .table-of-contents {
			display: block;
			position: fixed;
			z-index: 10;
			inset-block-end: 6em;
			height: max-content;
			width: 80%;
			max-width: 20em;
			max-height: #{min}(40em, 70vh);
			overflow-y: scroll;
			inset-inline-end: 1em;
			background: var(--ui-overlay);
			border-radius: 1em;
			@include shadow-low;
			padding-inline: 1em;
			> .container {
				padding: 0;
			}
		}
	}
	label[for="toc-toggle"] {
		position: fixed;
		inset-block-end: 1em;
		inset-inline-end: 1em;
		z-index: 5;
		background: var(--ui-overlay);
		padding: 1em;
		border-radius: 100em;
		width: 6em;
		display: flex;
		justify-content: center;
		@include shadow-low;
	}
	#toc-toggle ~ label[for="toc-toggle"] {

	}
	#toc-toggle:checked ~ label[for="toc-toggle"] {

	}
	#toc-toggle__label-hide {
		display: none;
	}
	#toc-toggle:checked ~ #toc-toggle__label-hide {
		display: flex;
	}
	#toc-toggle:checked ~ #toc-toggle__label-show {
		display: none;
	}
	@media (min-width: 400px) {
		.container {
			padding: 0 2em;
		}
	}
	@media (min-width: 60rem) {
		label[for="toc-toggle"] {
			display: none;
		}
		.container {padding: 0;}
		.page[has-toc] {
			display: grid;
			grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr;
			grid-template-rows: auto auto auto;
			gap: 2em;
			padding-block-end: unset;
			.page-header {
				grid-column: 1 / span 4;
				grid-row: 1;
				display: grid;
				grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr;
				gap: 2em;
				.container {
					max-width: unset;
					grid-column: 2 / span 2;
				}
			}
			.table-of-contents {
				display: block;
				grid-column: 3;
				grid-row: 2 / span 2;
				position: sticky;
				inset-block-start: 2em;
				align-self: start;
				justify-self: start;
				max-width: unset;
				border-inline-start: thin solid var(--ui-overlay);
				padding-inline: 2em;
				max-height: 90vh;
				overflow-y: auto;
				scrollbar-color: var(--ui-text) var(--ui-overlay);
				&::-webkit-scrollbar-thumb {
					background-color: var(--ui-text)
				}
				&::-webkit-scrollbar-track {
					background-color: var(--ui-overlay)
				}
			}
			.page-content {
				grid-column: 2;
				grid-row: 2;
				max-width: unset;
				padding-block-start: 0.5rem;
				padding-block-end: 0;
				.toc {
					display: none;
				}
			}
			.page-footer {
				grid-column: 2;
				grid-row: 3;
				max-width: unset;
				#footnotes h2 {margin-block-start: 0;}
				padding-block: 0;
			}
		}
	}
}