feat(demo): refactor/restyle demo

  - grid based layout for pages
  - generic `app-card` component (adds color input)
  - added custom theme
  - moved `styles.scss`
  - some reconfiguration
  - made site more responsive
  - several small fixes

README.md

@@ -67,7 +67,7 @@ You decide how to display the messages by defining your own Error component:
 
 <!-- or you can use the error's data/properties to do something fancy -->
 <div *ngFor="let error of errors" [ngClass]="getErrorClass(error)">
-	{{ constructDisplayedErrorMMessage(error) }}
+	{{ constructDisplayedErrorMessage(error) }}
 </div>
 ```
 

demo-app/angular.json

@@ -23,7 +23,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss", "node_modules/normalize.css/normalize.css"],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
             "scripts": []
           },
           "configurations": {
@@ -77,7 +80,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.scss"],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"]
           }