detect homepage to add container

src/app/app.component.html

@@ -5,8 +5,8 @@
 
 	<mat-sidenav-content>
 		<div id="big_container" [class]="themeClass">
-			<div class="container">
 			<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
+			<div [class.container]="onHomePage">
 				<main [@routeAnimations]="prepareRoute(outlet)">
 					<router-outlet #outlet></router-outlet>
 				</main>

src/app/app.component.ts

@@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 	private themeSubscription: Subscription;
 
 	public environment = environment;
+	public onHomePage = false;
 
 	constructor(
 		private router: Router,
@@ -67,6 +68,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 			if (!(evt instanceof NavigationEnd)) {
 				return;
 			}
+			console.log('evt', evt);
+
+			this.onHomePage = evt.url === '/';
 
 			let mainelem = this.document.querySelector('#big_container main');
 			console.log('mainelem', mainelem);

src/app/core/components/header/header.component.html

@@ -1,4 +1,5 @@
 <header class="big-header">
+	<div class="container">
 		<nav class="navbar" role="navigation" aria-label="main navigation">
 			<div class="navbar-brand">
 				<a class="navbar-item" routerLink="/">
@@ -13,7 +14,12 @@
 			</div>
 			<div class="navbar-start">
 				<span class="navbar-item">
-				<a class="button is-primary" role="button" routerLink="/administration" routerLinkActive="is-active">
+					<a
+						class="button is-primary"
+						role="button"
+						routerLink="/administration"
+						routerLinkActive="is-active"
+					>
 						<i class="fa fa-plus-circle"></i>
 						<div class="is-hidden-touch">
 							{{ 'config.title' | translate }}
@@ -129,4 +135,5 @@
 		>
 			<i class="fa fa-hand-paper-o"></i> test admin link to edit poll
 		</a>
+	</div>
 </header>

src/styles/partials/_main.scss

@@ -1,12 +1,14 @@
 @charset "UTF-8";
-
+body,
+html {
+	background: $white;
+}
 main {
 	display: block;
 	width: 100%;
 	margin: 0 auto;
 }
 
-.creation,
 .search {
 	@extend main;
 }

src/styles/partials/_navigation.scss

@@ -1,6 +1,28 @@
+app-header {
+	background: $primary_color;
+	color: $white;
+}
+.big-header {
+	background: $secondary-color;
+	color: $white;
+	.container {
+		background: $secondary-color;
+		color: $white;
+		box-shadow: none;
+	}
+}
+
+// material override
+.navbar {
+	margin-bottom: 0;
+	background: $secondary-color;
+	color: $white;
+}
+
 nav {
+	background: $primary-color;
 	text-align: center;
-	border-bottom: 2px solid $primary;
+	border-bottom: 2px solid $primary-color;
 
 	a {
 		&::before {
@@ -81,10 +103,6 @@ a {
 		padding-left: 1rem;
 	}
 }
-// material override
-.navbar {
-	margin-bottom: 0;
-}
 a span.ui-steps-number {
 	padding: 0;
 }

src/styles/themes/_base.scss

@@ -1,5 +1,5 @@
 #big_container {
-	background: $primary;
+	background: $white;
 
 	main {
 		margin-bottom: 2em;
@@ -11,9 +11,6 @@
 
 		.container {
 			padding-bottom: 5em;
-
-			@extend .boxed-shadow;
-
 			.column:last-of-type {
 				text-align: right;
 			}

src/styles/themes/_light.scss

@@ -1,6 +1,4 @@
 #big_container {
-	background: $primary;
-
 	&.theme-light-watermelon {
 		.big-header {
 			.container {