hugo-theme-paradox/assets/styles/layouts/responsive.scss

/* [responsive] re-show the navigation menu as a sidebar */

@media (min-width: 60rem) {
	body {
		display: grid;
		grid-template-columns: 1fr 3fr;
		height: calc(100 * var(--vh, 1vh));
	}
	.site-header, .scroll-margin, .site-footer {
		grid-column: span 2
	}

	.site-footer { /* fixed height footer */
		height: var(--footer-height);
	}

	.docs-nav {
		grid-column: 1;
		height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
		overflow-y: auto;
		padding: 0;
	}
	main {
		grid-column: 2;
		height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
		overflow-y: auto;
		scrollbar-width: none;
	}
	.docs-nav::-webkit-scrollbar,
	main::-webkit-scrollbar {
		display: none;
	}

	.docs-nav .menu {margin-top: 0;}

	.page-header {
		padding: 0;
	}
 
	/* toggle is no longer needed */

	.toggle-menu {
		display: none;
	}
	
	.toggle-menu:not(:checked) ~ .menu {
		display: unset;
	}
	.toggle-menu__label {
		display: none;
	}

}

/* [responsive] move the toc to its own column */

@media (min-width: 75rem) {
	body {
		grid-template-columns: 20rem 1fr;
	}
	.page {
		display: grid;
		grid-template-columns: 40rem 1fr;
	}
	.page .page-header {
		grid-column: span 2
	}
	.page .section {
		grid-column: 1;
	}
	.page .toc {
		grid-column: 2;
		grid-row: span 2;
		padding: 0;
	}
	.page .toc .container {
		margin: 0;
		position: sticky;
		top: 0;
		max-height: calc(100vh - var(--header-height) - var(--footer-height));
		overflow-y: auto;
	}
}

/* [responsive] let the <main> expand until max width of site */

@media (min-width: 80rem) {

	.page {
		grid-template-columns: 1fr 20rem; /* toc now visually balanced with menu */
	}

	/* start limiting content since it can exceed 80ch now */

	.content .container
	{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
		padding: 0;
		> * {
			grid-column: 2;
		}
		> img
		{
			grid-column: 1 / span 3;
		}
	}

	/* also make the middle stuff line up */

	.page-header,
	.list,
	.section-nav,
	.page-footer
	{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
		> .container {
			padding: 0;
			grid-column: 2;
		}
	}

}

/* [responsive] fixed layout after reaching maxwidth */

@media (min-width: $site-max-width) {

	body {
		grid-template-columns: 1fr 20rem calc(var(--site-max-width) - 20rem) 1fr
	}

	.docs-nav {grid-column: 2;}
	main {grid-column: 3;}
	.site-header,
	.site-footer,
	.scroll-margin
	{
		grid-column: 2 / span 2;
	}

	/* except now the page is fixed to maxwidth and the toc can "grow" */

	.page {
		grid-template-columns: calc(var(--site-max-width) - 40rem) 1fr;
	}

	/* we don't actually want it to grow, though! just stick to the side */

	.page {position: relative;}
	.page .toc {
		position: sticky;
		top: 0;
	}

	/* also the menu sidebar should stick to the other side */
	.docs-nav {
		position: sticky;
		width: 20rem;
		place-self: end;
	}

}