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

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

.layout-_default-list {
	.skip-to-items {
		position: absolute;
		inset-block-start: -5em;
		inset-inline-start: 1em;
		transition: all 0.25s 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: all 0.25s ease-in;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		padding: 1em;
		@include shadow-low;
		&:focus {
			inset-inline-start: 1em;
		}
	}
	.list-header {
		hr {display: none;}
		.container {
			max-width: 80ch;
			margin-inline: auto;
		}
	}
	.list-title {
		margin-block-start: 0;
		font-size: 2.025rem;
		line-height: 1.15;
		letter-spacing: -0.022rem;
		grid-area: title;
	}
	.list-author {}
	.list-summary {
		font-style: italic;
		font-size: 1.266rem;
		line-height: 1.15;
		letter-spacing: -0.022rem;
		margin-block-start: 0.5rem;
		grid-area: summary;
	}
	.list-content {}
	.list-permalink {
		.u-url {font-family: monospace;}
	}
	.list-alt-formats {
		.path {font-family: monospace;}
		p {
			margin-block-end: 0;
		}
		.alt-formats-list {
			margin-block-start: 0;
			&-item {
				margin-block: 0;
				a {}
			}
		}
	}
	.list-pages {
		max-width: 80ch;
		margin-inline: auto;
		.pages-list {
			list-style: none;
			padding-inline-start: 0;
			&__item {
				line-height: 1.5;
				margin-inline-start: 0;
				margin-block: 1em;
				.u-url {display: inline;}
				.p-name {
					font-weight: bold;
					font-size: 1em;
					margin: 0;
					display: inline;
				}
				.p-summary {
					font-style: italic;
					display: block;
				}
			}
		}
	}
	@media (min-width: 400px) {
		.container {
			padding: 0 2em;
		}
	}
}