MDN: Content first (Header to Footer)

Moves main content to the top, so the header with dropdown menus lands above footer.

/* ==UserStyle==
@name           MDN: Content first (Header to Footer)
@description    Moves main content to the top, so the header with dropdown menus lands above footer.
@namespace      myfonj
@version        1.0.1
@license        CC0 - Public Domain
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
	/*
		https://greasyfork.org/en/scripts/409087/versions/new

		body
			div#react-container[data-component-name="SPA"]
				..
				ul#nav-access
				header
				main[role="main"]
				footer
	*/
	body > #react-container {
		display: flex;
		flex-direction: column;
	}
	body > #react-container > main {
		order: -1;
	}
	body > #react-container > header {
		border-top: 2px solid #3d7e9a
	}
	/*
		compact Edit button
		<div class="titlebar">
			<h1 class="title">..</h1>
			<a class="button neutral" href="https://wiki.developer.mozilla.org/.." rel="nofollow">
				<svg class="icon icon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 26" aria-hidden="true">
					<path d="..">
					</path>
				</svg>
				Edit in wiki
			</a>
		</div>	
	*/
	h1.title + .button {
		min-height: auto;
		padding: 0.5rem
	}
	h1.title + .button > svg {
		float: right;
		margin-left: 0.5rem;
	}
	h1.title + .button:not(:hover):not(:focus) {
		color: transparent;
		background-color: transparent;
		border-color: transparent;
	}
	h1.title + .button:not(:hover):not(:focus) > svg {
		color: black;
		margin-left: 0.0rem;
	}
}