design variation

core-doc-viewer.html

@@ -13,17 +13,21 @@
   <template>
 
     <style>
+
       :host {
         display: block;
         position: relative;
       }
+
       core-doc-toc {
         width: 332px;
         overflow-x: hidden;
       }
+
       core-doc-page {
         height: 100%;
       }
+
     </style>
 
     <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></context-free-parser>

elements/core-doc-page.css

@@ -69,11 +69,6 @@ pre code {
 
 /**/
 
-core-toolbar {
-  background-color: #E91E63;
-  color: white;
-}
-
 .details-name {
   display: inline-block; 
   vertical-align: top;

elements/core-doc-page.html

@@ -31,16 +31,20 @@
 
     <core-header-panel style="height: 100%;" mode="waterfall">
 
-      <core-toolbar>
+      <!--<core-toolbar>
         <span style="margin: 0 72px;">{{data.name}}</span>
-      </core-toolbar>
+      </core-toolbar>-->
 
       <div class="main" on-marked-js-highlight="{{hilight}}">
 
         <h1 style="font-size: 52px; color: #E91E63;">
           {{data.name}}
         </h1>
 
+        <p>
+          <core-icon icon="tag" style="vertical-align: middle;"></core-icon>&nbsp;<a href="{{data | homepageFilter}}">Home Page</a>
+        </p>
+
         <template if="{{data.description}}">
           <section class="box top">
             <div class="ntitle">Summary</div>
@@ -109,6 +113,17 @@ <h1 style="font-size: 52px; color: #E91E63;">
 
       hilight: function(event, detail, sender) {
         detail.code = hljs.highlightAuto(detail.code).value;
+      },
+
+      homepageFilter: function(data) {
+        if (!data) {
+          return '';
+        }
+        if (!data.homepage || data.homepage === 'github.io') {
+          return '//polymer.github.io/' + data.name;
+        } else {
+          return data.homepage;
+        }
       }
 
     });

elements/core-doc-toc.css

@@ -8,6 +8,9 @@ core-header-panel {
 }
 
 core-toolbar {
+  background-color: #eeeeee;
+  /*
   background-color: #E91E63;
   color: white;
+  */
 }