montreuil: move logo on top of header

static/montreuil/_custom.scss

@@ -16,11 +16,19 @@ body.has-header-background header {
 
 div#header-wrapper {
 	height: 230px;
-	border-top: 44px solid $primary-color;
+	border-top: $nav-menu-side solid $primary-color;
+	#header div#top {
+		position: absolute;
+		top: -60px;
+		width: calc(100% - 50px);
+		@media screen and (max-width: $mobile-limit) {
+			left: 50px;
+		}
+	}
 	h1#logo a {
 		display: block;
 		text-indent: -9999px;
-		height: 115px;
+		height: 50px;
 	}
 }
 
@@ -28,16 +36,21 @@ div#header-wrapper {
 	padding: 0.2em 1em;
 	background: $secondary-color;
 	border-radius: 0;
-	margin-top: -37px;
+	margin-top: 10px;
 	text-transform: uppercase;
-	font-size: 85%;
+	border: 0;
+	box-shadow: none;
 	> span:first-child::before {
 		content: '\f007';
 		font-family: FontAwesome;
 		margin-right: 5px;
 	}
 	@media screen and (max-width: $nav-mobile-limit) {
+		right: 1.5em;
 		background: transparent;
+		> span:first-child::before {
+			display: none;
+		}
 	}
 	span {
 		a {
@@ -54,6 +67,10 @@ div.gru-nav {
 		position: absolute;
 		top: 0;
 		z-index: 1;
+		width: $nav-menu-side;
+		&.toggled {
+			width: auto;
+		}
 	}
 	.gru-nav-button {
 		border-radius: 0;
@@ -63,11 +80,16 @@ div.gru-nav {
 		& + ul {
 			border: 0;
 		}
+		& .icon-bar {
+			border-bottom: 2px solid $nav-button-color;
+		}
 	}
-	> ul > li a {
-		@media screen and (max-width: $nav-mobile-limit) {
-			font-size: 0.8em;
-			font-weight: normal;
+	> ul {
+		> li a {
+			@media screen and (max-width: $nav-mobile-limit) {
+				font-size: 0.8em;
+				font-weight: normal;
+			}
 		}
 	}
 }

static/montreuil/_vars.scss

@@ -13,7 +13,7 @@ $footer-color: $white;
 $nav-button-background: $primary-color;
 $nav-color: $primary-color;
 $nav-border-color: $primary-color;
-$nav-menu-side: 44px;
+$nav-menu-side: 70px;
 $nav-item-hover-background: $primary-color;
 $nav-item-selected-background: $primary-color;
 $nav-button-background: $white;