New header design

* collapse header on mobile devices
* add AMP logo
* introduce hamburger button

src/50_Sample_AMPs/News_Article.html

@@ -69,7 +69,7 @@
   .carousel .slide > amp-img > img {
   object-fit: contain;
   }
- .logo {
+ .logo2 {
    background-position: left 16px center;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(

tasks/compile-example.js

@@ -98,7 +98,7 @@ module.exports = function(config, updateTimestamp) {
         timestamp: timestamp,
         fileName: example.url(),
         github: example.githubUrl(),
-        subHeading: example.title(),
+        title: example.title(),
         exampleStyles: document.styles,
         component: document.metadata.component,
         sections: document.sections,
@@ -161,6 +161,7 @@ module.exports = function(config, updateTimestamp) {
         'focusing on code and live samples. Learn how to create AMP pages ' +
         'and see examples for all AMP components.',
       timestamp: timestamp,
+      github: "https://github.com/ampproject/amp-by-example/",
       fileName: '/'
     };
 

templates/css/preview.css

@@ -6,7 +6,7 @@ body {
 article {
   padding: 1px 0;
   padding-bottom: 16px;
-  margin: 54px auto;
+  margin: 0 auto;
   max-width: 800px;
   background: #fff;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
@@ -52,9 +52,11 @@ amp-video, amp-youtube, amp-vimeo, amp-twitter, amp-instagram, daily-motion, amp
   left: 8px;
   color: #666;
 }
+
 @media (max-width: 600px) {
   article {
-      margin-bottom: 0;
+    top: 0;
+    margin-bottom: 0;
   }
 }
 

templates/css/styles.css

@@ -24,9 +24,6 @@ article {
   max-width: 2400px;
   margin: auto;
 }
-article .title {
-  text-align: center;
-}
 .box {
   clear: both;
   min-height: -webkit-min-content;
@@ -52,11 +49,11 @@ article .title {
   cursor: pointer;
 }
 .doc pre > code, .doc pre {
- background-color: white;
+  background-color: white;
 }
 .doc pre {
- padding: 16px;
- margin: 0;
+  padding: 16px;
+  margin: 0;
 }
 
 .doc amp-img {
@@ -86,8 +83,8 @@ article .title {
 }
 .anchor-img {
   background-image: -webkit-image-set(
-    url(/img/ic_link_black_1x_web_18dp.png) 1x,
-    url(/img/ic_link_black_2x_web_18dp.png) 2x
+  url(/img/ic_link_black_1x_web_18dp.png) 1x,
+  url(/img/ic_link_black_2x_web_18dp.png) 2x
   );
   width: 18px;
   height: 18px;
@@ -162,7 +159,6 @@ header h3 {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0;
-  float: right;
 }
 
 .action:hover {
@@ -184,7 +180,6 @@ header h3 {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0;
-  overflow: hidden;
   will-change: box-shadow;
   transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
   outline: none;
@@ -211,19 +206,72 @@ header h3 {
   background-position: right 8px center;
   background-repeat: no-repeat;
   background-image: -webkit-image-set(
-    url(/img/ic_play_circle_filled_black_1x_web_24dp.png) 1x,
-    url(/img/ic_play_circle_filled_black_2x_web_24dp.png) 2x
+  url(/img/ic_play_circle_filled_black_1x_web_24dp.png) 1x,
+  url(/img/ic_play_circle_filled_black_2x_web_24dp.png) 2x
   );
 }
 .exit {
   background-position: right center;
   background-repeat: no-repeat;
   background-image: -webkit-image-set(
-    url(/img/ic_close_black_1x_web_24dp.png) 1x,
-    url(/img/ic_close_black_2x_web_24dp.png) 2x
+  url(/img/ic_close_black_1x_web_24dp.png) 1x,
+  url(/img/ic_close_black_2x_web_24dp.png) 2x
   );
 }
 
+/* nav bar */
+nav {
+  background-color: #4E4E4E;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+nav #logo {
+  align-self: flex-start;
+  margin: 0 auto;
+  text-align: left;
+  font-weight: 200;
+  font-size: 38px;
+  text-transform: uppercase;
+  line-height: 36px;
+  color: white;  
+  padding-left: 44px;
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-image: -webkit-image-set( url(/img/logo-icon_1x.png) 1x, url(/img/logo-icon_2x.png) 2x );
+}
+nav #hamburger {
+  align-self: flex-start;
+  padding-top: 8px;
+  padding-left: 8px;
+}
+nav #actions {
+  max-width: 50%;
+  padding: 0 16px;
+  align-self: flex-start;
+  margin-left: auto;
+}
+nav .button {
+  padding: 0px;
+  height: 40px;
+  min-width: 40px;
+  display: block;
+  float: left;
+}
+nav .button > amp-img {
+  margin: 8px;
+  float: left;
+}
+nav .button > span {
+  display: inline-block;
+  font-weight: 300;
+  line-height: 40px;
+  color: white;  
+  text-transform: uppercase;
+}
+
 /* footer */
 footer {
   margin-top: 48px;
@@ -338,22 +386,35 @@ footer li {
   .toolbar {
     right: 20px;
   }
-  header {
-    padding: 16px;
-    padding-top: 48px;
+  article {
+    position: relative;
+    top: 56px;
   }
-  header h1 {
-    margin: 0;
+  nav {
+    height: 56px;
+    flex-direction: row;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
   }
-  header h1 a {
-    font-size: 36px;
-    font-weight: 300;
-    padding-bottom: 16px;
+  nav #actions {
+    padding: 8px 16px;
   }
-  article .title {
-    font-size: 24px;
-    font-weight: 300;
-    margin: 0 16px;
+  nav .button > span {
+    display: none;
+  }
+  nav .hide-on-mobile {
+    display: none;
+  }
+  nav #logo {
+    width: auto;
+    margin: 0;
+    padding: 0;
+    font-weight: 400;
+    font-size: 16px;
+    background-image: none;
+    align-self: center;
   }
   .card {
     margin: 16px;

templates/example.html

@@ -8,29 +8,27 @@
       {{> css/material.css}}
       {{> css/styles.css}}
       {{{exampleStyles}}}
-    </style>
+   </style>
   </head>
   <body>
-    {{> header.html}}
     {{#metadata.preview}}
     <a href="preview/" class="fab show-on-mobile">
       <amp-img src="/img/ic_play_arrow_white_2x_web_24dp.png" width="24" height="24"></amp-img>
     </a>
     {{/metadata.preview}}
+    {{> header.html}}
     <article>
-      <h3 class="title">
-        {{subHeading}}
-      </h3>
+      <h3>{{title}}</h3>
       {{#metadata.experiment}}
-        <div class="box">
-          <div class="column doc">
-            {{> experiment.html}}
-          </div>
-          <div class="column code hide-on-mobile">
-          </div>
-          <div class="column preview hide-on-mobile">
-          </div>
+      <div class="box">
+        <div class="column doc">
+          {{> experiment.html}}
+        </div>
+        <div class="column code hide-on-mobile">
         </div>
+        <div class="column preview hide-on-mobile">
+        </div>
+      </div>
       {{/metadata.experiment}}
       {{#sections}}
       <div class="box ">
@@ -55,11 +53,6 @@ <h3 class="title">
           <pre class="hljs"><code class="html">{{{escapedCode}}}</code></pre>
         </div>
         <div class="column preview {{#hidePreviewOnMobile}}hide-on-mobile{{/hidePreviewOnMobile}} {{#metadata.hidePreview}}hide{{/metadata.hidePreview}}">
-          {{#isFirstSection}}
-          {{#metadata.preview}}
-            <a class="show-preview action hide-on-mobile" href="preview/">Show Preview</a>
-          {{/metadata.preview}}
-          {{/isFirstSection}}
           {{{preview}}}
         </div>
       </div>

templates/header.html

@@ -1,12 +1,20 @@
-<header>
-  <div class="toolbar">
-  {{#github}}
-    <a href="{{this}}" class="gist action">
-      View on Github 
+<nav>
+  <a id="hamburger" href="#" class="button">
+    <amp-img src="/img/ic_menu_white_2x_web_24dp.png" width="24" height="24"></amp-img>
+  </a>
+  <a id="logo" href="/">AMP by Example</a>
+  <div id="actions">
+    {{#github}}
+    <a href="{{this}}" class="button">
+      <amp-img src="/img/ic_code_white_2x_web_24dp.png" width="24" height="24"></amp-img>
+      <span class="hide-on-mobile">View on Github</span>
     </a>
-  {{/github}}
+    {{/github}}
+    {{#metadata.preview}}
+    <a href="preview/" class="button hide-on-mobile"> 
+      <amp-img src="/img/ic_play_arrow_white_2x_web_24dp.png" width="24" height="24"></amp-img>
+      <span>Show Preview</span>
+    </a>
+    {{/metadata.preview}}
   </div>
-  <h1>
-    <a href="/">AMP by Example</a>
-  </h1>
-</header>
+</nav>

templates/index.html

@@ -7,6 +7,7 @@
       {{> css/styles.css}}
       {{{styles}}}
       main {
+        padding-top: 16px;
         margin: 0 auto;
         max-width: 500px;
       }
@@ -32,6 +33,12 @@
           margin: 0 16px;
         }
       }
+      @media (max-width: 1024px) {
+        main {
+          position: relative;
+          top: 56px;
+        }
+      }
     </style>
     {{> head.html}}
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">