aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--site/CNAME1
-rw-r--r--site/_config.yml6
-rw-r--r--site/_includes/blog-sidebar.html20
-rw-r--r--site/_includes/blog-twitter-js.html6
-rw-r--r--site/_includes/footer.html77
-rw-r--r--site/_includes/head.html41
-rw-r--r--site/_includes/header.html45
-rw-r--r--site/_layouts/blog.html30
-rw-r--r--site/_layouts/community.html56
-rw-r--r--site/_layouts/default.html21
-rw-r--r--site/_layouts/documentation.html92
-rw-r--r--site/_layouts/home.html11
-rw-r--r--site/_layouts/posts.html54
-rw-r--r--site/_plugins/svg_mime_type.rb3
-rw-r--r--site/_sass/style.scss511
-rw-r--r--site/_sass/syntax.scss89
-rw-r--r--site/css/main.scss5
-rw-r--r--site/images/bazel-logo.pngbin0 -> 249475 bytes
-rw-r--r--site/images/bazel-navbar.pngbin0 -> 910 bytes
-rw-r--r--site/images/bazel-og-image.pngbin0 -> 18448 bytes
-rw-r--r--site/images/favicon.icobin0 -> 115902 bytes
-rw-r--r--site/styles/main.css132
22 files changed, 1200 insertions, 0 deletions
diff --git a/site/CNAME b/site/CNAME
new file mode 100644
index 0000000000..8eb5b1677a
--- /dev/null
+++ b/site/CNAME
@@ -0,0 +1 @@
+bazel.io
diff --git a/site/_config.yml b/site/_config.yml
new file mode 100644
index 0000000000..d6dccbaa8e
--- /dev/null
+++ b/site/_config.yml
@@ -0,0 +1,6 @@
+destination: production
+markdown: redcarpet
+paginate: 10
+highlighter: pygments
+sass:
+ sass_dir: _sass
diff --git a/site/_includes/blog-sidebar.html b/site/_includes/blog-sidebar.html
new file mode 100644
index 0000000000..f56362318a
--- /dev/null
+++ b/site/_includes/blog-sidebar.html
@@ -0,0 +1,20 @@
+ <div class="col-lg-3">
+ <h2>Twitter</h2>
+ <p>For more frequent updates, follow us on Twitter.</p>
+ <p><a class="twitter-follow-button" href="https://twitter.com/bazelbuild" data-show-count="false" data-size="large">Follow @bazelbuild</a></p>
+ <h2>Discuss</h2>
+ <p>Join the discussion at our <a href="https://groups.google.com/forum/#!forum/bazel-discuss">mailing list</a>.</p>
+ <h2>Subscribe</h2>
+ <p>Subscribe to our blog via the <a href="/blog/feed.xml">RSS Feed</a> or via email:</p>
+ <div class="well">
+ <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BazelBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
+ <div class="form-group">
+ <input type="text" class="form-control" name="email" placeholder="name@email.com">
+ </div>
+ <input type="hidden" value="BazelBlog" name="uri">
+ <input type="hidden" name="loc" value="en_US">
+ <button type="submit" class="btn btn-primary btn-block">Subscribe</button>
+ </form>
+ <p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>
+ </div>
+ </div>
diff --git a/site/_includes/blog-twitter-js.html b/site/_includes/blog-twitter-js.html
new file mode 100644
index 0000000000..c6dfa460da
--- /dev/null
+++ b/site/_includes/blog-twitter-js.html
@@ -0,0 +1,6 @@
+<!--
+JavaScript used by the Follow @bazelbuild on Twitter button on the blog sidebar.
+Code from: https://dev.twitter.com/web/follow-button
+-->
+
+<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
diff --git a/site/_includes/footer.html b/site/_includes/footer.html
new file mode 100644
index 0000000000..22382aa9bc
--- /dev/null
+++ b/site/_includes/footer.html
@@ -0,0 +1,77 @@
+ <footer class="footer">
+ <div class="container">
+ <div class="row">
+ <div class="col-lg-12">
+ <p class="text-muted">&copy; 2015 Google</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="/assets/js/bootstrap.min.js"></script>
+
+ <script>
+ var shiftWindow = function() {
+ if (location.hash.length !== 0) {
+ window.scrollBy(0, -50);
+ }
+ };
+ window.addEventListener("hashchange", shiftWindow);
+
+ var highlightCurrentSidebarNav = function() {
+ var href = location.pathname;
+ var item = $('#sidebar-nav [href$="' + href + '"]');
+ if (item) {
+ var li = item.parent();
+ li.addClass("active");
+
+ if (li.parent() && li.parent().is("ul")) {
+ do {
+ var ul = li.parent();
+ if (ul.hasClass("collapse")) {
+ ul.collapse("show");
+ }
+ li = ul.parent();
+ } while (li && li.is("li"));
+ }
+ }
+ };
+
+ $(document).ready(function() {
+ // Scroll to anchor of location hash, adjusted for fixed navbar.
+ window.setTimeout(function() {
+ shiftWindow();
+ }, 1);
+
+ // Flip the caret when submenu toggles are clicked.
+ $(".sidebar-submenu").on("show.bs.collapse", function() {
+ var toggle = $('[href$="#' + $(this).attr('id') + '"]');
+ if (toggle) {
+ toggle.addClass("dropup");
+ }
+ });
+ $(".sidebar-submenu").on("hide.bs.collapse", function() {
+ var toggle = $('[href$="#' + $(this).attr('id') + '"]');
+ if (toggle) {
+ toggle.removeClass("dropup");
+ }
+ });
+
+ // Highlight the current page on the sidebar nav.
+ highlightCurrentSidebarNav();
+ });
+ </script>
+
+ <!-- Google Analytics tracking code -->
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-61082125-1', 'auto');
+ ga('send', 'pageview');
+ </script>
diff --git a/site/_includes/head.html b/site/_includes/head.html
new file mode 100644
index 0000000000..c2fc78d0c7
--- /dev/null
+++ b/site/_includes/head.html
@@ -0,0 +1,41 @@
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>{{ page.title }} - Bazel</title>
+
+ <script>
+ var current_url = window.location.href;
+ var bad_url = new RegExp("^https?://bazelbuild.github.io/bazel/");
+ if (bad_url.test(current_url)) {
+ window.location.replace(current_url.replace(bad_url, "http://bazel.io/"));
+ }
+ </script>
+
+ <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site_root }}">
+
+ <!-- Webfont -->
+ <link href="http://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">
+
+ <!-- Bootstrap -->
+ <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+ <![endif]-->
+
+ <!-- Custom stylesheet -->
+ <link rel="stylesheet" type="text/css" href="/css/main.css" />
+
+ <!-- metadata -->
+ <meta name="og:title" content="Bazel"/>
+ <meta name="og:image" content="/images/bazel-og-image.png"/>
+ <meta name="og:description" content="Correct, reproducible, fast builds for everyone"/>
+ </head>
+
diff --git a/site/_includes/header.html b/site/_includes/header.html
new file mode 100644
index 0000000000..af8b90ce41
--- /dev/null
+++ b/site/_includes/header.html
@@ -0,0 +1,45 @@
+ <nav id="common-nav" class="navbar navbar-inverse navbar-fixed-top">
+ <div class="container">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="/">
+ <img src="/images/bazel-navbar.png" height="30px">
+ </a>
+ </div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <form class="navbar-form navbar-right" action="/search.html" id="cse-search-box">
+ <div class="form-group">
+ <input type="hidden" name="cx" value="012346921571893344015:xv_nfgpzbu4">
+ <input type="hidden" name="cof" value="FORID:10">
+ <input type="hidden" name="ie" value="UTF-8">
+ <input type="search" name="q" class="form-control input-sm" placeholder="Search">
+ </div>
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li{% if page.nav == "docs" %} class="active"{% endif %}>
+ <a href="/docs/install.html">Docs</a>
+ </li>
+ <li{% if page.nav == "community" %} class="active"{% endif %}>
+ <a href="/contributing.html">Community</a>
+ </li>
+ <li{% if page.nav == "faq" %} class="active"{% endif %}>
+ <a href="/faq.html">FAQ</a></li>
+ <li{% if page.nav == "blog" %} class="active"{% endif %}>
+ <a href="/blog">Blog</a>
+ </li>
+ <li><a href="https://github.com/bazelbuild/bazel">GitHub</a></li>
+ <li><a href="https://twitter.com/bazelbuild" class="nav-icon"><i class="fa fa-twitter"></i></a></li>
+ <li><a href="https://groups.google.com/forum/#!forum/bazel-discuss" class="nav-icon"><i class="fa fa-comments"></i></a></li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav>
+
diff --git a/site/_layouts/blog.html b/site/_layouts/blog.html
new file mode 100644
index 0000000000..685c8a51c2
--- /dev/null
+++ b/site/_layouts/blog.html
@@ -0,0 +1,30 @@
+---
+nav: blog
+---
+
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body>
+ {% include header.html %}
+
+ <div class="page-title-bar">
+ <div class="container">
+ <h1>Bazel Blog</h1>
+ </div>
+ </div>
+
+ <div class="container vpad">
+ <div class="row">
+ <div class="col-lg-9">
+ {{ content }}
+ </div>
+ {% include blog-sidebar.html %}
+ </div>
+ </div>
+
+ {% include footer.html %}
+ {% include blog-twitter-js.html %}
+ </body>
+</html>
+
diff --git a/site/_layouts/community.html b/site/_layouts/community.html
new file mode 100644
index 0000000000..d3cba18bda
--- /dev/null
+++ b/site/_layouts/community.html
@@ -0,0 +1,56 @@
+---
+nav: community
+---
+
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body>
+ {% include header.html %}
+
+ <div class="page-title-bar">
+ <div class="container">
+ <h1>Community</h1>
+ </div>
+ </div>
+
+ <div class="container vpad">
+ <div class="row">
+ <div class="col-lg-2 col-md-3">
+ <a class="btn btn-default btn-lg btn-block sidebar-toggle"
+ data-toggle="collapse" href="#sidebar-nav" aria-expanded="false"
+ aria-controls="sidebar-nav">
+ <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
+ </a>
+ <nav class="sidebar collapse" id="sidebar-nav">
+ <ul class="sidebar-nav">
+ <li><a href="/contributing.html">Contributing to Bazel</a></li>
+ <li><a href="/users.html">Who's Using Bazel</a></li>
+ <li><a href="/roadmap.html">Roadmap</a></li>
+ <li><a href="/governance.html">Governance</a></li>
+ </ul>
+ <h3>Get support</h3>
+ <ul class="sidebar-nav">
+ <li><a href="/support.html">Support Policy</a></li>
+ <li><a href="https://groups.google.com/forum/#!forum/bazel-discuss">User mailing list</a></li>
+ <li><a href="https://github.com/bazelbuild/bazel/issues">Issue tracker</a></li>
+ <li><a href="http://www.twitter.com/bazelbuild">Twitter</a></li>
+ <li><a href="irc://irc.freenode.net/bazel">IRC (freenode.net#bazel)</a></li>
+ </ul>
+ <h3>Get Involved</h3>
+ <ul class="sidebar-nav">
+ <li><a href="https://github.com/bazelbuild/bazel">GitHub</a></li>
+ <li><a href="https://groups.google.com/forum/#!forum/bazel-dev">Developer mailing list</a></li>
+ <li><a href="https://bazel-review.googlesource.com">Gerrit</a></li>
+ </ul>
+ </nav>
+ </div>
+ <div class="col-lg-10 col-md-9">
+ {{ content }}
+ </div>
+ </div>
+ </div>
+
+ {% include footer.html %}
+ </body>
+</html>
diff --git a/site/_layouts/default.html b/site/_layouts/default.html
new file mode 100644
index 0000000000..cf7e07fdb0
--- /dev/null
+++ b/site/_layouts/default.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body>
+ {% include header.html %}
+
+ {% if page.title %}
+ <div class="page-title-bar">
+ <div class="container">
+ <h1>{{ page.title }}</h1>
+ </div>
+ </div>
+ {% endif %}
+
+ <div class="container">
+ {{ content }}
+ </div>
+
+ {% include footer.html %}
+ </body>
+</html>
diff --git a/site/_layouts/documentation.html b/site/_layouts/documentation.html
new file mode 100644
index 0000000000..44042593e4
--- /dev/null
+++ b/site/_layouts/documentation.html
@@ -0,0 +1,92 @@
+---
+nav: docs
+---
+
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body>
+ {% include header.html %}
+
+ <div class="page-title-bar">
+ <div class="container">
+ <h1>Documentation</h1>
+ </div>
+ </div>
+
+ <div class="container vpad">
+ <div class="row">
+ <div class="col-lg-2 col-md-3">
+ <a class="btn btn-default btn-lg btn-block sidebar-toggle"
+ data-toggle="collapse" href="#sidebar-nav" aria-expanded="false"
+ aria-controls="sidebar-nav">
+ <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
+ </a>
+ <nav class="sidebar collapse" id="sidebar-nav">
+ <ul class="sidebar-nav">
+ <li><a href="/docs/install.html">Installing</a></li>
+ <li><a href="/docs/windows.html">Building on Windows</a></li>
+ <li><a href="/docs/getting-started.html">Getting Started</a></li>
+ <li>
+ <a class="sidebar-nav-heading" data-toggle="collapse"
+ href="#tutorial-menu" aria-expanded="false"
+ aria-controls="tutorial-menu">
+ Tutorial <span class="caret"></span>
+ </a>
+ <ul class="collapse sidebar-nav sidebar-submenu" id="tutorial-menu">
+ <li><a href="/docs/tutorial/index.html">Introduction</a></li>
+ <li><a href="/docs/tutorial/environment.html">Set Up Your Environment</a></li>
+ <li><a href="/docs/tutorial/workspace.html">Set Up a Workspace</a></li>
+ <li><a href="/docs/tutorial/android-app.html">Build an Android App</a></li>
+ <li><a href="/docs/tutorial/ios-app.html">Build an iOS App</a></li>
+ <li><a href="/docs/tutorial/backend-server.html">Build the Backend Server</a></li>
+ <li><a href="/docs/tutorial/review.html">Review</a></li>
+ </ul>
+ </li>
+ </ul>
+ <h3>Using Bazel</h3>
+ <ul class="sidebar-nav">
+ <li><a href="/docs/build-ref.html">Concepts</a></li>
+ <li><a href="/docs/bazel-user-manual.html">User Manual</a></li>
+ <li><a href="/docs/test-encyclopedia.html">Test Encyclopedia</a></li>
+ <li><a href="/docs/query.html">Query Language</a></li>
+ <li><a href="/docs/mobile-install.html">mobile-install (Android)</a></li>
+ <li><a href="/docs/cpp.html">C++ Basics</a></li>
+ <li><a href="/docs/external.html">External Dependencies</a></li>
+ </ul>
+ {% include be-nav.html %}
+ <h3>Custom Rules</h3>
+ <ul class="sidebar-nav">
+ <li><a href="/docs/skylark/index.html">Overview</a></li>
+ <li><a href="/docs/skylark/concepts.html">Concepts</a></li>
+ <li><a href="/docs/skylark/rules.html">Rules</a></li>
+ <li><a href="/docs/skylark/macros.html">Macros</a></li>
+ <li><a href="/docs/skylark/repository_rules.html">Repository rules</a></li>
+ <li>
+ <a class="sidebar-nav-heading" data-toggle="collapse"
+ href="#skylark-lib-menu" aria-expanded="false"
+ aria-controls="skylark-lib-menu">
+ Library <span class="caret"></span>
+ </a>
+ <ul class="collapse sidebar-nav sidebar-submenu" id="skylark-lib-menu">
+ {% include skylark-nav.html %}
+ </ul>
+ </li>
+ <li><a href="/docs/skylark/cookbook.html">Cookbook</a></li>
+ </ul>
+ <h3>How Bazel Works</h3>
+ <ul class="sidebar-nav">
+ <li><a href="/docs/skyframe.html">Build Graph</a></li>
+ <li><a href="/docs/output_directories.html">Output Directories</a></li>
+ </ul>
+ </nav>
+ </div>
+ <div class="col-lg-10 col-md-9">
+ {{ content }}
+ </div>
+ </div>
+ </div>
+
+ {% include footer.html %}
+ </body>
+</html>
diff --git a/site/_layouts/home.html b/site/_layouts/home.html
new file mode 100644
index 0000000000..a68db67005
--- /dev/null
+++ b/site/_layouts/home.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body class="body-home">
+ {% include header.html %}
+
+ {{ content }}
+
+ {% include footer.html %}
+ </body>
+</html>
diff --git a/site/_layouts/posts.html b/site/_layouts/posts.html
new file mode 100644
index 0000000000..b02dedee41
--- /dev/null
+++ b/site/_layouts/posts.html
@@ -0,0 +1,54 @@
+---
+nav: blog
+enable_comments: true
+---
+
+
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/WebPage">
+ {% include head.html %}
+ <body>
+ {% include header.html %}
+
+ <div class="page-title-bar">
+ <div class="container">
+ <h1>Bazel Blog</h1>
+ </div>
+ </div>
+
+ <div class="container vpad">
+ <div class="row">
+ <div class="col-lg-9">
+ <div class="blog-post">
+ <h1 class="blog-post-title">{{ page.title }}</h1>
+ <div class="blog-post-meta">
+ <span class="text-muted">{{ page.date | date_to_long_string }}</a>
+ </div>
+ <div class="blog-post-content">
+ {{ content }}
+ </div>
+ {% if page.enable_comments %}
+ <div class="blog-post-comments">
+ <div id="disqus_thread"></div>
+ <script type="text/javascript">
+ var disqus_shortname = 'googlebazel';
+
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+ </script>
+ <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+ </div>
+ {% endif %}
+ </div>
+ </div>
+ {% include blog-sidebar.html %}
+ </div>
+ </div>
+
+ {% include footer.html %}
+ {% include blog-twitter-js.html %}
+ </body>
+</html>
diff --git a/site/_plugins/svg_mime_type.rb b/site/_plugins/svg_mime_type.rb
new file mode 100644
index 0000000000..ad6bb6480f
--- /dev/null
+++ b/site/_plugins/svg_mime_type.rb
@@ -0,0 +1,3 @@
+require 'webrick'
+include WEBrick
+WEBrick::HTTPUtils::DefaultMimeTypes.store 'svg', 'image/svg+xml'
diff --git a/site/_sass/style.scss b/site/_sass/style.scss
new file mode 100644
index 0000000000..6da9d8786a
--- /dev/null
+++ b/site/_sass/style.scss
@@ -0,0 +1,511 @@
+$body-font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial,
+ sans-serif;
+$code-font-family: 'Source Code Pro';
+
+$link-color: #4caf50;
+$link-hover-color: darken($link-color, 10%);
+$well-color: #f9f9f9;
+$text-color: #444;
+
+$vpad: 20px;
+
+$footer-height: 60px;
+$footer-margin: 40px;
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+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 {
+ color: $link-color;
+
+ &:hover,
+ &:focus {
+ color: $link-hover-color;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: $text-color;
+ font-weight: 300;
+ margin-top: 25px;
+ margin-bottom: 15px;
+}
+
+h1 {
+ margin-top: 40px;
+}
+
+h2 {
+ font-size: 24px;
+ margin-top: 30px;
+}
+
+h3 {
+ font-size: 18px;
+}
+
+h4 {
+ font-size: 16px;
+}
+
+p,
+li {
+ font-size: 14px;
+ line-height: 22px;
+}
+
+pre {
+ padding: 8px 16px;
+ font-family: $code-font-family;
+ background-color: $well-color;
+ border: 0;
+ font-size: 13px;
+ line-height: 20px;
+}
+
+code {
+ font-family: $code-font-family;
+ font-size: 13px;
+ background-color: $well-color;
+}
+
+.well {
+ background-color: $well-color;
+ border-color: $well-color;
+ box-shadow: none;
+}
+
+// Shared
+.vpad {
+ 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;
+ padding-top: 20px;
+ padding-bottom: 20px;
+
+ h1,
+ h2,
+ h3,
+ 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;
+ }
+}
+
+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;
+ }
+ }
+}
+
+// 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;
+ }
+}
+
+.gsc-control-cse {
+ *,
+ *::before,
+ *::after {
+ -webkit-box-sizing: content-box !important;
+ -moz-box-sizing: content-box !important;
+ box-sizing: content-box !important;
+ }
+}
diff --git a/site/_sass/syntax.scss b/site/_sass/syntax.scss
new file mode 100644
index 0000000000..56f2c787a1
--- /dev/null
+++ b/site/_sass/syntax.scss
@@ -0,0 +1,89 @@
+//
+// Copyright 2015 Google
+//
+// Generated using Base16 Builder
+// (https://github.com/chriskempson/base16-builder)
+
+$base00: #212121; // ----
+$base01: #424242; // ---
+$base02: #616161; // --
+$base03: #757575; // -
+$base04: #9e9e9e; // +
+$base05: #bdbdbd; // ++
+$base06: #e0e0e0; // +++
+$base07: #eee; // ++++
+
+$base08: #f44336; // red
+$base09: #ff9800; // orange
+$base0A: #ffc107; // yellow
+$base0B: #4caf50; // green
+$base0C: #009688; // aqua
+$base0D: #2196f3; // blue
+$base0E: #9c27b0; // purple
+$base0F: #795548; // brown
+
+.highlight .hll { background-color: $base06 }
+.highlight { background: $base07; color: $base00 }
+.highlight .c { color: $base04 } // Comment
+.highlight .err { color: $base08 } // Error
+.highlight .k { color: $base0E } // Keyword
+.highlight .l { color: $base09 } // Literal
+.highlight .n { color: $base00 } // Name
+.highlight .o { color: $base0C } // Operator
+.highlight .p { color: $base00 } // Punctuation
+.highlight .cm { color: $base04 } // Comment.Multiline
+.highlight .cp { color: $base04 } // Comment.Preproc
+.highlight .c1 { color: $base04 } // Comment.Single
+.highlight .cs { color: $base04 } // Comment.Special
+.highlight .gd { color: $base08 } // Generic.Deleted
+.highlight .ge { font-style: italic } // Generic.Emph
+.highlight .gh { color: $base00; font-weight: bold } // Generic.Heading
+.highlight .gi { color: $base0B } // Generic.Inserted
+.highlight .gp { color: $base04; font-weight: bold } // Generic.Prompt
+.highlight .gs { font-weight: bold } // Generic.Strong
+.highlight .gu { color: $base0C; font-weight: bold } // Generic.Subheading
+.highlight .kc { color: $base0E } // Keyword.Constant
+.highlight .kd { color: $base0E } // Keyword.Declaration
+.highlight .kn { color: $base0C } // Keyword.Namespace
+.highlight .kp { color: $base0E } // Keyword.Pseudo
+.highlight .kr { color: $base0E } // Keyword.Reserved
+.highlight .kt { color: $base0A } // Keyword.Type
+.highlight .ld { color: $base0B } // Literal.Date
+.highlight .m { color: $base09 } // Literal.Number
+.highlight .s { color: $base0B } // Literal.String
+.highlight .na { color: $base0D } // Name.Attribute
+.highlight .nb { color: $base00 } // Name.Builtin
+.highlight .nc { color: $base0A } // Name.Class
+.highlight .no { color: $base08 } // Name.Constant
+.highlight .nd { color: $base0C } // Name.Decorator
+.highlight .ni { color: $base00 } // Name.Entity
+.highlight .ne { color: $base08 } // Name.Exception
+.highlight .nf { color: $base0D } // Name.Function
+.highlight .nl { color: $base00 } // Name.Label
+.highlight .nn { color: $base0A } // Name.Namespace
+.highlight .nx { color: $base0D } // Name.Other
+.highlight .py { color: $base00 } // Name.Property
+.highlight .nt { color: $base0C } // Name.Tag
+.highlight .nv { color: $base08 } // Name.Variable
+.highlight .ow { color: $base0C } // Operator.Word
+.highlight .w { color: $base00 } // Text.Whitespace
+.highlight .mf { color: $base09 } // Literal.Number.Float
+.highlight .mh { color: $base09 } // Literal.Number.Hex
+.highlight .mi { color: $base09 } // Literal.Number.Integer
+.highlight .mo { color: $base09 } // Literal.Number.Oct
+.highlight .sb { color: $base0B } // Literal.String.Backtick
+.highlight .sc { color: $base00 } // Literal.String.Char
+.highlight .sd { color: $base04 } // Literal.String.Doc
+.highlight .s2 { color: $base0B } // Literal.String.Double
+.highlight .se { color: $base09 } // Literal.String.Escape
+.highlight .sh { color: $base0B } // Literal.String.Heredoc
+.highlight .si { color: $base09 } // Literal.String.Interpol
+.highlight .sx { color: $base0B } // Literal.String.Other
+.highlight .sr { color: $base0B } // Literal.String.Regex
+.highlight .s1 { color: $base0B } // Literal.String.Single
+.highlight .ss { color: $base0B } // Literal.String.Symbol
+.highlight .bp { color: $base00 } // Name.Builtin.Pseudo
+.highlight .vc { color: $base08 } // Name.Variable.Class
+.highlight .vg { color: $base08 } // Name.Variable.Global
+.highlight .vi { color: $base08 } // Name.Variable.Instance
+.highlight .il { color: $base09 } // Literal.Number.Integer.Long
diff --git a/site/css/main.scss b/site/css/main.scss
new file mode 100644
index 0000000000..038c9e9122
--- /dev/null
+++ b/site/css/main.scss
@@ -0,0 +1,5 @@
+---
+---
+
+@import "style.scss";
+@import "syntax.scss";
diff --git a/site/images/bazel-logo.png b/site/images/bazel-logo.png
new file mode 100644
index 0000000000..87e2c9ec24
--- /dev/null
+++ b/site/images/bazel-logo.png
Binary files differ
diff --git a/site/images/bazel-navbar.png b/site/images/bazel-navbar.png
new file mode 100644
index 0000000000..8864d6eea4
--- /dev/null
+++ b/site/images/bazel-navbar.png
Binary files differ
diff --git a/site/images/bazel-og-image.png b/site/images/bazel-og-image.png
new file mode 100644
index 0000000000..371f08d3cf
--- /dev/null
+++ b/site/images/bazel-og-image.png
Binary files differ
diff --git a/site/images/favicon.ico b/site/images/favicon.ico
new file mode 100644
index 0000000000..97fc06705b
--- /dev/null
+++ b/site/images/favicon.ico
Binary files differ
diff --git a/site/styles/main.css b/site/styles/main.css
new file mode 100644
index 0000000000..78d5c8a9cb
--- /dev/null
+++ b/site/styles/main.css
@@ -0,0 +1,132 @@
+html {
+}
+body {
+ margin: 0;
+ font-family: "Droid Sans", sans-serif;
+ background-color: #fff;
+}
+#banner-panel {
+}
+#banner {
+ width: 1200px;
+ margin: 0 auto 0 auto;
+ padding: 4px 0 8px 16px;
+ color: green;
+}
+#banner a {
+ text-decoration: none;
+}
+.product-logo {
+ margin: 0 0 0 -28px;
+ padding: 0 4px 0 0;
+}
+.product-logo img {
+ height: 72px;
+}
+.product-name {
+ font-size: 52px;
+ font-weight: bold;
+ color: #158320;
+}
+#motto-panel {
+ padding: 8px 0 8px 0;
+ background-color: #65ac57;
+}
+#motto {
+ width: 1200px;
+ margin: 0 auto 0 auto;
+ padding: 0 16px 0 16px;
+ font-size: 16px;
+ color: #f7ffee;
+}
+#download-panel {
+ padding: 8px 0 8px 0;
+ background-color: #75c765;
+}
+#download {
+ width: 1200px;
+ margin: 0 auto 0 auto;
+ padding: 0 16px 0 16px;
+ font-size: 16px;
+ color: #f7ffee;
+}
+#download a {
+ margin-right: 32px;
+ color: #f7ffee;
+ text-decoration: underline;
+}
+#content-panel {
+ margin: 0;
+ padding: 0;
+ background-color: #fff;
+}
+#content {
+ width: 1200px;
+ min-height: 1200px;
+ margin: 0 auto 0 auto;
+ padding: 32px 16px 32px 8px;
+ color: #000;
+ background-color: #fff;
+ border: 1px solid #fff;
+}
+#main h1, h2, h3, h4 {
+ color: #000;
+}
+#main p, li, td, th {
+ font-size: 14px;
+ line-height: 1.5;
+}
+#navbar {
+ float: left;
+ width: 200px;
+ padding: 10px 48px 0 0;
+}
+#navbar li {
+ font-size: 14px;
+}
+#main {
+ float: left;
+ width: 952px;
+}
+#footer-panel {
+ margin: 64px 0 16px 0;
+ padding: 8px 0 8px 0;
+ background-color: #fff;
+}
+#footer {
+ width: 1200px;
+ margin: 64px auto 0 auto;
+ padding: 0px 16px 0 16px;
+ text-align: right;
+ color: #360;
+}
+code, var, pre {
+ font-size: 13px;
+ color: #488f26;
+ background-color: #eee;
+ border-radius: 6px;
+}
+p > code, li > code {
+ padding: 0.25em;
+}
+pre {
+ padding: 16px;
+ line-height: 1.5;
+ background-color: #eee;
+ border: 1px solid #e7f0d7;
+}
+a, a:visited {
+ text-decoration: none;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+td, th {
+ padding: 2px 4px 2px 4px;
+ text-align: left;
+ border: 1px solid #eeeeee;
+}
+.discouraged, .deprecated {
+ text-decoration: line-through;
+}