Update logo. Update Header and Footer to use new style from bazel-website.

Refactor CSS structure to only contain shared and docs CSS

RELNOTES: None
PiperOrigin-RevId: 159837919

20 files changed, 432 insertions, 475 deletions

diff --git a/site/_includes/footer-content.html b/site/_includes/footer-content.html
new file mode 100644
index 0000000000..1801c37616
--- /dev/null
+++ b/site/_includes/footer-content.html
@@ -0,0 +1,37 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-4">
+      <p>About</p>
+      <ul class="list-unstyled">
+        <li><a href="https://github.com/bazelbuild/bazel/wiki/Bazel-Users">Who's using Bazel</a></li>
+        <li><a href="{{ site.main_site_url }}/roadmap.html">Roadmap</a></li>
+        <li><a href="{{ site.main_site_url }}/contributing.html">Contribute</a></li>
+        <li><a href="{{ site.main_site_url }}/governance.html">Governance Plan</a></li>
+      </ul>
+    </div>
+    <div class="col-md-4">
+      <p>Support</p>
+      <ul class="list-unstyled">
+        <li><a href="http://stackoverflow.com/questions/tagged/bazel">Stack Overflow</a></li>
+        <li><a href="https://github.com/bazelbuild/bazel/issues">Issue Tracker</a></li>
+        <li><a href="https://docs.bazel.build">Documentation</a></li>
+        <li><a href="{{ site.main_site_url }}/faq.html">FAQ</a></li>
+        <li><a href="{{ site.main_site_url }}/support.html">Support Policy</a></li>
+      </ul>
+    </div>
+    <div class="col-md-4">
+      <p>Stay Connected</p>
+      <ul class="list-unstyled">
+        <li><a href="https://twitter.com/bazelbuild">Twitter</a></li>
+        <li><a href="https://blog.bazel.build">Blog</a></li>
+        <li><a href="https://github.com/bazelbuild/bazel">GitHub</a></li>
+        <li><a href="https://groups.google.com/forum/#!forum/bazel-discuss">Discussion group</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-12">
+      <p class="text-muted">&copy; {{ 'now' | date: "%Y" }} Google</p>
+    </div>
+  </div>
+</div>
diff --git a/site/_includes/footer.html b/site/_includes/footer.html
index e3c36cf821..915f99aa5d 100644
--- a/site/_includes/footer.html
+++ b/site/_includes/footer.html
@@ -1,11 +1,5 @@
     <footer class="footer">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-12">
-            <p class="text-muted">&copy; {{ 'now' | date: "%Y" }} Google</p>
-          </div>
-        </div>
-      </div>
+      {% include footer-content.html %}
     </footer>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
diff --git a/site/_includes/head.html b/site/_includes/head.html
index 5dfdb9f5ab..3eda1bd0f9 100644
--- a/site/_includes/head.html
+++ b/site/_includes/head.html
@@ -40,7 +40,8 @@
     <!-- Webfont -->
     <link href="//fonts.googleapis.com/css?family=RobotoDraft:300,400,500|Source+Code+Pro:400,500,700" rel="stylesheet">
 
-    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico">
+    <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16" />
 
     <!-- Bootstrap -->
     <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
diff --git a/site/_includes/header.html b/site/_includes/header.html
index 55cd13d087..88622107ad 100644
--- a/site/_includes/header.html
+++ b/site/_includes/header.html
@@ -8,8 +8,8 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="{{ site.main_site_url }}">
-            <img src="/images/bazel-navbar.png" height="30px">
+          <a class="navbar-brand" href="{{ site.main_site_url }}/">
+            <img class="navbar-logo" src="/images/bazel-navbar.svg">
           </a>
         </div>
 
@@ -28,21 +28,17 @@
           </form>
           <ul class="nav navbar-nav navbar-right">
             <li{% if page.nav == "docs" %} class="active"{% endif %}>
-              <a href="/">Docs</a>
+              <a href="{{ site.docs_site_url }}">Documentation</a>
             </li>
             <li{% if page.nav == "contribute" %} class="active"{% endif %}>
-              <a href="{{ site.main_site_url }}/contributing.html">Contribute!</a>
+              <a href="{{ site.main_site_url }}/contributing.html">Contribute</a>
             </li>
-            <li{% if page.nav == "faq" %} class="active"{% endif %}>
-              <a href="{{ site.main_site_url }}/faq.html">FAQ</a></li>
             <li{% if page.nav == "blog" %} class="active"{% endif %}>
               <a href="{{ site.blog_site_url }}">Blog</a>
             </li>
-            <li><a href="http://stackoverflow.com/questions/tagged/bazel" class="nav-icon"><i class="fa fa-stack-overflow"></i></a></li>
-            <li><a href="https://groups.google.com/forum/#!forum/bazel-discuss" class="nav-icon"><i class="fa fa-envelope"></i></a></li>
             <li><a href="https://twitter.com/bazelbuild" class="nav-icon"><i class="fa fa-twitter"></i></a></li>
+            <li><a href="http://stackoverflow.com/questions/tagged/bazel" class="nav-icon"><i class="fa fa-stack-overflow"></i></a></li>
           </ul>
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>
-
diff --git a/site/_sass/be.scss b/site/_sass/be.scss
new file mode 100644
index 0000000000..0e7e8999f9
--- /dev/null
+++ b/site/_sass/be.scss
@@ -0,0 +1,93 @@
+// Build Encyclopedia and Skylark Library
+
+pre.rule-signature {
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: normal;
+}
+
+colgroup {
+  .col-param {
+    width: 25%;
+  }
+
+  .col-description {
+    width: 75%;
+  }
+}
+
+$table-params-border-color: #81c784;
+$table-params-head-color: #fff;
+$table-params-body-bg-color: #e8f5e9;
+
+.table-params {
+  border: 1px solid $table-params-border-color;
+
+  thead > tr > th {
+    color: $table-params-head-color;
+    border: 1px solid $table-params-border-color;
+    background-color: $table-params-border-color;
+  }
+
+  tbody > tr > td {
+    background-color: $table-params-body-bg-color;
+    border: 1px solid $table-params-border-color;
+  }
+}
+
+$table-implicit-border-color: #c0c0c0;
+$table-implicit-head-color: #fff;
+$table-implicit-body-bg-color: #f0f0f0;
+
+.table-implicit {
+  border: 1px solid $table-implicit-border-color;
+
+  thead > tr > th {
+    color: $table-implicit-head-color;
+    border: 1px solid $table-implicit-border-color;
+    background-color: $table-implicit-border-color;
+  }
+
+  tbody > tr > td {
+    background-color: $table-implicit-body-bg-color;
+    border: 1px solid $table-implicit-border-color;
+  }
+}
+
+
+$toc-border-color: #c8e6c9;
+$toc-color: #757575;
+
+.toc {
+  border-left: 4px solid $toc-border-color;
+  padding-left: 18px;
+  margin-bottom: 20px;
+
+  h1,
+  h2 {
+    font-size: 24px;
+    color: $toc-color;
+    margin-bottom: 12px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+
+    li {
+      line-height: 36px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+}
+
+// Command-line Reference
+dt {
+  margin-top: .5em;
+}
+
+dd {
+  margin-left: 2em;
+}
diff --git a/site/_sass/footer.scss b/site/_sass/footer.scss
new file mode 100644
index 0000000000..16d3ff2bd8
--- /dev/null
+++ b/site/_sass/footer.scss
@@ -0,0 +1,26 @@
+// Footer styles
+
+$footer-backgroud: #424242;
+$footer-color: #fff;
+$footer-link-color: #e0e0e0;
+
+.footer {
+  margin-top: 40px;
+  background-color: $footer-backgroud;
+  color: $footer-color;
+  padding: 20px;
+
+  .text-muted {
+    color: $footer-link-color;
+  }
+
+  a {
+    color: $footer-link-color;
+
+    &:hover,
+    &:focus {
+      color: $footer-color;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/site/_sass/navbar.scss b/site/_sass/navbar.scss
new file mode 100644
index 0000000000..42be12e0e1
--- /dev/null
+++ b/site/_sass/navbar.scss
@@ -0,0 +1,96 @@
+// Navbar styles
+$navbar-bg-color: $bazel-green;
+$navbar-hover-bg-color: $bazel-green-light;
+$navbar-color: $color-on-bazel-green;
+$navbar-hover-color: #444;
+$navbar-input-bg-color: $bazel-green-light;
+$navbar-input-focus-bg-color: $color-on-bazel-green;
+$navbar-input-border-color: $bazel-green;
+
+.navbar-inverse {
+  margin-bottom: 0;
+  background-color: $navbar-bg-color;
+  border-bottom: 1px solid $navbar-bg-color;
+
+  .navbar-brand {
+    .navbar-logo {
+      height: 22px;
+    }
+  }
+
+  a.navbar-brand {
+    color: $navbar-color;
+
+    &:focus,
+    &:hover {
+      color: $navbar-hover-color;
+      background-color: $navbar-bg-color;
+    }
+  }
+
+  .navbar-nav > li > a {
+    color: $navbar-color;
+
+    &:focus,
+    &:hover {
+      color: $navbar-hover-color;
+      background-color: $navbar-hover-bg-color;
+    }
+
+    &.nav-icon {
+      font-size: 18px;
+    }
+  }
+
+  .navbar-nav > li.active > a {
+    background-color: $navbar-hover-bg-color;
+
+    &:focus,
+    &:hover {
+      background-color: $navbar-hover-bg-color;
+    }
+  }
+
+  .navbar-form {
+    border-color: $navbar-bg-color;
+
+    .input-sm {
+      margin-top: 2px;
+    }
+
+    input[type="search"] {
+      background-color: $navbar-input-bg-color;
+      border-color: $navbar-input-border-color;
+
+      &::placeholder {
+        color: $navbar-color;
+      }
+
+      &:focus,
+      &:active {
+        background-color: $navbar-input-focus-bg-color;
+      }
+    }
+  }
+
+  .navbar-toggle {
+    border: 1px solid $navbar-bg-color;
+
+    &.active,
+    &:focus,
+    &:hover {
+      background-color: $navbar-hover-bg-color;
+    }
+  }
+
+  .navbar-collapse {
+    border-color: $navbar-bg-color;
+  }
+}
+
+@media (max-width: 768px) {
+  #cse-search-box {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
diff --git a/site/_sass/sidebar.scss b/site/_sass/sidebar.scss
new file mode 100644
index 0000000000..19879374bd
--- /dev/null
+++ b/site/_sass/sidebar.scss
@@ -0,0 +1,65 @@
+$sidebar-border-color: #fff;
+$sidebar-hover-border-color: #66bb6a;
+
+.sidebar {
+  margin-top: 40px;
+
+  ul.sidebar-nav {
+    list-style-type: none;
+    padding: 0;
+
+    li {
+      &.sidebar-nav-heading {
+        padding: 10px 0;
+        margin: 0;
+        display: block;
+        font-size: 16px;
+        font-weight: 300;
+      }
+
+      a {
+        padding: 4px 0;
+        display: block;
+        border-right: 2px solid $sidebar-border-color;;
+
+        &:focus {
+          text-decoration: none;
+        }
+
+        &:active,
+        &:hover {
+          border-right: 2px solid $sidebar-hover-border-color;
+          text-decoration: none;
+        }
+
+        .caret {
+          float: right;
+          margin-top: 8px;
+          margin-right: 10px;
+        }
+      }
+
+      &.active {
+        a {
+          border-right: 2px solid $sidebar-hover-border-color;
+        }
+      }
+    }
+
+    ul.sidebar-nav {
+      padding-left: 10px;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .sidebar {
+    &.collapse {
+      display: block;
+    }
+  }
+}
diff --git a/site/_sass/style.scss b/site/_sass/style.scss
index a5a90f995f..0f4db2ca41 100644
--- a/site/_sass/style.scss
+++ b/site/_sass/style.scss
@@ -1,16 +1,21 @@
+// Bazel logo colors
+$bazel-green: #43a047;
+$bazel-green-light: #76d275;
+$bazel-green-dark-left: #00701a;
+$bazel-green-dark-right: #004300;
+$color-on-bazel-green: #fff;
+
 $body-font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial,
                    sans-serif;
 $code-font-family: 'Source Code Pro', monospace;
 
-$link-color: #4caf50;
+$link-color: $bazel-green;
 $link-hover-color: darken($link-color, 10%);
 $well-color: #f9f9f9;
 $text-color: #444;
 
 $vpad: 20px;
 
-$footer-height: 60px;
-$footer-margin: 40px;
 
 html {
   position: relative;
@@ -21,47 +26,6 @@ body {
   padding-top: 50px;
   color: $text-color;
   font-family: $body-font-family;
-  margin-bottom: $footer-height + $footer-margin;
-}
-
-// Footer styles
-$footer-bg-color: #424242;
-$footer-color: #fff;
-$footer-muted-color: #e0e0e0;
-$footer-link-color: #e0e0e0;
-$footer-link-hover-color: #fff;
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: $footer-height;
-  margin-top: $footer-margin;
-  background-color: $footer-bg-color;
-  color: $footer-color;
-  padding: 20px;
-
-  .text-muted {
-    color: $footer-muted-color;
-  }
-
-  a {
-    color: $footer-link-color;
-
-    &:hover,
-    &:focus {
-      color: $footer-link-hover-color;
-      text-decoration: none;
-    }
-  }
-}
-
-.body-home {
-  margin-bottom: $footer-height;
-
-  .footer {
-    margin-top: 0;
-  }
 }
 
 a {
@@ -149,6 +113,23 @@ code {
   background-color: $well-color;
 }
 
+
+// Immitate material design buttons
+.btn-lg {
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+$md-shadow-1: rgba(0, 0, 0, .14);
+$md-shadow-2: rgba(0, 0, 0, .2);
+$md-shadow-3: rgba(0, 0, 0, .12);
+
+.btn-success {
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 $md-shadow-1, 0 3px 1px -2px $md-shadow-2, 0 1px 5px 0 $md-shadow-3;
+  border: 0;
+}
+
 .well {
   background-color: $well-color;
   border-color: $well-color;
@@ -160,43 +141,8 @@ code {
   padding-top: $vpad;
 }
 
-// Main page hero styles.
-$hero-bg-color: #fafafa;
-
-.hero {
-  background-color: $hero-bg-color;
-  color: $text-color;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  text-align: center;
-
-  h1 {
-    margin-top: 0;
-    font-size: 72px;
-    color: $text-color;
-  }
-
-  .logo {
-    width: 270px;
-    padding-bottom: 20px;
-  }
-}
-
-$hero-bar-bg-color: #eee;
-
-.hero-bar {
-  text-align: center;
-  background-color: $hero-bar-bg-color;
-  padding-bottom: 10px;
-  padding-top: 10px;
-  font-weight: bold;
-}
-
-$page-title-bar-bg-color: #e8f5e9;
-$page-title-bar-color: #4caf50;
-
 .page-title-bar {
-  background-color: $page-title-bar-bg-color;
+  background-color: $bazel-green-light;
   padding-top: 20px;
   padding-bottom: 20px;
 
@@ -206,340 +152,8 @@ $page-title-bar-color: #4caf50;
   h4,
   h5,
   h6 {
-    margin: 8px 0 4px 0;
-    color: $page-title-bar-color;
-  }
-}
-
-.page-spacer {
-  height: 100px;
-}
-
-// Sidebar styles
-$navbar-bg-color: #4caf50;
-$navbar-hover-bg-color: #66bb6a;
-$navbar-color: #fff;
-$navbar-hover-color: #444;
-$navbar-input-bg-color: #c8e6c9;
-$navbar-input-focus-bg-color: #fff;
-$navbar-input-border-color: #4caf50;
-
-.navbar-inverse {
-  margin-bottom: 0;
-  background-color: $navbar-bg-color;
-  border-bottom: 1px solid $navbar-bg-color;
-
-  .navbar-brand {
-    padding-top: 10px;
-  }
-
-  a.navbar-brand {
-    color: $navbar-color;
-
-    &:focus,
-    &:hover {
-      color: $navbar-color;
-      background-color: $navbar-bg-color;
-    }
-  }
-
-  .navbar-nav > li > a {
-    color: $navbar-color;
-
-    &:focus,
-    &:hover {
-      color: $navbar-color;
-      background-color: $navbar-hover-bg-color;
-    }
-
-    &.nav-icon {
-      font-size: 18px;
-    }
-  }
-
-  .navbar-nav > li.active > a {
-    background-color: $navbar-hover-bg-color;
-
-    &:focus,
-    &:hover {
-      background-color: $navbar-hover-bg-color;
-    }
-  }
-
-  .navbar-form {
-    border-color: $navbar-bg-color;
-
-    .input-sm {
-      margin-top: 2px;
-    }
-
-    input[type="search"] {
-      background-color: $navbar-input-bg-color;
-      border-color: $navbar-input-border-color;
-
-      &:focus,
-      &:active {
-        background-color: $navbar-input-focus-bg-color;
-      }
-    }
-  }
-
-  .navbar-toggle {
-    border: 1px solid $navbar-bg-color;
-
-    &.active,
-    &:focus,
-    &:hover {
-      background-color: $navbar-hover-bg-color;
-    }
-  }
-
-  .navbar-collapse {
-    border-color: $navbar-bg-color;
-  }
-}
-
-@media (max-width: 768px) {
-  #cse-search-box {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-// Landing page features styles.
-$landing-feature-1-bg-color: #fff;
-$landing-feature-2-bg-color: #fafafa;
-
-.landing-feature-1 {
-  background-color: $landing-feature-1-bg-color;
-  padding-top: 20px;
-  padding-bottom: 30px;
-  text-align: center;
-}
-
-.landing-feature-2 {
-  background-color: $landing-feature-2-bg-color;
-  padding-top: 20px;
-  padding-bottom: 30px;
-  text-align: center;
-}
-
-.landing-feature-1,
-.landing-feature-2 {
-  font-size: 16px;
-  line-height: 28px;
-}
-
-// Landing page
-.landing-context {
-  .lang-list {
-    font-size: 18px;
-  }
-}
-
-// Docs layout specific
-$sidebar-border-color: #fff;
-$sidebar-hover-border-color: #66bb6a;
-
-.sidebar {
-  margin-top: 40px;
-
-  ul.sidebar-nav {
-    list-style-type: none;
-    padding: 0;
-
-    li {
-      &.sidebar-nav-heading {
-        padding: 10px 0;
-        margin: 0;
-        display: block;
-        font-size: 16px;
-        font-weight: 300;
-      }
-
-      a {
-        padding: 4px 0;
-        display: block;
-        border-right: 2px solid $sidebar-border-color;;
-
-        &:focus {
-          text-decoration: none;
-        }
-
-        &:active,
-        &:hover {
-          border-right: 2px solid $sidebar-hover-border-color;
-          text-decoration: none;
-        }
-
-        .caret {
-          float: right;
-          margin-top: 8px;
-          margin-right: 10px;
-        }
-      }
-
-      &.active {
-        a {
-          border-right: 2px solid $sidebar-hover-border-color;
-        }
-      }
-    }
-
-    ul.sidebar-nav {
-      padding-left: 10px;
-    }
-  }
-}
-
-@media (min-width: 992px) {
-  .sidebar-toggle {
-    display: none;
-  }
-
-  .sidebar {
-    &.collapse {
-      display: block;
-    }
-  }
-}
-
-// FAQ page
-.faq-context {
-  h4 {
-    margin-top: 30px;
-  }
-}
-
-// Build Encyclopedia and Skylark Library
-
-pre.rule-signature {
-  white-space: normal;
-  word-wrap: break-word;
-  word-break: normal;
-}
-
-colgroup {
-  .col-param {
-    width: 25%;
-  }
-
-  .col-description {
-    width: 75%;
-  }
-}
-
-$table-params-border-color: #81c784;
-$table-params-head-color: #fff;
-$table-params-body-bg-color: #e8f5e9;
-
-.table-params {
-  border: 1px solid $table-params-border-color;
-
-  thead > tr > th {
-    color: $table-params-head-color;
-    border: 1px solid $table-params-border-color;
-    background-color: $table-params-border-color;
-  }
-
-  tbody > tr > td {
-    background-color: $table-params-body-bg-color;
-    border: 1px solid $table-params-border-color;
-  }
-}
-
-$table-implicit-border-color: #c0c0c0;
-$table-implicit-head-color: #fff;
-$table-implicit-body-bg-color: #f0f0f0;
-
-.table-implicit {
-  border: 1px solid $table-implicit-border-color;
-
-  thead > tr > th {
-    color: $table-implicit-head-color;
-    border: 1px solid $table-implicit-border-color;
-    background-color: $table-implicit-border-color;
-  }
-
-  tbody > tr > td {
-    background-color: $table-implicit-body-bg-color;
-    border: 1px solid $table-implicit-border-color;
-  }
-}
-
-$toc-border-color: #c8e6c9;
-$toc-color: #757575;
-
-.toc {
-  border-left: 4px solid $toc-border-color;
-  padding-left: 18px;
-  margin-bottom: 20px;
-
-  h1,
-  h2 {
-    font-size: 24px;
-    color: $toc-color;
-    margin-bottom: 12px;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin-top: 0;
-
-    li {
-      line-height: 36px;
-      font-size: 16px;
-      font-weight: 400;
-    }
-  }
-}
-
-// Command-line Reference
-dt {
-  margin-top: .5em;
-}
-
-dd {
-  margin-left: 2em;
-}
-
-// Roadmap page styles
-.roadmap-col-phase {
-  width: 10%;
-}
-
-.roadmap-col-milestone {
-  width: 5%;
-}
-
-.roadmap-col-date {
-  width: 10%;
-}
-
-.roadmap-col-features {
-  width: 75%;
-}
-
-// Support page styles
-.support-col-rules {
-  width: 30%;
-}
-
-.support-col-notes {
-  width: 70%;
-}
-
-// Blog styles
-.blog-post {
-  margin-bottom: 60px;
-
-  .blog-post-title {
-    margin-bottom: 5px;
-  }
-
-  .blog-post-meta {
-    margin-bottom: 20px;
+    margin: 8px 0 4px;
+    color: $color-on-bazel-green;
   }
 }
 
@@ -552,11 +166,3 @@ dd {
     box-sizing: content-box !important;
   }
 }
-
-.gh-edit {
-  float: right;
-}
-
-.gh-edit.default-hidden {
-  visibility: hidden;
-}
diff --git a/site/css/main.scss b/site/css/main.scss
index 038c9e9122..0ee13b8fe5 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -2,4 +2,9 @@
 ---
 
 @import "style.scss";
+@import "footer.scss";
+@import "navbar.scss";
+@import "sidebar.scss";
+@import "be.scss";
+
 @import "syntax.scss";
diff --git a/site/images/bazel-icon.png b/site/images/bazel-icon.png
new file mode 100644
index 0000000000..ac74e82c44
--- /dev/null
+++ b/site/images/bazel-icon.png
diff --git a/site/images/bazel-icon.svg b/site/images/bazel-icon.svg
new file mode 100755
index 0000000000..07120a9b14
--- /dev/null
+++ b/site/images/bazel-icon.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#43A047;}
+	.st1{fill:#00701A;}
+	.st2{fill:#004300;}
+	.st3{fill:#76D275;}
+	.st4{fill:none;}
+</style>
+<g>
+	<polygon class="st0" points="21.3,139.8 21.3,254.9 138.7,372.2 138.7,257.1 	"/>
+	<polygon class="st1" points="256,374.4 256,489.6 138.7,372.2 138.7,257.1 	"/>
+	<polygon class="st0" points="490.7,139.8 490.7,254.9 373.3,372.2 373.3,257.1 	"/>
+	<polygon class="st2" points="256,374.4 373.3,257.1 373.3,372.2 256,489.6 	"/>
+
+		<rect x="55.7" y="56.8" transform="matrix(0.7071 0.7071 -0.7071 0.7071 139.436 -57.119)" class="st3" width="165.9" height="165.9"/>
+
+		<rect x="173" y="174.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 256.7693 -105.72)" class="st0" width="165.9" height="165.9"/>
+
+		<rect x="290.4" y="56.8" transform="matrix(0.7071 0.7071 -0.7071 0.7071 208.1683 -223.0533)" class="st3" width="165.9" height="165.9"/>
+</g>
+<rect x="0" y="0" class="st4" width="512" height="512"/>
+</svg>
diff --git a/site/images/bazel-logo.png b/site/images/bazel-logo.png
index 87e2c9ec24..e43cfd0cea 100644
--- a/site/images/bazel-logo.png
+++ b/site/images/bazel-logo.png
diff --git a/site/images/bazel-logo.svg b/site/images/bazel-logo.svg
index a168b06f50..3e6799a049 100644
--- a/site/images/bazel-logo.svg
+++ b/site/images/bazel-logo.svg
@@ -1,37 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250">
-  <defs>
-    <clipPath id="d">
-      <path d="m 147.985,279.49 c 3.393,-2.371 7.203,-3.992 10.951,-5.478 l 0,0 c 3.738,-1.518 7.478,-2.913 11.08,-4.575 l 0,0 c 3.59,-1.67 7.102,-3.484 10.399,-5.635 l 0,0 c 0.829,-0.532 1.653,-1.087 2.454,-1.637 l 0,0 c 0.809,-0.561 1.638,-1.149 2.382,-1.725 l 0,0 c 1.53,-1.177 2.959,-2.474 4.281,-3.881 l 0,0 c 2.664,-2.808 4.871,-6.047 6.654,-9.52 l 0,0 c 3.526,-6.993 5.465,-14.865 5.963,-22.899 l 0,0 c 0.504,4.022 0.294,8.111 -0.285,12.152 l 0,0 c -0.623,4.045 -1.736,8.035 -3.409,11.824 l 0,0 c -1.67,3.79 -3.929,7.348 -6.719,10.468 l 0,0 c -2.822,3.126 -6.205,5.652 -9.662,7.826 l 0,0 c -6.926,4.452 -14.704,7.368 -22.336,9.81 l 0,0 c -3.786,1.296 -7.563,2.539 -10.966,4.507 l 0,0 c -3.442,1.911 -6.378,4.686 -8.661,8.013 l 0,0 c 1.715,-3.658 4.477,-6.882 7.874,-9.25"/>
-    </clipPath>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(37.26 -181.5 -181.5 -37.26 203.71 274.94)" spreadMethod="pad">
-      <stop offset="0" stop-color="#90c84b"/>
-      <stop offset="1" stop-color="#256f46"/>
-    </radialGradient>
-    <clipPath id="f">
-      <path d="m 134.29,241.719 c 2.117,-19.034 16.329,-28.986 29.573,-31.684 l 0,0 c 13.239,-2.707 22.289,-2.172 22.289,-2.172 l 0,0 c -34.368,4.912 -40.138,15.059 -44.33,22.933 l 0,0 c -5.514,10.39 -7.491,62.632 -7.491,62.632 l 0,0 c 0,0 -2.157,-32.68 -0.041,-51.709"/>
-    </clipPath>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(37.26 -181.5 -181.5 -37.26 203.71 274.94)" spreadMethod="pad">
-      <stop offset="0" stop-color="#90c84b"/>
-      <stop offset="1" stop-color="#256f46"/>
-    </radialGradient>
-    <clipPath id="h">
-      <path d="m 188.8,214.415 c 5.376,-21.65 -2.645,-63.904 -2.645,-63.904 l 0,0 c -2.911,-21.256 11.489,-40.394 32.742,-43.302 l 0,0 c 21.408,-2.925 40.572,11.619 43.456,32.727 l 0,0 c 2.95,21.555 -12.532,40.687 -33.029,43.488 l 0,0 c -10.638,1.458 -20.71,-1.467 -28.426,-7.324 l 0,0 c -0.324,-0.245 -0.667,-0.461 -0.98,-0.717 l 0,0 c 0.196,4.505 0.292,8.674 0.283,12.558 l 0,0 c 12.11,33.218 33.039,34.151 33.039,34.151 l 0,0 c -13.867,-3.563 -25.174,-24.17 -25.174,-24.17 l 0,0 c 0,0 11.655,-5.318 22.068,3.098 l 0,0 c 11.287,9.127 12.62,29.135 12.62,29.135 l 0,0 c 0,0 -24.356,0.221 -32.369,-7.023 l 0,0 c -8.016,-7.242 -5.613,-18 -5.613,-18 l 0,0 -4.896,-7.01 c -0.737,10.952 -2.762,19.196 -6.535,26.03 l 0,0 c -11.423,20.704 -27.091,32.117 -49.985,40.865 l 0,0 c 4.472,-1.809 36.797,-15.865 45.444,-50.602 m -17.992,33.948 c -0.569,0.564 -1.142,1.115 -1.714,1.65 l 0,0 c 3.752,-2.728 7.134,-5.692 10.235,-8.932 l 0,0 c -2.628,2.599 -5.446,5.026 -8.521,7.282 m 23.799,-125.52 c -5.891,7.805 -8.39,17.561 -7.033,27.473 l 0,0 c 0.319,1.665 8.007,42.738 2.617,64.445 l 0,0 c -3.491,14.024 -10.686,24.706 -18.435,32.64 l 0,0 c 8.285,-8.064 16.162,-19.187 19.868,-34.073 l 0,0 c 5.39,-21.707 -2.298,-62.78 -2.617,-64.445 l 0,0 c -1.357,-9.911 1.142,-19.667 7.033,-27.473 l 0,0 c 0.812,-1.073 1.68,-2.09 2.59,-3.055 l 0,0 c -1.448,1.375 -2.798,2.868 -4.023,4.488 m 5.332,72.866 6.37,9.119 -0.137,0.616 c -0.023,0.096 -2.103,10.052 5.175,16.625 l 0,0 c 5.524,4.995 20.734,6.508 29.818,6.643 l 0,0 c -0.05,-0.413 -0.12,-0.922 -0.201,-1.472 l 0,0 c -9.177,-0.284 -22.979,-1.897 -28.185,-6.605 l 0,0 c -5.593,-5.052 -5.657,-12.083 -5.379,-15.12 l 0,0 c -2.247,-3.3 -4.427,-7.206 -6.44,-11.83 l 0,0 -0.809,-1.156 -0.212,3.18 z m 10.233,2.973 c 2.836,4.672 12.411,19.193 23.426,22.021 l 0,0 c -6.888,-3.146 -11.297,-6.596 -21.423,-22.533 l 0,0 c -0.782,0.162 -1.46,0.345 -2.003,0.512 m -10.275,-25.166 0.927,0.757 c 0.154,0.126 0.319,0.24 0.482,0.354 l 0,0 c 0.154,0.109 0.309,0.219 0.46,0.333 l 0,0 c 6.379,4.842 14.041,7.403 22.155,7.403 l 0,0 c 1.725,0 3.477,-0.121 5.208,-0.358 l 0,0 c 8.42,-1.151 16.078,-5.125 21.914,-11.305 l 0,0 c -5.632,5.361 -12.733,8.813 -20.48,9.872 l 0,0 c -1.732,0.238 -3.484,0.358 -5.209,0.358 l 0,0 c -8.114,0 -15.777,-2.561 -22.155,-7.403 l 0,0 c -0.151,-0.114 -0.305,-0.223 -0.46,-0.333 l 0,0 c -0.163,-0.115 -0.328,-0.228 -0.481,-0.354 l 0,0 -2.479,-2.024 0.118,2.7 z m 20.545,-56.156 c -15.331,2.103 -26.212,16.426 -24.118,31.76 l 0,0 c 2.123,15.483 16.43,26.213 31.762,24.116 l 0,0 c 15.487,-2.12 26.232,-16.274 24.113,-31.757 l 0,0 c -1.919,-14.057 -13.982,-24.382 -27.905,-24.382 l 0,0 c -1.271,0 -2.556,0.086 -3.852,0.263 m 33.177,23.926 c 1.076,7.867 -0.96,15.662 -5.732,21.95 l 0,0 c -0.549,0.723 -1.134,1.406 -1.741,2.071 l 0,0 c 1.134,-1.082 2.21,-2.236 3.173,-3.505 l 0,0 c 4.773,-6.287 6.81,-14.081 5.734,-21.95 l 0,0 c -1.996,-14.607 -14.603,-25.62 -29.327,-25.62 l 0,0 c -1.343,0 -2.703,0.093 -4.045,0.276 l 0,0 c -7.135,0.978 -13.327,4.44 -17.839,9.384 l 0,0 c 4.356,-4.168 9.992,-7.071 16.406,-7.95 l 0,0 c 1.342,-0.184 2.702,-0.278 4.045,-0.278 l 0,0 c 14.725,0 27.331,11.015 29.326,25.622"/>
-    </clipPath>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="c" gradientUnits="userSpaceOnUse" gradientTransform="scale(185.3) rotate(-78.4 1.46 .07)" spreadMethod="pad">
-      <stop offset="0" stop-color="#90c84b"/>
-      <stop offset="1" stop-color="#256f46"/>
-    </radialGradient>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="e" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(37.26 -181.5 -181.5 -37.26 203.71 274.94)" spreadMethod="pad"/>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="g" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(37.26 -181.5 -181.5 -37.26 203.71 274.94)" spreadMethod="pad"/>
-    <radialGradient cx="0" cy="0" r="1" fx="0" fy="0" id="i" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="scale(185.3) rotate(-78.4 1.46 .07)" spreadMethod="pad"/>
-  </defs>
-  <g clip-path="url(#d)" transform="matrix(1.25 0 0 -1.25 -122.55 375.16)">
-    <path d="m 147.985,279.49 c 3.393,-2.371 7.203,-3.992 10.951,-5.478 l 0,0 c 3.738,-1.518 7.478,-2.913 11.08,-4.575 l 0,0 c 3.59,-1.67 7.102,-3.484 10.399,-5.635 l 0,0 c 0.829,-0.532 1.653,-1.087 2.454,-1.637 l 0,0 c 0.809,-0.561 1.638,-1.149 2.382,-1.725 l 0,0 c 1.53,-1.177 2.959,-2.474 4.281,-3.881 l 0,0 c 2.664,-2.808 4.871,-6.047 6.654,-9.52 l 0,0 c 3.526,-6.993 5.465,-14.865 5.963,-22.899 l 0,0 c 0.504,4.022 0.294,8.111 -0.285,12.152 l 0,0 c -0.623,4.045 -1.736,8.035 -3.409,11.824 l 0,0 c -1.67,3.79 -3.929,7.348 -6.719,10.468 l 0,0 c -2.822,3.126 -6.205,5.652 -9.662,7.826 l 0,0 c -6.926,4.452 -14.704,7.368 -22.336,9.81 l 0,0 c -3.786,1.296 -7.563,2.539 -10.966,4.507 l 0,0 c -3.442,1.911 -6.378,4.686 -8.661,8.013 l 0,0 c 1.715,-3.658 4.477,-6.882 7.874,-9.25" fill="url(#e)"/>
-  </g>
-  <g clip-path="url(#f)" transform="matrix(1.25 0 0 -1.25 -122.55 375.16)">
-    <path d="m 134.29,241.719 c 2.117,-19.034 16.329,-28.986 29.573,-31.684 l 0,0 c 13.239,-2.707 22.289,-2.172 22.289,-2.172 l 0,0 c -34.368,4.912 -40.138,15.059 -44.33,22.933 l 0,0 c -5.514,10.39 -7.491,62.632 -7.491,62.632 l 0,0 c 0,0 -2.157,-32.68 -0.041,-51.709" fill="url(#g)"/>
-  </g>
-  <g clip-path="url(#h)" transform="matrix(1.25 0 0 -1.25 -122.55 375.16)">
-    <path d="m 188.8,214.415 c 5.376,-21.65 -2.645,-63.904 -2.645,-63.904 l 0,0 c -2.911,-21.256 11.489,-40.394 32.742,-43.302 l 0,0 c 21.408,-2.925 40.572,11.619 43.456,32.727 l 0,0 c 2.95,21.555 -12.532,40.687 -33.029,43.488 l 0,0 c -10.638,1.458 -20.71,-1.467 -28.426,-7.324 l 0,0 c -0.324,-0.245 -0.667,-0.461 -0.98,-0.717 l 0,0 c 0.196,4.505 0.292,8.674 0.283,12.558 l 0,0 c 12.11,33.218 33.039,34.151 33.039,34.151 l 0,0 c -13.867,-3.563 -25.174,-24.17 -25.174,-24.17 l 0,0 c 0,0 11.655,-5.318 22.068,3.098 l 0,0 c 11.287,9.127 12.62,29.135 12.62,29.135 l 0,0 c 0,0 -24.356,0.221 -32.369,-7.023 l 0,0 c -8.016,-7.242 -5.613,-18 -5.613,-18 l 0,0 -4.896,-7.01 c -0.737,10.952 -2.762,19.196 -6.535,26.03 l 0,0 c -11.423,20.704 -27.091,32.117 -49.985,40.865 l 0,0 c 4.472,-1.809 36.797,-15.865 45.444,-50.602 m -17.992,33.948 c -0.569,0.564 -1.142,1.115 -1.714,1.65 l 0,0 c 3.752,-2.728 7.134,-5.692 10.235,-8.932 l 0,0 c -2.628,2.599 -5.446,5.026 -8.521,7.282 m 23.799,-125.52 c -5.891,7.805 -8.39,17.561 -7.033,27.473 l 0,0 c 0.319,1.665 8.007,42.738 2.617,64.445 l 0,0 c -3.491,14.024 -10.686,24.706 -18.435,32.64 l 0,0 c 8.285,-8.064 16.162,-19.187 19.868,-34.073 l 0,0 c 5.39,-21.707 -2.298,-62.78 -2.617,-64.445 l 0,0 c -1.357,-9.911 1.142,-19.667 7.033,-27.473 l 0,0 c 0.812,-1.073 1.68,-2.09 2.59,-3.055 l 0,0 c -1.448,1.375 -2.798,2.868 -4.023,4.488 m 5.332,72.866 6.37,9.119 -0.137,0.616 c -0.023,0.096 -2.103,10.052 5.175,16.625 l 0,0 c 5.524,4.995 20.734,6.508 29.818,6.643 l 0,0 c -0.05,-0.413 -0.12,-0.922 -0.201,-1.472 l 0,0 c -9.177,-0.284 -22.979,-1.897 -28.185,-6.605 l 0,0 c -5.593,-5.052 -5.657,-12.083 -5.379,-15.12 l 0,0 c -2.247,-3.3 -4.427,-7.206 -6.44,-11.83 l 0,0 -0.809,-1.156 -0.212,3.18 z m 10.233,2.973 c 2.836,4.672 12.411,19.193 23.426,22.021 l 0,0 c -6.888,-3.146 -11.297,-6.596 -21.423,-22.533 l 0,0 c -0.782,0.162 -1.46,0.345 -2.003,0.512 m -10.275,-25.166 0.927,0.757 c 0.154,0.126 0.319,0.24 0.482,0.354 l 0,0 c 0.154,0.109 0.309,0.219 0.46,0.333 l 0,0 c 6.379,4.842 14.041,7.403 22.155,7.403 l 0,0 c 1.725,0 3.477,-0.121 5.208,-0.358 l 0,0 c 8.42,-1.151 16.078,-5.125 21.914,-11.305 l 0,0 c -5.632,5.361 -12.733,8.813 -20.48,9.872 l 0,0 c -1.732,0.238 -3.484,0.358 -5.209,0.358 l 0,0 c -8.114,0 -15.777,-2.561 -22.155,-7.403 l 0,0 c -0.151,-0.114 -0.305,-0.223 -0.46,-0.333 l 0,0 c -0.163,-0.115 -0.328,-0.228 -0.481,-0.354 l 0,0 -2.479,-2.024 0.118,2.7 z m 20.545,-56.156 c -15.331,2.103 -26.212,16.426 -24.118,31.76 l 0,0 c 2.123,15.483 16.43,26.213 31.762,24.116 l 0,0 c 15.487,-2.12 26.232,-16.274 24.113,-31.757 l 0,0 c -1.919,-14.057 -13.982,-24.382 -27.905,-24.382 l 0,0 c -1.271,0 -2.556,0.086 -3.852,0.263 m 33.177,23.926 c 1.076,7.867 -0.96,15.662 -5.732,21.95 l 0,0 c -0.549,0.723 -1.134,1.406 -1.741,2.071 l 0,0 c 1.134,-1.082 2.21,-2.236 3.173,-3.505 l 0,0 c 4.773,-6.287 6.81,-14.081 5.734,-21.95 l 0,0 c -1.996,-14.607 -14.603,-25.62 -29.327,-25.62 l 0,0 c -1.343,0 -2.703,0.093 -4.045,0.276 l 0,0 c -7.135,0.978 -13.327,4.44 -17.839,9.384 l 0,0 c 4.356,-4.168 9.992,-7.071 16.406,-7.95 l 0,0 c 1.342,-0.184 2.702,-0.278 4.045,-0.278 l 0,0 c 14.725,0 27.331,11.015 29.326,25.622" fill="url(#i)"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499.8 175.2">
+  <style>
+    .regular{fill:#44A147;} .light{fill:#7EC575;} .dark-left{fill:#0C713A;} .dark-right{fill:#1E431E;} .text{opacity:0.52; fill:#010101;}
+  </style>
+  <path class="regular" d="M0 44v43.2l44 44V88z"/>
+  <path class="dark-left" d="M88 132v43.2l-44-44V88z"/>
+  <path class="regular" d="M176 44v43.2l-44 44V88z"/>
+  <path class="dark-right" d="M88 132l44-44v43.2l-44 44z"/>
+  <path class="light" d="M44 .018l43.982 43.98L44 87.982.018 44z"/>
+  <path class="regular" d="M88 44.017L131.982 88 88 131.98 44.018 88z"/>
+  <path class="light" d="M132 .017L175.98 44 132 87.98 88.017 44z"/>
+  <path class="text" d="M224 135.2V44.5h32.8c7.1 0 13.2 2.3 18.4 7 5.2 4.7 7.8 10.6 7.8 17.7 0 4.3-1.1 8.1-3.4 11.4-2.2 3.3-5.2 5.8-8.9 7.5v.5c4.5 1.5 8.1 4.1 11 7.9 2.9 3.7 4.3 8 4.3 12.9 0 7.4-2.7 13.6-8.2 18.5-5.4 4.9-11.9 7.3-19.3 7.3H224zm11.7-51.8h21.1c4.4 0 7.9-1.5 10.6-4.4 2.7-2.9 4-6.1 4-9.6s-1.3-6.6-3.9-9.5c-2.6-2.9-6-4.3-10.2-4.3h-21.7v27.8zm0 40.7h23.4c4.5 0 8.1-1.6 10.9-4.7 2.8-3.1 4.2-6.5 4.2-10.3 0-3.7-1.4-7.1-4.3-10.2-2.9-3.1-6.6-4.6-11.3-4.6h-22.9v29.8zM316.8 137.2c-6.6 0-12.1-1.9-16.5-5.7s-6.6-8.8-6.6-15.1c0-6.8 2.6-12.1 7.9-15.9 5.2-3.8 11.7-5.8 19.4-5.8 6.8 0 12.5 1.3 16.8 3.8v-1.8c0-4.6-1.6-8.2-4.7-11-3.1-2.7-7-4.1-11.5-4.1-3.4 0-6.4.8-9.2 2.4-2.7 1.6-4.6 3.8-5.6 6.6L296.2 86c1.4-3.7 4.3-7.2 8.5-10.3 4.2-3.2 9.8-4.7 16.7-4.7 7.9 0 14.5 2.3 19.8 7 5.2 4.6 7.9 11.2 7.9 19.6v37.5H338v-8.6h-.5c-4.9 7.2-11.7 10.7-20.7 10.7zm1.9-10.6c4.8 0 9.2-1.8 13.1-5.4 3.9-3.6 5.9-7.8 5.9-12.7-3.3-2.7-8.2-4.1-14.8-4.1-5.7 0-9.9 1.2-12.8 3.7-2.9 2.4-4.3 5.3-4.3 8.6 0 3 1.3 5.4 3.9 7.2 2.6 1.8 5.6 2.7 9 2.7zM360.3 135.2v-10.1l35.3-41.3h-34.3V73.2h48.6v10.1l-35.3 41.3h35.8v10.6h-50.1zM448.4 137.2c-9.4 0-17-3.1-22.9-9.4-5.9-6.2-8.8-14.1-8.8-23.7 0-9 2.8-16.8 8.5-23.3s13-9.8 21.8-9.8c9.2 0 16.6 3 22.1 9s8.3 14 8.3 24.1l-.1 2.2h-49c.3 6.2 2.4 11.2 6.3 14.8 3.8 3.6 8.3 5.4 13.5 5.4 8.4 0 14-3.5 17-10.6l10.4 4.3c-2 4.8-5.4 8.8-10 12.1-4.6 3.3-10.3 4.9-17.1 4.9zm16.7-40.5c-.3-3.5-1.9-6.9-4.9-10.1-3-3.2-7.5-4.8-13.4-4.8-4.3 0-8 1.4-11.2 4.1-3.2 2.7-5.3 6.3-6.5 10.9h36zM499.8 135.2h-11.7V44.5h11.7v90.7z"/>
 </svg>
diff --git a/site/images/bazel-navbar.png b/site/images/bazel-navbar.png
deleted file mode 100644
index 8864d6eea4..0000000000
--- a/site/images/bazel-navbar.png
+++ /dev/null
diff --git a/site/images/bazel-navbar.svg b/site/images/bazel-navbar.svg
new file mode 100644
index 0000000000..8a0f6db853
--- /dev/null
+++ b/site/images/bazel-navbar.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 317.8 86.5" style="enable-background:new 0 0 317.8 86.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{opacity:0.2;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style>
+<rect x="39" y="2.8" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 69.033 94.234)" class="st0" width="30" height="60"/>
+<rect x="17.8" y="2.8" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 79.234 32.8198)" class="st0" width="30" height="60"/>
+<rect x="39" y="23.6" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 54.3112 129.7757)" class="st1" width="30" height="60"/>
+<rect x="17.8" y="23.6" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 93.9558 68.3614)" class="st1" width="30" height="60"/>
+<polygon class="st0" points="1,22.2 1,43 22.2,64.2 22.2,43.4 "/>
+<polygon class="st0" points="43.4,64.6 43.4,85.5 22.2,64.2 22.2,43.4 "/>
+<polygon class="st0" points="85.9,22.2 85.9,43 64.6,64.2 64.6,43.4 "/>
+<polygon class="st0" points="43.4,64.6 64.6,43.4 64.6,64.2 43.4,85.5 "/>
+<line class="st1" x1="22.2" y1="1" x2="22.2" y2="21.8"/>
+<line class="st1" x1="64.6" y1="1" x2="64.6" y2="21.8"/>
+<line class="st1" x1="43.4" y1="22.1" x2="43.4" y2="43.1"/>
+<g>
+	<path class="st2" d="M117.2,76.5v-66H141c5.2,0,9.6,1.7,13.4,5.1c3.8,3.4,5.7,7.7,5.7,12.9c0,3.1-0.8,5.9-2.4,8.3
+		c-1.6,2.4-3.8,4.2-6.5,5.4v0.4c3.3,1.1,5.9,3,8,5.7c2.1,2.7,3.1,5.8,3.1,9.4c0,5.4-2,9.9-5.9,13.5c-4,3.6-8.6,5.3-14,5.3H117.2z
+		 M125.6,38.8H141c3.2,0,5.8-1.1,7.7-3.2c1.9-2.1,2.9-4.4,2.9-7c0-2.5-0.9-4.8-2.8-6.9c-1.9-2.1-4.3-3.1-7.4-3.1h-15.8V38.8z
+		 M125.6,68.3h17c3.3,0,5.9-1.1,7.9-3.4c2-2.3,3-4.8,3-7.5c0-2.7-1-5.2-3.1-7.4c-2.1-2.2-4.8-3.4-8.2-3.4h-16.7V68.3z"/>
+	<path class="st2" d="M184.7,77.9c-4.8,0-8.8-1.4-12-4.1c-3.2-2.8-4.8-6.4-4.8-11c0-4.9,1.9-8.8,5.7-11.6c3.8-2.8,8.5-4.2,14.1-4.2
+		c5,0,9.1,0.9,12.3,2.8v-1.3c0-3.3-1.1-6-3.4-8c-2.3-2-5.1-3-8.4-3c-2.5,0-4.7,0.6-6.7,1.8c-2,1.2-3.4,2.8-4.1,4.8l-7.7-3.3
+		c1-2.7,3.1-5.2,6.2-7.5c3.1-2.3,7.1-3.5,12.2-3.5c5.8,0,10.6,1.7,14.4,5.1c3.8,3.4,5.7,8.1,5.7,14.3v27.3h-8.1v-6.3h-0.4
+		C196.1,75.3,191.2,77.9,184.7,77.9z M186.1,70.2c3.5,0,6.7-1.3,9.5-3.9c2.9-2.6,4.3-5.7,4.3-9.3c-2.4-2-6-2.9-10.8-2.9
+		c-4.1,0-7.2,0.9-9.3,2.7c-2.1,1.8-3.1,3.9-3.1,6.3c0,2.2,1,4,2.9,5.3C181.4,69.5,183.6,70.2,186.1,70.2z"/>
+	<path class="st2" d="M216.3,76.5v-7.4L242,39h-25v-7.7h35.4v7.4l-25.7,30h26.1v7.7H216.3z"/>
+	<path class="st2" d="M280.4,77.9c-6.8,0-12.4-2.3-16.6-6.8c-4.3-4.5-6.4-10.3-6.4-17.2c0-6.6,2.1-12.2,6.2-17
+		c4.1-4.7,9.4-7.1,15.9-7.1c6.7,0,12.1,2.2,16.1,6.5c4,4.4,6,10.2,6,17.5l-0.1,1.6h-35.7c0.2,4.5,1.8,8.1,4.6,10.8
+		c2.8,2.6,6.1,4,9.8,4c6.1,0,10.2-2.6,12.3-7.7l7.6,3.1c-1.5,3.5-3.9,6.4-7.3,8.8C289.5,76.7,285.3,77.9,280.4,77.9z M292.6,48.4
+		c-0.2-2.6-1.4-5-3.5-7.4c-2.2-2.3-5.4-3.5-9.7-3.5c-3.1,0-5.9,1-8.2,2.9c-2.3,2-3.9,4.6-4.7,7.9H292.6z"/>
+	<path class="st2" d="M317.8,76.5h-8.5v-66h8.5V76.5z"/>
+</g>
+</svg>
diff --git a/site/images/bazel-og-image.png b/site/images/bazel-og-image.png
index 371f08d3cf..25b634945d 100644
--- a/site/images/bazel-og-image.png
+++ b/site/images/bazel-og-image.png
diff --git a/site/images/favicon-16x16.png b/site/images/favicon-16x16.png
new file mode 100644
index 0000000000..587a8aa320
--- /dev/null
+++ b/site/images/favicon-16x16.png
diff --git a/site/images/favicon-32x32.png b/site/images/favicon-32x32.png
new file mode 100644
index 0000000000..a0fc9448e9
--- /dev/null
+++ b/site/images/favicon-32x32.png
diff --git a/site/images/favicon.ico b/site/images/favicon.ico
index 97fc06705b..507f14faec 100644..100755
--- a/site/images/favicon.ico
+++ b/site/images/favicon.ico