[CSS] fixes for markdown header nav and logo layout

Also adds vendor prefixes for better support of flexbox.

Change-Id: Ib4b5bd393094e97a5cf118afce24b6f3566666b0

gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css

diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
index 3d21c70..b8cba07 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
@@ -79,17 +79,28 @@
 .Site {
   background: #fff;
   color: #000;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   font: 14px/1.54 'Open Sans', sans-serif;
   min-height: 100vh;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 .Site-header,
 .Site-footer {
   background: #eee;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
+.Site-header--withNavbar {
+  background: #fff;
+}
 .Site-content {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   padding: 20px;
 }
@@ -102,15 +113,51 @@
 }
 .Header,
 .Footer {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   padding: 20px;
 }
+.Site-header--withNavbar .Header {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 10px 0;
+}
+.Header-title,
+.Header-image {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.Header-anchor {
+  color: #666;
+  font-size: 32px;
+  font-weight: 300;
+  text-decoration: none;
+}
+.Header-anchorLogo {
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.Header-nav {
+  background: #eee;
+  padding: 15px 0;
+}
 .Header-title {
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 .Header-menu {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
   justify-content: flex-end;
 }
 .Header-menuItem {
@@ -136,11 +183,17 @@
   color: #666;
 }
 .Footer-poweredBy {
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 .Footer-formats,
 .Footer-links {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
   justify-content: flex-end;
 }
 .Footer-formatsItem {
@@ -155,6 +208,8 @@
   margin-left: 10px;
 }
 .RepoList-item {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   left: -10px;
   padding: 5px 0 5px 10px;
@@ -220,9 +275,13 @@
   width: 100%;
 }
 .RepoShortlog {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 .RepoShortlog-refs {
+  -webkit-flex: none !important;
+  -ms-flex: none !important;
   flex: none !important;
   width: 20%;
 }
@@ -230,6 +289,8 @@
   margin: 0;
 }
 .RepoShortlog-log {
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 .RepoIndexDoc {
@@ -408,6 +469,8 @@
   margin: 10px 0;
 }
 .Blame-region {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 .Blame-leftCol {
@@ -415,6 +478,8 @@
   width: 375px;
 }
 .Blame-rightCol {
+  -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   font-size: 8pt;
 }

gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css

diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
index 8d38cb3..983ea30 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
@@ -19,6 +19,14 @@
 .Site-Content--markdown {
   padding-top: 0;
 }
+.Header-nav ul {
+  max-width: 980px;
+  margin: 0 auto;
+}
+.Header-nav li {
+  display: inline-block;
+  margin-right: 15px;
+}
 .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
   font-weight: normal;
   margin: 1.236em 0 .618em;

gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy

diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
index d4da587..b62e2ee 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
@@ -41,20 +41,18 @@
   <link rel="stylesheet" type="text/css" href="{gitiles.PRETTIFY_CSS_URL}" />
 </head>
 <body class="Site">
-  <header class="Site-header">
+  <header class="Site-header {if $navbarHtml}Site-header--withNavbar{/if}">
     <div class="Header">
       <div class="Header-title">
-        {if $homeUrl}<a href="{$homeUrl}">{/if}
-        {if $logoUrl}<img src="{$logoUrl}" alt="project logo" />{/if}
-        {if $siteTitle}{$siteTitle}{/if}
+        {if $homeUrl}<a class="Header-anchor" href="{$homeUrl}">{/if}
+        {if $logoUrl}<img class="Header-anchorLogo" src="{$logoUrl}" alt="project logo" />{/if}
+        {if $siteTitle}<span class="Header-anchorTitle">{$siteTitle}</span>{/if}
         {if $homeUrl}</a>{/if}
       </div>
     </div>
     {if $navbarHtml}
-      <div class="nav" role="navigation">
-        <div class="nav-aux">
-          {$navbarHtml}
-        </div>
+      <nav class="Header-nav" role="navigation">
+        {$navbarHtml}
       </div>
     {/if}
   </header>