Adapt website to use g3doc sources and bazel.

This adapts the merged website repository to use the image and bazel
build framework. It explicitly avoids the container_image rules provided
by bazel, opting instead to build with direct docker commands when
necessary.

The relevant build commands are incorporated into the top-level
Makefile.

5 files changed, 260 insertions, 0 deletions

diff --git a/website/_sass/footer.scss b/website/_sass/footer.scss
new file mode 100644
index 000000000..32b265a44
--- /dev/null
+++ b/website/_sass/footer.scss
@@ -0,0 +1,15 @@
+.footer {
+  margin-top: 40px;
+  background-color: #222222;
+  color: #ffffff;
+  padding: 20px;
+
+  a {
+    color: $inverse-link-color;
+
+    &:hover,
+    &:focus {
+      color: $inverse-link-hover-color;
+    }
+  }
+}
diff --git a/website/_sass/front.scss b/website/_sass/front.scss
new file mode 100644
index 000000000..cb0d6f147
--- /dev/null
+++ b/website/_sass/front.scss
@@ -0,0 +1,22 @@
+.jumbotron {
+  background-color: transparent;
+  background-image: url("/assets/images/background.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  p {
+    color: #eeeeee;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 300;
+  }
+  .btn {
+    color: $text-color;
+    background-color: $inverse-link-color;
+  }
+  .btn-inverse {
+    color: $text-color;
+    background-color: #ffffff;
+  }
+}
diff --git a/website/_sass/navbar.scss b/website/_sass/navbar.scss
new file mode 100644
index 000000000..33dbc7c4b
--- /dev/null
+++ b/website/_sass/navbar.scss
@@ -0,0 +1,26 @@
+.navbar-inverse {
+  background-color: $primary;
+  border-bottom: 1px solid $primary;
+
+  .navbar-brand > a {
+    color: #ffffff;
+
+    &:focus,
+    &:hover {
+      color: #ffffff;
+    }
+  }
+
+  .navbar-nav > li > a {
+    color: $inverse-link-color;
+
+    &:focus,
+    &:hover {
+      color: $inverse-link-hover-color;
+    }
+  }
+
+  .navbar-nav .nav-icon {
+    font-size: 18px;
+  }
+}
diff --git a/website/_sass/sidebar.scss b/website/_sass/sidebar.scss
new file mode 100644
index 000000000..f6745f087
--- /dev/null
+++ b/website/_sass/sidebar.scss
@@ -0,0 +1,60 @@
+$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;
+        }
+
+        .caret {
+          float: right;
+          margin-top: 8px;
+          margin-right: 10px;
+        }
+      }
+
+      &.active {
+        a {
+          border-left: 2px solid $sidebar-hover-border-color;
+	  padding-left: 6px;
+        }
+      }
+    }
+
+    ul.sidebar-nav {
+      padding-left: 10px;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .sidebar {
+    &.collapse {
+      display: block;
+    }
+  }
+}
diff --git a/website/_sass/style.scss b/website/_sass/style.scss
new file mode 100644
index 000000000..e9cc54d24
--- /dev/null
+++ b/website/_sass/style.scss
@@ -0,0 +1,137 @@
+$primary: #262362;
+$secondary: #ffffff;
+$link-color: #286FD7;
+$inverse-link-color: #FFFFFF;
+
+$link-hover-color: darken($link-color, 10%);
+$inverse-link-hover-color: darken($inverse-link-color, 10%);
+
+$text-color: #444;
+
+$body-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$code-font-family: 'Source Code Pro', monospace;
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  color: $text-color;
+  font-family: $body-font-family;
+  padding-top: 40px;
+}
+
+a {
+  color: $link-color;
+
+  &:hover,
+  &:focus {
+    color: $link-hover-color;
+    text-decoration: none;
+  }
+
+  code {
+    color: $link-color;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $text-color;
+  font-weight: 400;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+  color: $text-color;
+  background: transparent;
+}
+
+h1 {
+  font-size: 30px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+
+  code {
+    font-size: 24px;
+  }
+}
+
+h3 {
+  font-size: 20px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  code {
+    font-size: 20px;
+  }
+}
+
+h4 {
+  font-size: 18px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  code {
+    font-size: 18px;
+  }
+}
+
+p,
+li {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+code {
+  font-family: $code-font-family;
+  font-size: 13px;
+}
+
+.btn {
+  background-color: $primary;
+}
+
+.well {
+  box-shadow: none;
+}
+
+table {
+  width: 100%;
+}
+
+table td, table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+table tr:nth-child(even) {
+  background-color: #eee;
+}
+
+table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background-color: $primary;
+  color: $secondary;
+}
+
+.blog-meta {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}