website/sass/template/book.scss

.three-column-layout {
	--aside-gap: 40px;
	--aside-width: 300px;
	--align-with-article-title-letter-cap-heights: 0.4em;
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--aside-gap);
	// Creates a stacking context for the left popout sidebar's sticky positioning
	transform: translate(0);

	&.three-column-layout {
		max-width: var(--max-extended-width);
	}

	.close-chapter-selection,
	.open-chapter-selection {
		display: none;
		flex: 0 0 auto;
		fill: var(--color-navy);
		background: none;
		border: none;
		box-sizing: content-box;
		padding: 6px;
		font-size: 0;
		cursor: pointer;

		svg {
			width: 36px;
			height: 36px;
		}
	}

	.reading-material {
		flex: 1 2 100%;

		article {
			width: 100%;
		}

		.prev-next {
			display: flex;
			justify-content: space-between;
			width: 100%;
			gap: 20px;
			
			a {
				display: flex;
				align-items: center;
				gap: 20px;
				
				svg {
					fill: var(--color-navy);
					flex: 0 0 auto;
				}

				&:last-of-type {
					text-align: right;
				}
			}
		}
	}

	@media print {
		aside {
			display: none;
		}
	}

	// Page contents right sidebar is removed on smaller screens
	@media screen and (max-width: 1200px) {
		.contents {
			display: none;
		}
	}

	// Overlaid fold-out menu for chapter selection
	@media screen and (max-width: 1000px) {
		gap: 0;
		
		.chapters {
			position: sticky;
			width: 0;
			margin-top: calc(-120 * var(--variable-px));
			overflow: visible;
			z-index: 10;
			height: 0;
			transition: height 0.25s ease-in-out 0.25s;

			&.open {
				height: 100vh;
				transition: height 0s;

				.wrapper-outer {
					left: 0;
				}
			}
			
			.wrapper-outer {
				position: absolute;
				background: white;
				top: 0;
				bottom: 0;
				padding-left: var(--page-edge-padding);
				margin-left: calc(-1 * var(--page-edge-padding));
				padding-bottom: calc(120 * var(--variable-px));
				margin-bottom: calc(-120 * var(--variable-px));
				padding-top: 16px;
				margin-top: -16px;
				border-right: var(--border-thickness) solid var(--color-walnut);
				box-sizing: border-box;
				transition: left 0.25s ease-in-out;
				left: calc(-1 * (var(--aside-width) + 10px));
				width: var(--aside-width);

				&::after {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					right: -10px;
					width: 10px;
					background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
				}

				.wrapper-inner {
					position: relative;
					overflow-y: auto;
					height: 100%;
					padding-right: var(--page-edge-padding);

					ul:first-of-type {
						margin-top: calc(120 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
					}

					.close-chapter-selection {
						display: block;
						position: absolute;
						top: calc(20px - 6px);
						right: calc(20px - 6px);
					}
				}
			}
		}

		.reading-material {
			margin-left: auto;
			margin-right: auto;
			width: 100%;

			.article-title {
				display: flex;
				white-space: nowrap;

				h1 {
					white-space: normal;
					display: flex;

					.open-chapter-selection {
						display: inline-block;
						padding-top: 0;
						padding-bottom: 0;
						margin-left: -6px;
						margin-right: calc(20px - 6px);
					}
				}
			}
		}
	}

	aside {
		position: sticky;
		align-self: flex-start;
		overflow-y: auto;
		top: 0;
		width: var(--aside-width);
		max-height: 100vh;
		margin-top: -40px;
		flex: 0 1 auto;

		&.contents > ul,
		.wrapper-inner > ul {
			&:first-of-type {
				margin-top: calc(40px + var(--align-with-article-title-letter-cap-heights));
			}

			&:last-of-type {
				margin-bottom: calc(40 * var(--variable-px));
			}
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			margin-top: 40px;

			ul {
				margin-top: 0;
				margin-left: 1em;

				ul {
					margin-left: 2em;

					ul {
						margin-left: 3em;

						ul {
							margin-left: 4em;
	
							ul {
								margin-left: 5em;
							}
						}
					}
				}
			}

			li {
				margin-top: 0.5em;
				
				a {
					color: var(--color-walnut);
	
					&:hover {
						color: var(--color-crimson);
					}
				}
		
				&:not(.title) a {
					text-decoration: none;
				}
	
				&.title,
				&.chapter {
					font-weight: 700;
				}
			}
		}

		&.chapters {
			li.active,
			li.active a {
				color: var(--color-ale);
			}

			ul a {
				display: block;
				padding-left: 1em;
				text-indent: -1em;
			}
		}

		&.contents {
			li {
				position: relative;
				padding-left: 12px;

				&.active::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 4px;
					background: var(--color-ale);
				}

				a:not(:hover) span {
					display: none;
				}
			}
		}
	}
}