Fix SVGs scaling poorly on mobile (#182)

Author: jelbourn

src/app/pages/component-category-list/component-category-list.scss

@@ -23,7 +23,8 @@
 }
 
 .docs-component-category-list-card-summary {
-  height: 2.4em;
+  min-height: 2.4em;
+  margin-bottom: 8px;
 }
 
 .docs-component-category-list-header {

src/app/pages/homepage/_homepage-theme.scss

@@ -7,7 +7,7 @@
 
   app-homepage {
     .docs-header-background {
-      background: url('/assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
+      background: mat-color($primary);
     }
 
     .docs-header-headline {

src/app/pages/homepage/homepage.html

@@ -1,8 +1,8 @@
 <header class="docs-header-background">
   <div class="docs-header-section">
     <div class="docs-header-headline">
-      <h1>Angular Material</h1>
-      <h2> Material Design components for Angular apps</h2>
+      <h1 class="mat-h1">Angular Material</h1>
+      <h2> Material Design components for Angular</h2>
     </div>
     <div class="docs-header-start">
      <a md-raised-button class="docs-button" routerLink="guide/getting-started">Get started</a>
@@ -13,7 +13,9 @@ <h2> Material Design components for Angular apps</h2>
 <div class="docs-homepage-promo">
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
-      <docs-svg-viewer svgHref="../assets/img/homepage/sprintzerotoapp.svg"></docs-svg-viewer>
+      <docs-svg-viewer
+          svgHref="../assets/img/homepage/sprintzerotoapp.svg"
+          scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Sprint from Zero to App</h2>
@@ -23,7 +25,9 @@ <h2>Sprint from Zero to App</h2>
   </div>
   <div class="docs-homepage-row docs-homepage-reverse-row">
     <div class="docs-homepage-promo-img">
-      <docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
+      <docs-svg-viewer
+          svgHref="../assets/img/homepage/fastandconsistent.svg"
+          scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Fast and Consistent</h2>
@@ -33,7 +37,9 @@ <h2>Fast and Consistent</h2>
   </div>
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
-      <docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
+      <docs-svg-viewer
+          svgHref="../assets/img/homepage/versatile.svg"
+          scaleToContainer="true"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Versatile</h2>

src/app/pages/homepage/homepage.scss

@@ -2,20 +2,20 @@
 $margin-promotion-sections: 60px;
 
 .docs-header-background {
-  height: 500px;
+  height: 300px;
   margin-bottom: 40px;
 }
 
 .docs-header-section {
   text-align: center;
-  padding-top: 160px;
+  padding-top: 60px;
 }
 
 .docs-header-headline {
   h1 {
-    font-size: 30px;
-    font-weight: 400;
-    line-height: 40px;
+    font-size: 56px;
+    font-weight: 300;
+    line-height: 56px;
     margin: 15px 0 15px 0;
   }
 

src/app/shared/svg-viewer/svg-viewer.ts

@@ -13,7 +13,8 @@ import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-
 })
 
 export class SvgViewer {
-  @Input() public svgHref: string;
+  @Input() svgHref: string;
+  @Input() scaleToContainer: boolean;
 
   private _subscription: Subscription;
   private currTheme: DocsSiteTheme;
@@ -63,6 +64,13 @@ export class SvgViewer {
 
   public injectSvg(template) {
     this.el.nativeElement.innerHTML = template;
+
+    if (this.scaleToContainer) {
+      let svg = this.el.nativeElement.querySelector('svg');
+      svg.setAttribute('width', '100%');
+      svg.setAttribute('height', '100%');
+      svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    }
   }
 
   private _getSvgFromDom() {