Simplify header (#832)

Polymer · May 30, 2016 · e438edd · e438edd
1 parent ceacd6a
commit e438edd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 37 deletions.
diff --git a/src/psk-app/psk-app.html b/src/psk-app/psk-app.html
@@ -68,20 +68,9 @@
         color: #444;
       }
 
-      .title-toolbar {
-        @apply(--layout-center-center);
-        width: 100vw;
-        box-sizing: border-box;
-      }
-
-      app-drawer-layout:not([narrow]) .title-toolbar {
-        width: 100%;
-      }
-
-      .title {
-        padding-bottom: 40px;
-        font-size: 50px;
-        font-weight: 800;
+      [title] {
+        font-size: 20px;
+        font-weight: normal;
       }
 
       iron-selector {
@@ -107,14 +96,6 @@
       iron-pages > * {
         min-height: 100vh;
       }
-
-      @media (max-width: 580px) {
-        /* make title smaller to fit on screen */
-        .title {
-          font-size: 30px;
-          padding-bottom: 16px;
-        }
-      }
     </style>
 
     <!-- setup routes -->
@@ -148,15 +129,9 @@
       <!-- main panel -->
       <app-header-layout>
         <app-header reveals effects="waterfall" class="main-header">
-          <!-- top toolbar -->
           <app-toolbar>
-            <!-- menu button -->
             <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
-          </app-toolbar>
-
-          <!-- bottom toolbar -->
-          <app-toolbar class="title-toolbar">
-            <h1 class="title">Polymer Starter Kit</h1>
+            <h1 title>Polymer Starter Kit</h1>
           </app-toolbar>
         </app-header>
       </app-header-layout>

diff --git a/src/styles/shared-styles.html b/src/styles/shared-styles.html
@@ -17,17 +17,10 @@
     <style>
       /* shared style for page titles */
       .page-title {
-        font-size: 40px;
+        font-size: 26px;
         margin-left: 40px;
         color: var(--paper-grey-800);
       }
-
-      @media (max-width: 580px) {
-        /* make page title smaller */
-        .page-title {
-          font-size: 26px;
-        }
-      }
     </style>
   </template>
 </dom-module>