Improvements to styles on smaller screens

Used smaller margins, padding and fonts to better fit content on the
Home, Projects and Contact screens.

Also fixed crossfade animation between screens.

src/app/app.component.ts

@@ -1,31 +1,40 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from "@angular/router";
-import {animate, query, style, transition, trigger} from "@angular/animations";
+import {RouterOutlet} from '@angular/router';
+import {animate, query, style, transition, trigger} from '@angular/animations';
 
 export const routerTransition = trigger('routerTransition', [
-  // The '* => *' will trigger the animation to change between any two states
-  transition('* => *', [
-    // The query function has three params.
-    // First is the event, so this will apply on entering or when the element is added to the DOM.
-    // Second is a list of styles or animations to apply.
-    // Third we add a config object with optional set to true, this is to signal
-    // angular that the animation may not apply as it may or may not be in the DOM.
-    query(
-      ':enter',
-      [style({opacity: 0})],
-      {optional: true}
-    ),
-    query(
-      ':leave',
-      // here we apply a style and use the animate function to apply the style over 0.3 seconds
-      [style({opacity: 1}), animate('0.3s', style({opacity: 0}))],
-      {optional: true}
-    ),
-    query(
-      ':enter',
-      [style({opacity: 0}), animate('0.3s', style({opacity: 1}))],
-      {optional: true}
-    )
+  transition('* <=> *', [
+    // Initial state of new route
+    query(':enter',
+      style({
+        position: 'fixed',
+        width: '100%',
+        // transform: 'translateX(-100%)'
+        opacity: 0
+      }),
+      {optional: true}),
+
+    // move page off screen right on leave
+    query(':leave',
+      animate('300ms ease-in-out',
+        style({
+          position: 'fixed',
+          width: '100%',
+          // transform: 'translateX(100%)'
+          opacity: 0
+        })
+      ),
+      {optional: true}),
+
+    // move page in screen from left to right
+    query(':enter',
+      animate('300ms ease-in-out',
+        style({
+          opacity: 1,
+          // transform: 'translateX(0%)'
+        })
+      ),
+      {optional: true}),
   ])
 ]);
 
@@ -38,7 +47,7 @@ export const routerTransition = trigger('routerTransition', [
 export class AppComponent {
 
   getState(outlet: RouterOutlet) {
-    return outlet.activatedRouteData.state
+    return outlet.activatedRouteData.state;
   }
 }