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

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

.layout-_default-single {
	.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;
	}
	.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;
	}
	.page-series {
		// 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-toc {
		display: none;
	}
	.page-content {
		max-width: 80ch;
		margin-inline: auto;
	}
	.page[has-toc] {
		padding-block-end: 4em;
	}
	#toc-toggle {
		display: none;
		&:checked ~ .page-toc {
			display: block;
			position: fixed;
			z-index: 10;
			bottom: 5em;
			height: 40em;
			width: 80%;
			max-width: 20em;
			max-height: 70vh;
			overflow-y: scroll;
			right: 1em;
			background: var(--ui-overlay);
			border-radius: 1em;
			@include shadow-low;
			padding: 0;
			> .container {
				padding: 0;
			}
			details {
				display: contents;
				summary {
					display: none;
				}
				#TableOfContents {
					padding: 1em;
					&:before {
						content: 'Contents';
						font-size: 1em;
						font-weight: 900;
						color: var(--ui-overlay-text);
						text-transform: uppercase;
					}
				}
			}
		}
	}
	label[for="toc-toggle"] {
		position: fixed;
		bottom: 1em;
		right: 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 1fr;
			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;
				}
			}
			.page-toc {
				display: block;
				grid-column: 3;
				grid-row: 2;
				position: sticky;
				top: 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)
				}
				details {
					padding: 0;
					background: none;
					#TableOfContents {
						padding-left: 0em;
					}
				}
			}
			.page-content {
				grid-column: 2;
				grid-row: 2;
				max-width: unset;
				.toc {
					display: none;
				}
			}
		}
	}
}