AstralRinth/apps/frontend/src/assets/styles/layout.scss

.columns {
	display: flex;

	@for $i from 1 through 5 {
		.column-grow-#{$i} {
			flex-grow: $i;
		}
	}
}

.rows {
	display: flex;
	flex-direction: column;

	@for $i from 1 through 4 {
		.row-grow-#{$i} {
			flex-grow: $i;
		}
	}
}
.page-container {
	margin: var(--spacing-card-md);
	margin-top: 0;

	.page-contents {
		display: flex;
		flex-direction: column;
		.content {
			width: 100%;
		}
		@media screen and (min-width: 1024px) {
			flex-direction: row;
			//max-width: 1280px;
			margin-left: auto;
			margin-right: auto;
		}
	}
}

.normal-page {
	display: grid;
	padding: 0 1.5rem;

	grid-template:
		'header'
		'sidebar'
		'content'
		'info'
		/ 100%;

	@media screen and (max-width: 1024px) {
		margin-top: 1.5rem;
	}

	.normal-page__sidebar {
		grid-area: sidebar;
	}

	.normal-page__info {
		grid-area: info;
	}

	.normal-page__content {
		grid-area: content;
	}

	.normal-page__header {
		grid-area: header;
	}
}

@media (min-width: 1024px) {
	.full-page {
		margin: 0 auto;
		max-width: min(1280px, 100vw);
		width: 80rem;
	}

	.normal-page {
		margin: 0 auto;
		max-width: 80rem;
		column-gap: 0.75rem;

		grid-template:
			'sidebar content' auto
			'info content' auto
			'dummy content' 1fr
			/ 18.75rem 1fr;

		&.alt-layout {
			grid-template:
				'content sidebar' auto
				'content info' auto
				'content dummy' 1fr
				/ 1fr 18.75rem;
		}

		&.no-sidebar {
			grid-template:
				'header header' auto
				'content content' auto
				'info info' auto
				'dummy dummy' 1fr
				/ 1fr 1fr;

			.normal-page__content {
				grid-area: content;
				max-width: 100%;
			}
		}
	}

	.normal-page__sidebar {
		min-width: 18.75rem;
		width: 18.75rem;
	}

	.normal-page__content {
		max-width: calc(80rem - 18.75rem - 1.5rem);
		//overflow-x: hidden;
	}
}

.new-page {
	display: grid;
	margin: 0 auto;
	max-width: 80rem;
	column-gap: 0.75rem;
	padding: 0 1.5rem;
	padding-bottom: 1.5rem;

	grid-template:
		'header'
		'content'
		'sidebar'
		/ 100%;

	@media screen and (min-width: 1024px) {
		&.sidebar {
			grid-template:
				'header header' auto
				'content sidebar' auto
				'content dummy' 1fr
				/ 1fr 18.75rem;

			&.alt-layout {
				grid-template:
					'header header' auto
					'sidebar content' auto
					'dummy content' 1fr
					/ 18.75rem 1fr;
			}
		}

		.normal-page__sidebar {
			min-width: 18.75rem;
			width: 18.75rem;
		}
	}

	.normal-page__sidebar {
		grid-area: sidebar;
	}

	.normal-page__content {
		grid-area: content;
		max-width: calc(80rem - 18.75rem - 1.5rem);
		//overflow-x: hidden;
	}

	.normal-page__header {
		grid-area: header;
	}
}