#header {
	text-align: center;

	padding: 0 0.25em 1em;
	margin-bottom: 0.75em;
	border-bottom: solid 1px currentColor;

	a {
		text-decoration: none;
		color: inherit;
	}

	h1 {
		margin-top: 0.25em;
		margin-bottom: 0.25em;

		font-size: 1.75em;
		font-family: 'Josefin Sans', sans-serif;
		font-weight: 600;
		-webkit-font-feature-settings: 'smcp';
	}

	ul {
		@include list-inline;
		border: solid 1px currentColor;
		border-radius: 3px;

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		li {
			flex: 1;
		}

		a {
			display: block;
			padding: 0.25em 0.5em;
		}

		.octicon {
			width: 16px;
		}

		.active {
			background-color: $appColor;
			color: white;
		}
	}
}

#header {
	text-align: center;

	padding: 0 0.25em 1em;
	margin-bottom: 0.75em;
	border-bottom: solid 1px currentColor;

	a {
		text-decoration: none;
		color: inherit;
	}

	h1 {
		margin-top: 0.25em;
		margin-bottom: 0.25em;

		font-size: 1.75em;
		font-family: 'Josefin Sans', sans-serif;
		font-weight: 600;
		-webkit-font-feature-settings: 'smcp';
	}

	ul {
		@include list-inline;
		border: solid 1px currentColor;
		border-radius: 3px;

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		li {
			flex: 1;
		}

		a {
			display: block;
			padding: 0.25em 0.5em;

			&:hover {
				background-color: rgba(#663399, 0.15);
			}
		}

		.octicon {
			width: 16px;
		}

		.active {
			background-color: $appColor;
			color: white;

			&:hover {
				background-color: $appColor;
			}
		}
	}
}

Add color to hovering in the header
Add color to hovering in the header
