diff options
author | David Chen <dzc@google.com> | 2016-04-26 07:12:42 +0000 |
---|---|---|
committer | Yun Peng <pcloudy@google.com> | 2016-04-26 08:30:02 +0000 |
commit | bd69080f0b9d57047d390d9557aa6d0441e66b38 (patch) | |
tree | 4da3c8ac4f8e81c9f3ddc5fd2b2e77fa70560772 | |
parent | 02669d78e33b13d0d8ee59217d8b6bb22d6f6f3a (diff) |
Include Jekyll layout files, style sheets, and Bazel logo images in the
public Bazel tree.
--
MOS_MIGRATED_REVID=120787331
-rw-r--r-- | site/CNAME | 1 | ||||
-rw-r--r-- | site/_config.yml | 6 | ||||
-rw-r--r-- | site/_includes/blog-sidebar.html | 20 | ||||
-rw-r--r-- | site/_includes/blog-twitter-js.html | 6 | ||||
-rw-r--r-- | site/_includes/footer.html | 77 | ||||
-rw-r--r-- | site/_includes/head.html | 41 | ||||
-rw-r--r-- | site/_includes/header.html | 45 | ||||
-rw-r--r-- | site/_layouts/blog.html | 30 | ||||
-rw-r--r-- | site/_layouts/community.html | 56 | ||||
-rw-r--r-- | site/_layouts/default.html | 21 | ||||
-rw-r--r-- | site/_layouts/documentation.html | 92 | ||||
-rw-r--r-- | site/_layouts/home.html | 11 | ||||
-rw-r--r-- | site/_layouts/posts.html | 54 | ||||
-rw-r--r-- | site/_plugins/svg_mime_type.rb | 3 | ||||
-rw-r--r-- | site/_sass/style.scss | 511 | ||||
-rw-r--r-- | site/_sass/syntax.scss | 89 | ||||
-rw-r--r-- | site/css/main.scss | 5 | ||||
-rw-r--r-- | site/images/bazel-logo.png | bin | 0 -> 249475 bytes | |||
-rw-r--r-- | site/images/bazel-navbar.png | bin | 0 -> 910 bytes | |||
-rw-r--r-- | site/images/bazel-og-image.png | bin | 0 -> 18448 bytes | |||
-rw-r--r-- | site/images/favicon.ico | bin | 0 -> 115902 bytes | |||
-rw-r--r-- | site/styles/main.css | 132 |
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">© 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 Binary files differnew file mode 100644 index 0000000000..87e2c9ec24 --- /dev/null +++ b/site/images/bazel-logo.png diff --git a/site/images/bazel-navbar.png b/site/images/bazel-navbar.png Binary files differnew file mode 100644 index 0000000000..8864d6eea4 --- /dev/null +++ b/site/images/bazel-navbar.png diff --git a/site/images/bazel-og-image.png b/site/images/bazel-og-image.png Binary files differnew file mode 100644 index 0000000000..371f08d3cf --- /dev/null +++ b/site/images/bazel-og-image.png diff --git a/site/images/favicon.ico b/site/images/favicon.ico Binary files differnew file mode 100644 index 0000000000..97fc06705b --- /dev/null +++ b/site/images/favicon.ico 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; +} |