Add some editor settings and base styles

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
   "tslint.autoFixOnSave": true,
+  "csscomb.preset": {
+  },
+  "csscomb.formatOnSave": false,
+
 }

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

@@ -1,20 +1,19 @@
 <header class="header">
-  <div class="container">
-    <div class="left">
-      <ng-content></ng-content>
-    </div>
+  <div class="left">
+    <h1 class="title">{{ title }}</h1>
+    <p>{{ subTitle }}</p>
+  </div>
+
+  <div class="center">
+    <a routerLink="/login" routerLinkActive="active">Login</a>
+    <a routerLink="/games" routerLinkActive="active">Games</a>
+  </div>
 
-    <div class="right">
-      <a routerLink="/login" routerLinkActive="active">Login</a>
-      <a routerLink="/games" routerLinkActive="active">Games</a>
-    </div>
+  <div class="right">
+    [ account ]
   </div>
 </header>
 
 <main class="main">
-  <div class="container">
-    --/ router-outlet \--
-    <router-outlet></router-outlet>
-    --\ router-outlet /--
-  </div>
+  <router-outlet></router-outlet>
 </main>

src/app/core/components/layout/layout.component.sass

@@ -0,0 +1,17 @@
+@import '~styles/variables'
+
+
+.header
+  display: flex
+  align-items: center
+  margin-bottom: $spacing-xxl
+  padding: $spacing-sm $spacing-default
+  border-bottom: $border-light-double
+
+.center
+  flex: 1
+  text-align: center
+
+.title
+  font-size: $font-size-lg
+  margin-bottom: 0

src/app/core/components/layout/layout.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, Input } from '@angular/core'
 
 @Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.sass']
 })
 export class LayoutComponent implements OnInit {
+  @Input() title: string
+  @Input() subTitle: string
 
   constructor() { }
 

src/app/core/containers/app/app.component.html

@@ -1,4 +1 @@
-<app-layout>
-  <h1>Games</h1>
-  <h2>Made with Angular by hetty82</h2>
-</app-layout>
+<app-layout [title]="title" [subTitle]="subTitle"></app-layout>

src/app/core/containers/app/app.component.ts

@@ -6,5 +6,6 @@ import { Component } from '@angular/core'
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent {
-  title = 'app'
+  title = 'Games'
+  subTitle = 'Made with Angular by hetty82'
 }

src/app/core/containers/games/games.component.html

@@ -1,5 +1,8 @@
-<h2>Game list</h2>
+<section class="container">
+  <h1 class="page-title">Game list</h1>
+
+  <ul>
+    <li *ngFor="let game of (games$ | async)">{{ game.name }}</li>
+  </ul>
+</section>
 
-<ul>
-  <li *ngFor="let game of (games$ | async)">{{ game.name }}</li>
-</ul>

src/app/core/containers/login/login.component.html

@@ -1,5 +1,7 @@
-<h2>User list</h2>
+<section class="container">
+  <h1 class="page-title">User list</h1>
 
-<ul>
-  <li *ngFor="let user of (users$ | async)">{{ user.name }}</li>
-</ul>
+  <ul>
+    <li *ngFor="let user of (users$ | async)">{{ user.name }}</li>
+  </ul>
+</section>

src/styles/_layout.sass

@@ -0,0 +1,4 @@
+.container
+  max-width: $container-max
+  margin: 0 auto
+  padding: 0 $spacing-default

src/styles/_typography.sass

@@ -2,14 +2,15 @@ html
   font-size: 16px
 
 body
-  font-family: $font-family-sans
+  font-family: $font-family-default
   font-size: 1em
   line-height: 1.5
+  color: $text-color
 
 h1,
 h2,
 h3
-  font-family: $font-family-serif
+  font-family: $font-family-special
   margin-bottom: $spacing-default
   font-weight: bold
   line-height: 1.2
@@ -24,3 +25,11 @@ p
   &:last-child
     margin: 0
 
+ul,
+ol
+  margin: 0
+  padding: 0
+  list-style: none
+
+.page-title
+  font-size: $font-size-xs

src/styles/_variables.sass

@@ -1,13 +1,40 @@
 @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i)
+@import url(https://fonts.googleapis.com/css?family=Oswald:400,600)
 
-$font-family-sans: Ubuntu, Verdana, Geneva, sans-serif
-$font-family-serif: Georgia, serif
+// fonts
+$font-family-default: Ubuntu, Verdana, Geneva, sans-serif
+$font-family-special: Oswald, sans-serif
 
-$blue: lightblue
+$font-size-xs: 0.75em
+$font-size-sm: 0.875em
+$font-size-default: 1em
+$font-size-lg: 1.25em
+$font-size-xs: 1.5em
 
-$spacing-small: 0.5rem
-$spacing-default: 1rem
 
-$border-default: 1px solid #ddd
+// colors
+$blue: #00bfff
+
+$gray-darker-1: #333333
+$gray: #666666
+$gray-lighter-1: #999999
+$gray-lighter-2: #dddddd
+
+// general
+$spacing-sm: 0.5em
+$spacing-default: 1em
+$spacing-lg: 1.5em
+$spacing-xl: 2em
+$spacing-xxl: 3em
+
+$border-default: 1px solid $gray
+$border-light: 1px solid $gray-lighter-2
+$border-light-double: 2px solid $gray-lighter-2
+
 $border-radius: 3px
 
+$container-max: 60rem
+
+// color mapping
+$text-color: $gray-darker-1
+

src/styles/global.sass

@@ -1,4 +1,6 @@
-@import "reset"
-@import "variables"
-@import "typography"
+@import 'reset'
+@import 'variables'
+@import 'mixins/index'
+@import 'typography'
+@import 'layout'
 

src/styles/mixins/__index.sass

@@ -0,0 +1,2 @@
+@import 'layout'
+

src/styles/mixins/_layout.sass

@@ -0,0 +1,4 @@
+// =container
+//   max-width: $container-max
+//   margin: 0 auto
+

tslint.json

@@ -10,7 +10,10 @@
       true,
       "check-space"
     ],
-    "curly": true,
+    "curly": [
+      true,
+      "ignore-same-line"
+    ],
     "deprecation": {
       "severity": "warn"
     },