<commit_before>@import './activate-btn', './steps-navigation';

.app-wrapper {
	height: 100%;
}

.app {
	$menu-color: rgba(224, 223, 213, 0.11) !default;
	$menu-item-color: #696464 !default;
	$menu-item-color-active: black !default;
	$menu-transition: .7s linear !default;
	$content-max-width: 800px !default;
	$content-width: 60% !default;

	height: 100%;
	
	&__content {
		width: $content-width;
		max-width: $content-max-width;
		margin: 0 auto;
		padding: 1em;
		height: 100%;
		
		&__main {
			height: 100%;
			display: flex;
			flex-direction: column;
			
			> :nth-last-child(3) {
				margin-bottom: 3em;

				@supports (position: sticky) {
					margin-bottom: -2em;
				}
			}
			
			.markdown {
				flex-grow: 1;
			}
			
			&--last {
				.steps-navigation > .arrow {
					transform: rotate(-135deg);
					margin-right: auto;
					margin-left: initial;
				}
			}
		}
	}

	&__menu {
		position: relative;
		position: sticky;
		top: .5em;
		float: left;
		transition: transform $menu-transition;
		background-color: $menu-color;
		filter: drop-shadow(0 0 5px gray);
		border-bottom-right-radius: 10%;
		margin-top: .5em;
		
		&.closed {
			transform: translateX(-100%);
		}
		
		&__activate {
			position: absolute;
			top: 0;
			left: 100%;
			border: 5px solid transparent;
			border-radius: 0 53% 53% 0/0 62% 62% 0;
			background-color: inherit;
		}

		&__list {
			list-style: none;
			padding: 1em;
			font-family: monospace;
			text-transform: uppercase;
			font-size: 1.7em;
			
			&--nested {
				font-size: .9em;
				padding: 0 0 0 1em;
			}<commit_msg>fix(menu): Fix menu shifting content away on small screens<commit_after>@import './activate-btn', './steps-navigation';

.app-wrapper {
	height: 100%;
}

.app {
	$menu-width: 200px;
	$menu-color: rgba(224, 223, 213, 0.83) !default;
	$menu-item-color: #696464 !default;
	$menu-item-color-active: black !default;
	$menu-transition: .7s linear !default;
	$content-max-width: 800px !default;
	$content-width: 60% !default;

	height: 100%;
	
	&__content {
		width: $content-width;
		max-width: $content-max-width;
		margin: 0 auto;
		padding: 1em;
		height: 100%;
		
		&__main {
			height: 100%;
			display: flex;
			flex-direction: column;
			
			> :nth-last-child(3) {
				margin-bottom: 3em;

				@supports (position: sticky) {
					margin-bottom: -2em;
				}
			}
			
			.markdown {
				flex-grow: 1;
			}
			
			&--last {
				.steps-navigation > .arrow {
					transform: rotate(-135deg);
					margin-right: auto;
					margin-left: initial;
				}
			}
		}
	}

	&__menu {
		position: absolute;
		position: sticky;
		top: .5em;
		float: left;
		transition: transform $menu-transition;
		background-color: $menu-color;
		filter: drop-shadow(0 0 5px gray);
		border-bottom-right-radius: 10%;
		margin-top: .5em;
		margin-left: -$menu-width;
		width: $menu-width;
		z-index: 999;
		
		&.open {
			transform: translateX(100%);
		}
		
		&__activate {
			position: absolute;
			top: 0;
			left: 100%;
			border: 5px solid transparent;
			border-radius: 0 53% 53% 0/0 62% 62% 0;
			background-color: inherit;
		}

		&__list {
			list-style: none;
			padding: 1em;
			font-family: monospace;
			text-transform: uppercase;
			font-size: 1.7em;
			
			&--nested {
				font-size: .9em;
				padding: 0 0 0 1em;
			}
{'fraction_non_alphanumeric': 0.15688073394495414, 'fraction_numerical': 0.05076452599388379, 'mean_word_length': 2.6465997770345595, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '759706', 'n_tokens_mistral': 1642, 'n_tokens_neox': 1221, 'n_words': 288}