Add page-title class for all page titles

Replaces using paper-font-display1 for page titles. Makes all page
titles have consistent formatting.  To get page-title to work with
`max-width: 600px` had to use `!important` for my-greeting-html.
My-greeting-html did not pick the page-title class formatting from
app-theme.html.

Any suggestions on handling this better are very welcome.

app/elements/my-greeting/my-greeting.html

@@ -15,13 +15,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         display: block;
       }
 
+      .page-title {
+        @apply(--paper-font-display2);
+      }
+
       @media (max-width: 600px) {
-        h1.paper-font-display1 {
-          font-size: 24px;
+        .page-title {
+          font-size: 24px!important;
         }
       }
     </style>
-    <h1 class="paper-font-display1"><span>{{greeting}}</span></h1>
+    <h2 class="page-title"><span>{{greeting}}</span></h2>
     <span class="paper-font-body2">Update text to change the greeting.</span>
     <!-- Listens for "input" event and sets greeting to <input>.value -->
     <input class="paper-font-body2" value="{{greeting::input}}">
@@ -44,3 +48,4 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   </script>
 
 </dom-module>
+greeting

app/index.html

@@ -151,7 +151,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
             <section data-route="users">
               <paper-material elevation="1">
-                <h2 class="paper-font-display2">Users</h2>
+                <h2 class="page-title">Users</h2>
                 <p>This is the users section</p>
                 <a href="/users/Rob">Rob</a>
               </paper-material>
@@ -159,7 +159,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
             <section data-route="user-info">
               <paper-material elevation="1">
-                <h2 class="paper-font-display2">
+                <h2 class="page-title">
                 User:<span>{{params.name}}</span>
                 </h2>
                 <div>This is <span>{{params.name}}</span>'s section</div>
@@ -168,7 +168,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
             <section data-route="contact">
               <paper-material elevation="1">
-                <h2 class="paper-font-display2">Contact</h2>
+                <h2 class="page-title">Contact</h2>
                 <p>This is the contact section</p>
               </paper-material>
             </section>

app/styles/app-theme.html

@@ -127,6 +127,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     height: 900px;
   }
 
+  .page-title {
+    @apply(--paper-font-display2);
+  }
+
   /* Breakpoints */
 
   /* Small */
@@ -139,10 +143,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       padding-right: 16px;
     }
 
-    .paper-font-display1 {
-      font-size: 12px;
-    }
-
     paper-toolbar.tall .app-name {
       font-size: 24px;
       font-weight: 400;
@@ -160,6 +160,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       background: white;
     }
 
+    .page-title {
+      font-size: 24px;
+    }
+
   }
 
   /* Tablet+ */