brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From drigod...@apache.org
Subject [16/28] brooklyn-docs git commit: Update apache brooklyn website's styles
Date Fri, 16 Jun 2017 15:21:56 GMT
Update apache brooklyn website's styles

(cherry picked from commit 51c8620b7c48c1f84bfcf6e46f12f9871601d796)


Project: http://git-wip-us.apache.org/repos/asf/brooklyn-docs/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-docs/commit/ad5e53f6
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-docs/tree/ad5e53f6
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-docs/diff/ad5e53f6

Branch: refs/heads/0.11.x
Commit: ad5e53f625ad8399172538564bd95179b7df9ad7
Parents: 2735b5b
Author: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Authored: Thu Apr 20 14:42:00 2017 +0100
Committer: Richard Downer <richard@apache.org>
Committed: Wed May 31 15:26:11 2017 +0100

----------------------------------------------------------------------
 _includes/base-head.html                    |  33 ---
 _includes/footer.html                       |  22 +-
 _includes/head.html                         |  14 +
 _includes/header.html                       |  53 ++++
 _includes/scripts.html                      |  40 +++
 _includes/sidemenu.html                     | 339 +++++++++++------------
 _includes/topmenu.html                      |  75 -----
 _layouts/base.html                          | 222 ---------------
 _layouts/website-base.html                  |  33 ---
 _layouts/website-landing.html               |  73 +++--
 _layouts/website-normal.html                |  76 ++---
 guide/start/running.md                      |   2 +-
 style/css/_basic.scss                       |  30 +-
 style/css/_feature_list.scss                | 108 ++++----
 style/css/_footer.scss                      |  49 ++--
 style/css/_landing.scss                     | 126 +++++++--
 style/css/_main_container.scss              |  53 +---
 style/css/_menu.scss                        | 122 +-------
 style/css/catalog_items.css                 |   4 +-
 style/css/singlePage.css                    |   2 +-
 style/js/public.js                          | 167 +++++++++++
 website/index.md                            | 134 +++++++--
 website/learnmore/catalog/catalog-item.html |  10 +-
 website/learnmore/catalog/index.html        |  10 +-
 24 files changed, 883 insertions(+), 914 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/base-head.html
----------------------------------------------------------------------
diff --git a/_includes/base-head.html b/_includes/base-head.html
deleted file mode 100644
index bc963e0..0000000
--- a/_includes/base-head.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-<title>{{ page.title }} - Apache Brooklyn</title>
-
-<meta http-equiv="content-type" content="text/html; charset=utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-
-<link href="{% dependency_url bootstrap.css %}" rel="stylesheet">
-<link href="{{site.path.style}}/deps/octicons/octicons.css" rel="stylesheet">
-<link href="{{site.path.style}}/deps/bootstrap-theme.css" rel="stylesheet">
-
-<script src="{% dependency_url jquery.js %}"></script>
-<script src="{% dependency_url bootstrap.js %}"></script>
-<script type="text/javascript" src="{{ site.path.style }}/deps/jquery.cookie.js"></script>
-
-{% if page.url contains "/start/" %}
-<link href="{{site.path.style}}/deps/tooltip.css" rel="stylesheet">
-<script type="text/javascript" src="{{ site.path.style }}/deps/glossarizer.js"></script>
-<script type="text/javascript" src="{{ site.path.style }}/deps/tooltip.js"></script>
-<script>
-$(function(){
-  $('body').glossarizer({
-    sourceURL: '/guide/glossary.json?'+Math.random(),
-    caseSensitive : true,
-    lookupTagName : 'p, ul',
-    callback: function(){ new tooltip(); }
-  });
-});
-</script>
-{% endif %}
-
-<link rel="stylesheet" href="{{ site.path.style }}/css/code.css" type="text/css" media="screen" />
-<link href="{{site.path.style}}/css/website.css" rel="stylesheet">
-

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/footer.html
----------------------------------------------------------------------
diff --git a/_includes/footer.html b/_includes/footer.html
index 2531d46..d015acb 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,16 +1,16 @@
-<div id="footer">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-10 text-muted">
-                Apache Brooklyn is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
-            </div>
-            <div class="col-md-2">
+<footer class="container">
+    <div class="row">
+        <div class="col-md-9">
+            <p>Apache Brooklyn is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
+        </div>
+        <div class="col-md-3 text-right">
+            <p>
                 <a class="btn btn-sm btn-default" href="https://github.com/apache/brooklyn-docs/edit/master/{{ page.path }}">Edit This Page</a>
                 <a href="{{ site.url_root }}{{ site.path.website }}/community/how-to-contribute-docs.html"
-                    data-toggle="tooltip" data-placement="top" title="How to Edit Documentation" data-delay="400"/>
-                  <span class="octicon octicon-question octicon-footer"></span>
+                    data-toggle="tooltip" data-placement="top" title="" data-delay="400" data-original-title="How to Edit Documentation">
+                    <span class="octicon octicon-question octicon-footer"></span>
                 </a>
-            </div>
+            </p>
         </div>
     </div>
-</div>
+</footer>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/head.html
----------------------------------------------------------------------
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..2c3864f
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,14 @@
+<title>{{ page.title }} - Apache Brooklyn</title>
+
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<link href="{% dependency_url bootstrap.css %}" rel="stylesheet" />
+<link href="{{site.path.style}}/deps/octicons/octicons.css" rel="stylesheet" />
+<link href="{{site.path.style}}/deps/bootstrap-theme.css" rel="stylesheet" />
+<link href="{{site.path.style}}/deps/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
+<link href="{{site.path.style}}/deps/tooltip.css" rel="stylesheet" />
+<link href="{{ site.path.style }}/css/code.css" rel="stylesheet" />
+<link href="{{site.path.style}}/css/website.css" rel="stylesheet" />
+
+<script type="text/javascript" src="{% dependency_url jquery.js %}"></script>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/header.html
----------------------------------------------------------------------
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..3835d09
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,53 @@
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <div class="navbar-brand">
+                <a class="brand-apache" href="http://www.apache.org/">
+                    <img src="https://www.apache.org/foundation/press/kit/feather.svg" alt="[Apache]">
+                </a>
+                {% if page.layout != "website-landing" %}
+                <a class="brand-brooklyn" href="{{site.path.website}}/"><img src="{{site.path.style}}/img/apache-brooklyn-logo-244px-wide.png" alt="brooklyn"></a>
+                {% endif %}
+            </div>
+        </div>
+        <div class="collapse navbar-collapse" id="main-menu">
+
+
+            <ul class="nav navbar-nav navbar-right">
+                {% for item in site.data.menu %}
+                <li class="dropdown{% if page.breadcrumb_paths contains item.path %} active{% endif %}">
+                    {% if item.menu_customization.type == "button" %}
+                    <form class="navbar-form">
+                        <a href="{{item.url}}" class="btn btn-default">{{ item.title_in_menu | downcase }}</a>
+                    </form>
+                    {% else %}
+                    <a href="{{item.url}}" data-toggle="dropdown">{{ item.title_in_menu | downcase }} {% if item.menu %}<span class="caret"></span>{% endif %}</a>
+                    {% if item.menu %}
+                    <ul class="dropdown-menu" role="menu">
+                        <li>
+                            <a href="{{item.url}}">{{item.title_in_menu}}</a>
+                        </li>
+                        <li class="divider"></li>
+                        {% for item2 in item.menu %}
+                        {% if item2.menu_customization.dropdown_new_section %}<li class="divider"></li>{% endif %}
+                        <li {% if item2.menu_customization.dropdown_section_header %}class="section"{% endif %}>
+                            <a href="{{item2.url}}">{{item2.title_in_menu}}
+                                {% if item2.external %}&nbsp;<span class="octicon octicon-link-external"></span>{% endif %}</a>
+                        </li>
+                        {% if item2.menu_customization.dropdown_section_header %}<li class="divider"></li>{% endif %}
+                        {% endfor %}
+                    </ul>
+                    {% endif %}
+                    {% endif %}
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</nav>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/scripts.html
----------------------------------------------------------------------
diff --git a/_includes/scripts.html b/_includes/scripts.html
new file mode 100644
index 0000000..0d14491
--- /dev/null
+++ b/_includes/scripts.html
@@ -0,0 +1,40 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<script type="text/javascript" src="{% dependency_url bootstrap.js %}"></script>
+<script type="text/javascript" src="{{ site.path.style }}/deps/jquery.cookie.js"></script>
+<script type="text/javascript" src="{{ site.path.style }}/js/zeroclipboard/ZeroClipboard.min.js"></script>
+<script type="text/javascript" src="{{ site.path.style }}/deps/tooltip.js"></script>
+{% if page.url contains "/start/" %}
+<script type="text/javascript" src="{{ site.path.style }}/deps/glossarizer.js"></script>
+<script type="text/javascript">
+    $(function(){
+        $('body').glossarizer({
+            sourceURL: '/guide/glossary.json?'+Math.random(),
+            caseSensitive : true,
+            lookupTagName : 'p, ul',
+            callback: function(){ new tooltip(); }
+        });
+    });
+    </script>
+{% endif %}
+<script type="text/javascript">
+    ZeroClipboard.config({ moviePath: '{{ site.path.style }}/js/zeroclipboard/ZeroClipboard.swf' });
+</script>
+<script src="{{ site.path.style }}/js/public.js"></script>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/sidemenu.html
----------------------------------------------------------------------
diff --git a/_includes/sidemenu.html b/_includes/sidemenu.html
index ec3cf1c..889b77e 100644
--- a/_includes/sidemenu.html
+++ b/_includes/sidemenu.html
@@ -11,9 +11,9 @@
   while customizing the side menu (make self breadcrumb[1]).
 {% endcomment %}
 
-{% unless page.landing %}
+{% if page.layout != "website-landing" %}
   {% if page.menu_parent %}
-    {% if page.menu_parent.landing %} {% comment %} case 2 {% endcomment %}
+    {% if page.menu_parent.layout == "website-landing" %} {% comment %} case 2 {% endcomment %}
               {% for item in page.breadcrumb_pages offset:1 %}
                   <h4 class="{% if forloop.index0 > 0 %} with_preceding{% endif %}{% if forloop.rindex0 > 0 %} with_following{% endif %}">
                     <a href="{{item.url}}" class="list-group-item{% if item.path == page.menu_path %} active{% endif %} breadcrumb breadcrumb{{ forloop.index0 }}">
@@ -57,188 +57,187 @@
   {% elsif page.menu %}
     <!-- no pages have a menu without being in the top menu, won't come here -->
   {% endif %}
-{% endunless %}
+{% endif %}
         
 </div>
 <div id="width_reference"></div>
 
 
 <script language="JavaScript" type="application/javascript">
+(function($){
+    {% comment %}
+    the menu is css position:fixed so won't scroll;
+    but also it will not obey its parents width.
+    set the width on load and on resize.
+    {% endcomment %}
+    sidemenu_x_sizer=function(){ $('#side-menu').width($('#side-menu').parent().find('#width_reference').outerWidth()); };
+    $(sidemenu_x_sizer);
+    $(window).resize(sidemenu_x_sizer);
+
+    {% comment %}
+    also ensure the screen is big enough, else revert to non-floating menu:
+    check y-height, and check widths (in case it was moved to after the other column)
+    {% endcomment %}
+    sidemenu_y_nonfloater=function(){
+      if ($('#side-menu').outerHeight(true) + $('#header').outerHeight(true) + $('#footer').outerHeight(true) > window.innerHeight ||
+          $('#side-menu').width() >= $('#content_container').width()/2) {
+        $('#side-menu').css('position', 'inherit');
+      } else {
+        // restore if screen has grown
+        $('#side-menu').css('position', 'fixed');
+      }
+    };
+    $(sidemenu_y_nonfloater);
+    $(window).resize(sidemenu_y_nonfloater);
+
+    {% comment %}
+    auto-advance "sections" in menu on scroll
+    {% endcomment %}
+
+    var sideMenu = $("#side-menu"),
+        sideItems = sideMenu.find("a"),
+        // Anchors corresponding to menu items
+        scrollItems = sideItems.map(function(){
+          var item = $(this).attr("section-target");
+          if (item && item.length) { return item; }
+        });
+
+    var highlight_section_last_top = -1;
+    var highlight_section_completed = false;
+
+    var highlight_section = function() {
+       // Get container scroll position
+       var highlight_section_new_top = $(this).scrollTop();
+       if (highlight_section_new_top == highlight_section_last_top) return;
+       var highlight_section_new_bottom = highlight_section_new_top + $(window).height();
+       var scroll_advancing = (highlight_section_new_top > highlight_section_last_top);
+
+       var last_item = null, active_item = $("#side-menu a.section#active");
+
+       var found_top = false;
+       var displayable_items = scrollItems.map(function(itemI){
+         item = $(scrollItems[itemI]);
+         if (item && item.length) {
+           if (highlight_section_last_top == -1 || !highlight_section_completed) {
+             // just opening page - take item matching hash, or otherwise the first item visible
+             if (item.selector === window.location.hash || (item.offset().top > highlight_section_new_top - 20 && !found_top)) {
+               found_top = true;
+               if (item.selector === window.location.hash && item.offset().top < highlight_section_new_top + 60) {
+                 // because of our top header, we need to scroll 64px down from any link
+                 $('html, body').animate({scrollTop: item.offset().top - 64}, 0);
+               }
+               return item;
+             }
+           } else if (scroll_advancing) {
+             // if scrolling advance, pick up a section when title starts before 1/3 height
+             if (item.offset().top < highlight_section_new_top + $(window).height()/3)
+               return item;
+
+             // or if containing div is finished (usu the whole main content)
+             div_containing_item = item.closest("div");
+             if (div_containing_item.offset().top + div_containing_item.height() < highlight_section_new_bottom + 15)
+               return item;
+             // or when next title is visible
+             if (last_item && item.offset().top < highlight_section_new_bottom + 15)
+               return last_item;
+           } else {
+             // if scrolling back, pick up a section as soon as the title is visible,
+             if (item.offset().top < highlight_section_new_top)
+               return item;
+             // or if title is before the 2/3 point
+             // (not sure about this, probably want also to have
+             // "AND the id.top is <= displayable_itemsrent_active_it.top" so we don't jump FORWARD a section
+             // when scrolling BACK, with lots of tiny sections)
+             if ((item.offset().top < highlight_section_new_top + 2*$(window).height()/3)
+                 && (!active_item || !active_item.offset() || active_item.offset().top >= item.offset().top))
+               return item;
 
-{% comment %} 
-the menu is css position:fixed so won't scroll; 
-but also it will not obey its parents width.
-set the width on load and on resize.
-{% endcomment %} 
-sidemenu_x_sizer=function(){ $('#side-menu').width($('#side-menu').parent().find('#width_reference').outerWidth()); };
-$(sidemenu_x_sizer);
-$(window).resize(sidemenu_x_sizer);
-
-{% comment %} 
-also ensure the screen is big enough, else revert to non-floating menu:
-check y-height, and check widths (in case it was moved to after the other column)
-{% endcomment %} 
-sidemenu_y_nonfloater=function(){
-  if ($('#side-menu').outerHeight(true) + $('#header').outerHeight(true) + $('#footer').outerHeight(true) > window.innerHeight ||
-      $('#side-menu').width() >= $('#content_container').width()/2) {
-    $('#side-menu').css('position', 'inherit');
-  } else {
-    // restore if screen has grown
-    $('#side-menu').css('position', 'fixed');
-  }
-};
-$(sidemenu_y_nonfloater);
-$(window).resize(sidemenu_y_nonfloater);
-
-{% comment %} 
-auto-advance "sections" in menu on scroll
-{% endcomment %} 
-
-var sideMenu = $("#side-menu"),
-    sideItems = sideMenu.find("a"),
-    // Anchors corresponding to menu items
-    scrollItems = sideItems.map(function(){
-      var item = $(this).attr("section-target");
-      if (item && item.length) { return item; }
-    });
-
-var highlight_section_last_top = -1;
-var highlight_section_completed = false;
-
-var highlight_section = function() {
-   // Get container scroll position
-   var highlight_section_new_top = $(this).scrollTop();
-   if (highlight_section_new_top == highlight_section_last_top) return;
-   var highlight_section_new_bottom = highlight_section_new_top + $(window).height();
-   var scroll_advancing = (highlight_section_new_top > highlight_section_last_top);
-
-   var last_item = null, active_item = $("#side-menu a.section#active");
-   
-   var found_top = false;
-   var displayable_items = scrollItems.map(function(itemI){
-     item = $(scrollItems[itemI]);
-     if (item && item.length) {
-       if (highlight_section_last_top == -1 || !highlight_section_completed) {
-         // just opening page - take item matching hash, or otherwise the first item visible
-         if (item.selector === window.location.hash || (item.offset().top > highlight_section_new_top - 20 && !found_top)) {
-           found_top = true;
-           if (item.selector === window.location.hash && item.offset().top < highlight_section_new_top + 60) {
-             // because of our top header, we need to scroll 64px down from any link
-             $('html, body').animate({scrollTop: item.offset().top - 64}, 0);
            }
-           return item;
+           last_item = item;
          }
-       } else if (scroll_advancing) {
-         // if scrolling advance, pick up a section when title starts before 1/3 height 
-         if (item.offset().top < highlight_section_new_top + $(window).height()/3)
-           return item;
-           
-         // or if containing div is finished (usu the whole main content)
-         div_containing_item = item.closest("div");
-         if (div_containing_item.offset().top + div_containing_item.height() < highlight_section_new_bottom + 15)
-           return item;
-         // or when next title is visible
-         if (last_item && item.offset().top < highlight_section_new_bottom + 15)
-           return last_item;
+       });
+       if (!highlight_section_completed && document.readyState === "complete") {
+         highlight_section_completed = true;
+       }
+       if (!displayable_items.length) {
+         $("#side-menu a.section").removeClass("active");
        } else {
-         // if scrolling back, pick up a section as soon as the title is visible,
-         if (item.offset().top < highlight_section_new_top)
-           return item;
-         // or if title is before the 2/3 point
-         // (not sure about this, probably want also to have 
-         // "AND the id.top is <= displayable_itemsrent_active_it.top" so we don't jump FORWARD a section
-         // when scrolling BACK, with lots of tiny sections) 
-         if ((item.offset().top < highlight_section_new_top + 2*$(window).height()/3)
-             && (!active_item || !active_item.offset() || active_item.offset().top >= item.offset().top))
-           return item;
-         
+         displayable_items = displayable_items[displayable_items.length-1];
+         var id = displayable_items && displayable_items.length ? displayable_items[0].id : "";
+       // Set/remove active class
+         new_active = $("#side-menu a.section").filter("[section-target='#"+id+"']");
+         if (new_active.hasClass("active")) {
+           // nothing needed
+         } else {
+           $("#side-menu a.section").removeClass("active");
+           $("#side-menu a.section").filter("[section-target='#"+id+"']").addClass("active");
+         }
        }
-       last_item = item;
-     }
-   });
-   if (!highlight_section_completed && document.readyState === "complete") {
-     highlight_section_completed = true;
-   }
-   if (!displayable_items.length) {
-     $("#side-menu a.section").removeClass("active");
-   } else {
-     displayable_items = displayable_items[displayable_items.length-1];
-     var id = displayable_items && displayable_items.length ? displayable_items[0].id : "";
-   // Set/remove active class
-     new_active = $("#side-menu a.section").filter("[section-target='#"+id+"']");
-     if (new_active.hasClass("active")) {
-       // nothing needed
-     } else {
-       $("#side-menu a.section").removeClass("active");
-       $("#side-menu a.section").filter("[section-target='#"+id+"']").addClass("active");
-     }
-   }
-   
-   highlight_section_last_top = highlight_section_new_top;
-};
-var highlight_new_section = function() {
-  highlight_section_completed = false;
-  highlight_section_last_top = -1;
-  highlight_section();
-}
-
-$(window).scroll(highlight_section);
-$(highlight_new_section);
-
-// detect link change - courtesy http://www.bennadel.com/blog/1520-binding-events-to-non-dom-objects-with-jquery.htm
-    (
-        function( $ ){
-            // Default to the current location.
-            var strLocation = window.location.href;
-            var strHash = window.location.hash;
-            var strPrevLocation = "";
-            var strPrevHash = "";
-
-            // This is how often we will be checkint for
-            // changes on the location.
-            var intIntervalTime = 100;
-
-            // This method removes the pound from the hash.
-            var fnCleanHash = function( strHash ){
-                return(
-                    strHash.substring( 1, strHash.length )
-                    );
-            }
-
-            // This will be the method that we use to check
-            // changes in the window location.
-            var fnCheckLocation = function(){
-                // Check to see if the location has changed.
-                if (strLocation != window.location.href){
-
-                    // Store the new and previous locations.
-                    strPrevLocation = strLocation;
-                    strPrevHash = strHash;
-                    strLocation = window.location.href;
-                    strHash = window.location.hash;
-
-                    // The location has changed. Trigger a
-                    // change event on the location object,
-                    // passing in the current and previous
-                    // location values.
-                    $( window.location ).trigger(
-                        "change",
-                        {
-                            currentHref: strLocation,
-                            currentHash: fnCleanHash( strHash ),
-                            previousHref: strPrevLocation,
-                            previousHash: fnCleanHash( strPrevHash )
-                        }
-                        );
 
+       highlight_section_last_top = highlight_section_new_top;
+    };
+    var highlight_new_section = function() {
+      highlight_section_completed = false;
+      highlight_section_last_top = -1;
+      highlight_section();
+    }
+
+    $(window).scroll(highlight_section);
+    $(highlight_new_section);
+
+    // detect link change - courtesy http://www.bennadel.com/blog/1520-binding-events-to-non-dom-objects-with-jquery.htm
+
+    // Default to the current location.
+    var strLocation = window.location.href;
+    var strHash = window.location.hash;
+    var strPrevLocation = "";
+    var strPrevHash = "";
+
+    // This is how often we will be checkint for
+    // changes on the location.
+    var intIntervalTime = 100;
+
+    // This method removes the pound from the hash.
+    var fnCleanHash = function( strHash ){
+        return(
+            strHash.substring( 1, strHash.length )
+            );
+    }
+
+    // This will be the method that we use to check
+    // changes in the window location.
+    var fnCheckLocation = function(){
+        // Check to see if the location has changed.
+        if (strLocation != window.location.href){
+
+            // Store the new and previous locations.
+            strPrevLocation = strLocation;
+            strPrevHash = strHash;
+            strLocation = window.location.href;
+            strHash = window.location.hash;
+
+            // The location has changed. Trigger a
+            // change event on the location object,
+            // passing in the current and previous
+            // location values.
+            $( window.location ).trigger(
+                "change",
+                {
+                    currentHref: strLocation,
+                    currentHash: fnCleanHash( strHash ),
+                    previousHref: strPrevLocation,
+                    previousHash: fnCleanHash( strPrevHash )
                 }
-            }
+                );
 
-            // Set an interval to check the location changes.
-            setInterval( fnCheckLocation, intIntervalTime );
         }
-    )( jQuery );
-// and trigger highlight section on link change
-$(window.location).bind("change", highlight_new_section);
+    }
+
+    // Set an interval to check the location changes.
+    setInterval( fnCheckLocation, intIntervalTime );
+
+    // and trigger highlight section on link change
+    $(window.location).bind("change", highlight_new_section);
+})(jQuery);
 
 </script>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_includes/topmenu.html
----------------------------------------------------------------------
diff --git a/_includes/topmenu.html b/_includes/topmenu.html
deleted file mode 100644
index 290c8ee..0000000
--- a/_includes/topmenu.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<nav class="navbar navbar-default navbar-fixed-top" id="header" role="navigation">
-    <div class="container-and-sidebars">
-
-        <div class="container-sidebar-left feather{% if page.landing %} landing{% endif %}">
-          <a href="http://www.apache.org/">
-            <img src="{{ site.path.style }}/img/feather.png" alt="[Apache]" width="80" class="flip navbar-feather">
-          </a>
-        </div>
-
-        <div class="container container-between-sidebars top-menu">
-          <div class="container-fluid">
-            <!-- Brand and toggle get grouped for better mobile display -->
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle" 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>
-                {% unless page.landing %}<a class="navbar-brand" href="{{site.path.website}}/"><img src="{{site.path.style}}/img/apache-brooklyn-logo-244px-wide.png" alt="brooklyn"></a>{% endunless %}
-            </div>
-
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right">
-                  {% for item in site.data.menu %}
-                   {% if item.menu %}
-                    <li class="dropdown{% if page.breadcrumb_paths contains item.path %} active{% endif %}">
-                        <a href="{{item.url}}">{{ item.title_in_menu | downcase }}</a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li>
-                                <a href="{{item.url}}">{{item.title_in_menu}}</a>
-                            </li>
-                            <li class="divider"></li>
-                            {% for item2 in item.menu %}
-                              <li>
-                                {% if item2.menu_customization.dropdown_new_section %}
-                                  <div class="dropdown_new_section"><hr></div>
-                                {% endif %}
-                                <a href="{{item2.url}}">{{item2.title_in_menu}}
-                                  {% if item2.external %}&nbsp;<span class="octicon octicon-link-external"></span>{% endif %}</a>
-                                {% if item2.menu_customization.dropdown_section_header %}
-                                  <div class="dropdown_section_header"><hr></div>
-                                {% endif %}
-                              </li>
-                            {% endfor %}
-                        </ul>
-                    </li>
-                   {% else %}
-                    <li class="{% if page.breadcrumb_paths contains item.path %}active{% endif %}">
-                      <a href="{{item.url}}">{{ item.title_in_menu | downcase }}</a>
-                    </li>
-                   {% endif %}
-                  {% endfor %}
-                </ul>
-            </div><!-- /.navbar-collapse -->
-          </div><!-- /.container-fluid -->
-        </div><!-- /.container -->
-        
-        <div class="container-sidebar-right">
-          <div class="navbar-sidebar-right-icons">
-            <a href="https://github.com/apache/brooklyn" class="navbar-icon navbar-icon-shift icon-github"
-              data-toggle="tooltip" data-placement="bottom" title="GitHub: apache/brooklyn"/>
-            <a href="https://twitter.com/#!/search?q=brooklyncentral" class="navbar-icon navbar-icon-shift icon-twitter"
-              data-toggle="tooltip" data-placement="bottom" title="Twitter: @brooklyncentral"/>
-            <a href="http://webchat.freenode.net/?channels=brooklyncentral" class="navbar-icon icon-irc"
-              data-toggle="tooltip" data-placement="bottom" title="IRC: freenode #brooklyncentral"/>
-            <!-- extra a element seems needed as landing page seems to copy the last element here (!?) 
-            -->
-            <a href="/" style="width: 0px; height: 0px;"></a>
-         </div>
-      </div>
-      
-  </div>
-</nav>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_layouts/base.html
----------------------------------------------------------------------
diff --git a/_layouts/base.html b/_layouts/base.html
deleted file mode 100644
index 53d20f8..0000000
--- a/_layouts/base.html
+++ /dev/null
@@ -1,222 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
-
-{{ content }}
-
-<script language="JavaScript" type="application/javascript">
-
-    fix_padding_function = function () { 
-        $('body').css('padding-top', parseInt($('#header').css("height"))+10);
-        $('body').css('padding-bottom', parseInt($('#footer').css("height"))+10);
-    };
-    $(window).resize(fix_padding_function);
-    $(window).load(fix_padding_function);
-    
-    $(function () {
-        $('[data-toggle="tooltip"]').tooltip({ delay: { show: 600, hide: 100 }})
-    });
-    
-/* generate anchors for headers, a la github and http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
-var anchorForId = function (id, text) {
-  var anchor = document.createElement("a");
-  anchor.className = "header-link";
-  anchor.href      = "#" + id;
-  anchor.innerHTML = "<i class=\"fa fa-link\"></i>";
-  return anchor;
-};
-
-var linkifyAnchors = function (level, containingElement) {
-  var headers = contentBlock.find("h" + level);
-  for (var h = 0; h < headers.length; h++) {
-    var header = headers[h];
-    if (typeof header.id !== "undefined" && header.id !== "") {
-      header.appendChild(anchorForId(header.id, $(header).text()));
-    }
-  }
-};
-
-$(function () {
-    contentBlock = $("#content_container");
-    if (!contentBlock) return;
-    for (var level = 1; level <= 6; level++) {
-      linkifyAnchors(level, contentBlock);
-    }
-});
-
-<!-- Copying and clipboard support -->
-
-// first make the $% line starts not selectable 
-
-$(function() {
-  $('div.highlight').attr('oncopy', 'handleHideCopy(this)');
-  $('div.highlight').each(function(index,target) {
-    if ($(target).find('code.bash')) {
-      // Mark bash prompts from the start of each line (i.e. '$' or '%' characters
-      // at the very start, or immediately following any newline) as not-selectable. 
-      // Handle continuation lines where a leading '$' or '%' is *not* a prompt character.
-      // (If example wants to exclude output, it can manually use class="nocopy".)
-      target.innerHTML = target.innerHTML.replace(/(^\s*|[^\\]\n)(<.*>)?([$%]|&gt;) /g, '$1$2<span class="nocopy bash_prompt">$3 </span>');
-    }
-  });
-});
-
-// normal cmd-C (non-icon) copying
-
-function handleHideCopy(el) {
-//    var origHtml = $(el).clone();
-    console.log("handling copy", el);
-    $(el).addClass('copying');
-    $(el).find('.nocopy').hide();
-    $(el).find('.clipboard_button').addClass('manual-clipboard-is-active');
-    setTimeout(function(){
-        $(el).removeClass('copying');
-        $(el).find('.clipboard_button').removeClass('manual-clipboard-is-active');
-        $(el).find('.nocopy').show();
-//        $(el).html(origHtml);
-    }, 600);
-}
-
-// and icon (flash) copying
-
-</script>
-
-<script src="{{ site.path.style }}/js/zeroclipboard/ZeroClipboard.min.js"></script>
-
-<script language="JavaScript" type="application/javascript">
-
-ZeroClipboard.config({ moviePath: '{{ site.path.style }}/js/zeroclipboard/ZeroClipboard.swf' });
-
-$(function() {
-  $('div.highlight').prepend(
-    $('<div class="clipboard_container" title="Copy to Clipboard">'+
-      '<div class="fa clipboard_button">'+
-      '<div class="on-active"><div>Copied to Clipboard</div></div>'+
-    '</div></div>'));
-  $('div.clipboard_container').each(function(index) {
-    var clipboard = new ZeroClipboard();
-    clipboard.clip( $(this).find(":first")[0], $(this)[0] );
-    var target0 = $(this).next();
-    var target = target0.clone();
-    target.find('.nocopy').remove();
-    var txt = target.text();
-    clipboard.on( 'dataRequested', function (client, args) {
-      handleHideCopy( target0.closest('div.highlight') );  //not necessary but nicer feedback
-      client.setText( txt );
-    });
-  });
-});
-
-
-<!-- search -->
-    $(function() {
-        $('#simple_google')
-            .submit(function() {
-                $('input[name="q"]').val("site:" + document.location.hostname + " " + $('input[name="brooklyn-search"]').val());
-            return true;
-            });
-        $('input[name="brooklyn-search"]').focus(function() {
-                if ($(this).val() === $(this).attr('placeholder')) {
-                    $(this).val('');
-                }
-            })
-            .blur(function() {
-                if ($(this).val() === '') {
-                    $(this).val($(this).attr('placeholder'));
-                }
-            })
-            .blur();
-    });
-
-
- <!-- analytics -->
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-30530918-1']);
-    _gaq.push(['_trackPageview']);
-    
-    (function() {
-      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-
-
-<!-- page warning (for archive pages) -->
-{% comment %}
-TODO insert the warning html at generation-time (jekyll) rather than runtime (JS)
-{% endcomment %}
-{% if page.path contains 'guide/' %} 
-    $(function() {
-        if (document.location.pathname.replace(/^\/([^\/]*).*$/, '$1') === "v"){
-            var thisversion = document.location.pathname.split("/")[2],
-                msg = "";
-            if (thisversion != 'latest' && (!$.cookie('brooklyn_versions') || 
-                    (($.inArray('ALL', $.cookie('brooklyn_versions').split(",")) === -1) &&
-                    ($.inArray(thisversion, $.cookie('brooklyn_versions').split(",")) === -1))) ){
-                msg += "<div class='warning_banner_image'><img src='{{ site.path.style }}/img/warning.png'/></div>";
-                msg += "<p>You are browsing the archive site for version <strong>"+thisversion+"</strong>.</p>";
-                if (thisversion.indexOf("SNAPSHOT") >= 0) {
-                  msg += "<p>Note that SNAPSHOT versions have not been voted on and are not endorsed by the Apache Software Foundation.</p>";
-                  msg += "<p>Do you understand and accept the risks?</p>";
-                } else {
-                  msg += "<p>Is this deliberate?</p>";
-                }
-                msg += "<center><p class='warning_banner_buttons'>";
-                msg += "<a href = 'javascript:void(0);' onclick=\"set_user_version('"+thisversion+"');\">Yes, hide this warning</a>";
-                msg += "<a href = '{{ site.path.v }}/latest/'>No, take me to the latest version guide</a>";
-                msg += "<a href = '{{ site.path.website }}/meta/versions.html'>Show all versions</a>";
-                msg += "</p></center>"
-                            
-                $('#page_notes').html(msg);
-                $('#page_notes').fadeIn('slow');
-            }
-        }
-    });
-{% endif %}
-    function get_user_versions() {
-        return $.cookie("brooklyn_versions") ? $.cookie("brooklyn_versions").split(",") : [];
-    };
-    function set_user_version(version) {
-        var version_cookie = get_user_versions();
-        version_cookie.push(version);
-        $.cookie('brooklyn_versions', version_cookie, { expires: 365, path: '/' });
-        $('#page_notes').fadeOut();
-        event.preventDefault ? event.preventDefault() : event.returnValue = false;
-    };
-    function set_user_versions_all() {
-        var version_cookie = get_user_versions();
-        version_cookie.push("ALL");
-        $.cookie('brooklyn_versions', version_cookie, { expires: 365, path: '/' });
-        $('#page_notes').fadeOut();
-        event.preventDefault ? event.preventDefault() : event.returnValue = false;
-    };
-    function clear_user_versions() {
-        $.removeCookie('brooklyn_versions', { path: '/' });
-        $('#page_notes').fadeIn('slow');
-        event.preventDefault ? event.preventDefault() : event.returnValue = false;
-    };
-
-</script>
-
-</body>
-
-</html>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_layouts/website-base.html
----------------------------------------------------------------------
diff --git a/_layouts/website-base.html b/_layouts/website-base.html
deleted file mode 100644
index 8f8c24a..0000000
--- a/_layouts/website-base.html
+++ /dev/null
@@ -1,33 +0,0 @@
----
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-# 
-#  http://www.apache.org/licenses/LICENSE-2.0
-# 
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
-
-layout: base
----
-
-<head>
-
-    {% include base-head.html %}
-
-</head>
-
-
-<body>
-
-{% include topmenu.html %}
-
-{{ content }}

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_layouts/website-landing.html
----------------------------------------------------------------------
diff --git a/_layouts/website-landing.html b/_layouts/website-landing.html
index da76664..c9cc29c 100644
--- a/_layouts/website-landing.html
+++ b/_layouts/website-landing.html
@@ -1,43 +1,36 @@
----
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-# 
-#  http://www.apache.org/licenses/LICENSE-2.0
-# 
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
 
-# layout for front page, contianing only the footer, with a bit more text
-layout: website-base
----
-<div class="container slightlyNarrowContainer">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include head.html %}
+</head>
+
+<body class="home">
+{% include header.html %}
+
+<main>
     {{ content }}
-</div>
+</main>
+{% include footer.html %}
+</body>
 
-<div id="footer">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-9 text-muted">
-                Apache Brooklyn is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
-            </div>
-            <div class="col-md-3">
-                <p>
-                <a class="btn btn-sm btn-default" href="https://github.com/apache/brooklyn-docs/edit/master/{{ page.path }}">Edit This Page</a>
-                <a href="{{ site.url_root }}{{ site.path.website }}/community/how-to-contribute-docs.html"
-                    data-toggle="tooltip" data-placement="top" title="How to Edit Documentation" data-delay="400"/>
-                  <span class="octicon octicon-question octicon-footer"></span>
-                </a>
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
+{% include scripts.html %}
+</html>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/_layouts/website-normal.html
----------------------------------------------------------------------
diff --git a/_layouts/website-normal.html b/_layouts/website-normal.html
index a89bb91..d07378e 100644
--- a/_layouts/website-normal.html
+++ b/_layouts/website-normal.html
@@ -1,39 +1,49 @@
----
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-# 
-#  http://www.apache.org/licenses/LICENSE-2.0
-# 
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
 
-# layout for most website pages, inheriting base for the menu bar, and providing a main column of content and a menu column
-# (not used for the landing page, and not used for the guide)
-#
-# menu_customizations can be used, including force_inactive to prevent highlighting
-layout: website-base
----
-<div class="container" id="main_container">
-    <div class="row">
-        <div class="col-md-9" id="content_container">
-            <div id="page_notes"></div>
-            <h1>{{ page.title }}</h1>
-            {{ content }}
-        </div>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include head.html %}
+</head>
+
+<body class="page">
+{% include header.html %}
 
-        <div class="col-md-3">
-            {% include sidemenu.html %}
+<main>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-9 content">
+                <div id="page_notes"></div>
+                <h1>{{ page.title }}</h1>
+                {{ content }}
+            </div>
+
+            <aside class="col-md-3">
+                {% include sidemenu.html %}
+            </aside>
         </div>
     </div>
-</div>
+</main>
 
 {% include footer.html %}
+</body>
+
+{% include scripts.html %}
+</html>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/guide/start/running.md
----------------------------------------------------------------------
diff --git a/guide/start/running.md b/guide/start/running.md
index 75f00cd..ef0c2a9 100644
--- a/guide/start/running.md
+++ b/guide/start/running.md
@@ -38,7 +38,7 @@ Firstly, download and install:
  * [Oracle VirtualBox](https://www.virtualbox.org/wiki/Downloads){:target="_blank"}
  
 Then download the provided Apache Brooklyn vagrant configuration from {% if site.brooklyn-version contains 'SNAPSHOT' %}
-from [here](https://repository.apache.org/service/local/artifact/maven/redirect?r=snapshots&g=org.apache.brooklyn&a=brooklyn-vagrant&v={{site.brooklyn-version}}&c=dist&e=zip){:target="_blank"}.
+[here](https://repository.apache.org/service/local/artifact/maven/redirect?r=snapshots&g=org.apache.brooklyn&a=brooklyn-vagrant&v={{site.brooklyn-version}}&c=dist&e=zip){:target="_blank"}.
 {% else %}
 [here](https://www.apache.org/dyn/closer.lua?action=download&filename=brooklyn/apache-brooklyn-{{site.brooklyn-version}}/apache-brooklyn-{{site.brooklyn-version}}-vagrant.tar.gz){:target="_blank"}.
 {% endif %} This archive contains everything you need to create an environment for use with this guide, providing an Apache Brooklyn instance and some blank VMs.

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_basic.scss
----------------------------------------------------------------------
diff --git a/style/css/_basic.scss b/style/css/_basic.scss
index 34183cc..f550436 100644
--- a/style/css/_basic.scss
+++ b/style/css/_basic.scss
@@ -1,8 +1,8 @@
 /* BASIC STYLES
    ----------------------------------------------------------------------- */
 body {
-    margin: 0px; 
-    padding: 60px 0px 20px 0px; 
+    margin: 0;
+    padding-top: 50px;
     font-family: $fonts;
     font-weight: 300;
     font-size: 17px; 
@@ -68,3 +68,29 @@ td, th {
     border: 1px solid #ccc;
     padding: 5px;
 }
+
+.navbar-brand .brand-apache {
+  position: relative;
+
+  & > img {
+    transform: rotate(-125deg);
+    height: 100px;
+    position: absolute;
+    top: -45px;
+    left: 35px;
+  }
+}
+.navbar-brand .brand-brooklyn > img {
+  padding-left: 125px;
+  margin-top: -4px;
+}
+
+abbr.glossarizer_replaced {
+  border-bottom: 1px dashed;
+  font-style: italic;
+  &:before {
+    font-family: FontAwesome;
+    content: "\f045";
+    padding-right: 5px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_feature_list.scss
----------------------------------------------------------------------
diff --git a/style/css/_feature_list.scss b/style/css/_feature_list.scss
index 32d3913..eb560b8 100644
--- a/style/css/_feature_list.scss
+++ b/style/css/_feature_list.scss
@@ -1,60 +1,62 @@
+.page .content {
+  .feature-list {
+    h3 {
+      border: 1px solid $white_dd;
+      margin-top: 48px;
+      padding: 20px 12px 12px 12px;
+      margin-bottom: 0;
+      background-color: $white_f5;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+
+      // from bootstrap for panel
+      background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+      background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+      background-repeat: repeat-x;
+    }
+  }
+
+  .feature-item {
+    padding-bottom: 24px;
+    margin-bottom: 12px;
+    font-size: 90%;
+    p {
+      margin-top: 6px;
+      margin-bottom: 0;
+    }
+    p:first-child {
+      margin-top: 0px;
+    }
+    img {
+      max-width: 200px;
+      border: 1px solid $white_dd;
+      border-radius: 2px;
+    }
+    div.feature-title {
+      width: 27%;
+      float: left;
+      font-weight: 500;
+    }
+    div.feature-body {
+      width: 70%;
+      margin-left: 30%;
+    }
+    div.feature-image {
+      text-align: center;
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
 
-#content_container .feature-list {
-  h3 {
     border: 1px solid $white_dd;
-    margin-top: 48px;
-    padding: 20px 12px 12px 12px;
+    margin-top: -1px;
     margin-bottom: 0;
-    background-color: $white_f5;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
+    font-size: 90%;
+    padding: 12px;
+    padding-top: 8px;
+    background-color: $white_fa;
 
-// from bootstrap for panel
-background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
-background-repeat: repeat-x;    
   }
-}
 
-#content_container .feature-item {
-  padding-bottom: 24px;
-  margin-bottom: 12px;
-  font-size: 90%;
-  p {
-    margin-top: 6px;
-    margin-bottom: 0;
-  }
-  p:first-child {
-    margin-top: 0px;
-  }
-  img {
-    max-width: 200px;
-    border: 1px solid $white_dd;
-    border-radius: 2px;
-  }
-  div.feature-title {
-    width: 27%;
-    float: left;
-    font-weight: 500;
-  }
-  div.feature-body {
-    width: 70%;
-    margin-left: 30%;
-  }
-  div.feature-image {
-    text-align: center;
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
-  
-  
-  border: 1px solid $white_dd;
-  margin-top: -1px;
-  margin-bottom: 0;
-  font-size: 90%;
-  padding: 12px;
-  padding-top: 8px;
-  background-color: $white_fa;
-  
 }

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_footer.scss
----------------------------------------------------------------------
diff --git a/style/css/_footer.scss b/style/css/_footer.scss
index 4034de4..1c9c004 100644
--- a/style/css/_footer.scss
+++ b/style/css/_footer.scss
@@ -3,34 +3,27 @@
 
 /* sticky footer */
 html {
-    position: relative;
-    min-height: 100%;
-}
-
-@media (min-width: 1200px) {
-    .slightlyNarrowContainer {
-        width: 970px;
+    main {
+        min-height: calc(100vh - 50px - 3.5em);
     }
-}
 
-div#footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    background-color: $white_f5;
-    text-align: center;
-    font-size: 80%;
-}
-.octicon-footer {
-    color: $footer_icon_gray;
-    font-size: 130%;
-    position: relative;
-    top: 2px;
-    padding-left: 6px;
-}
-a:hover .octicon-footer {
-    color: $brooklyn_green;
-}
+    footer {
+        height: 3.5em;
+        border-top: 1px solid #eee;
+
+        p {
+            height: 2em;
+        }
 
+        .octicon-footer {
+            color: $footer_icon_gray;
+            font-size: 130%;
+            position: relative;
+            top: 2px;
+            padding-left: 6px;
+        }
+        a:hover .octicon-footer {
+            color: $brooklyn_green;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_landing.scss
----------------------------------------------------------------------
diff --git a/style/css/_landing.scss b/style/css/_landing.scss
index baeff39..98d22c0 100644
--- a/style/css/_landing.scss
+++ b/style/css/_landing.scss
@@ -2,25 +2,115 @@
 /* LANDING PAGE
    ----------------------------------------------------------------------- */
 
-.jumbotron {
-    margin-top: 18px;
-}
+.home {
+  .navbar-brand .brand-apache > img {
+    height: 200px;
+    top: -80px;
+  }
+
+  .hero {
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23eeeeee' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
+    overflow: hidden;
+    padding: 100px 0 30px 0;
+  }
+
+  .hero {
+    h1 {
+      font-family: "Arial Rounded MT Bold", $header_fonts;
+      font-size: 6em;
+
+      .text-apache {
+        color: #808285;
+      }
+      .text-brooklyn {
+        color: $brooklyn_green;
+      }
+    }
+    p {
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+  }
 
-#apachebrooklynbanner {
-    background-image: url("../img/apache-brooklyn-logo-817px-wide.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 817px;
-    height: 99px;
+  .about, .social {
+    margin-top: 50px;
     margin-bottom: 50px;
-}
 
-div.feather.landing {
-    overflow: visible;
-    max-height: 10px;
-    img {
-        width: 200px;
-        margin-left: 40px;
-        margin-top: 0px;
+    h3.use {
+      margin-top: 3em;
+      margin-bottom: 2em;
     }
-}
\ No newline at end of file
+  }
+
+  .get-started {
+    margin-bottom: 0;
+  }
+
+  .shell {
+    margin-top: 50px;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    overflow: hidden;
+
+    .shell-toolbar {
+      border-bottom: 1px solid #f1f1f1;
+      padding: 0 4px;
+      overflow: hidden;
+
+      i {
+        background: #f00;
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 100px;
+        float: left;
+        margin: 8px;
+        margin-right: 0;
+
+        &.red {
+          background: #ff5f57;
+        }
+        &.yellow {
+          background: #ffbd2e;
+        }
+        &.green {
+          background: #2ace42;
+        }
+      }
+      span {
+        text-align: center;
+        max-width: 150px;
+        margin: auto;
+        display: block;
+        font-family: Arial;
+        margin-top: 6px;
+        font-size: 12px;
+        color: #999;
+      }
+    }
+    .highlight {
+      background-color: transparent;
+    }
+    pre {
+      background-color: #000;
+      padding: 5px 10px;
+      color: #f1f1f1;
+      margin: 0;
+
+      code.language-bash {
+        color: inherit;
+        background: transparent;
+      }
+    }
+  }
+
+  .social a {
+    color: inherit;
+    transition: color 0.3s ease;
+    &:hover {
+      color: $brooklyn_green;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_main_container.scss
----------------------------------------------------------------------
diff --git a/style/css/_main_container.scss b/style/css/_main_container.scss
index 0ce2fcc..0da10d9 100644
--- a/style/css/_main_container.scss
+++ b/style/css/_main_container.scss
@@ -1,27 +1,28 @@
-
-#content_container {
+.page .content {
   padding-bottom: 48px;
   img {
     max-width: 100%;
   }
+
+  h1 {
+    max-width: 95%;
+    font-variant: normal;
+    margin-top: -16px;
+    padding-bottom: 6px;
+    margin-top: 64px;
+    margin-bottom: 24px;
+    border-bottom: 1px dotted $gray_aa;
+    font-weight: 300;
+    font-size: 36px;
+    text-transform: uppercase;
+  }
 }
 
 
+
 /* HEADER LINKS 
    ----------------------------------------------------------------------- */
 
-#content_container h1 {
-  max-width: 95%;
-  font-variant: normal;
-  margin-top: -16px;
-  padding-bottom: 6px;
-  margin-top: 64px;
-  margin-bottom: 24px;
-  border-bottom: 1px dotted $gray_aa;
-  font-weight: 300;
-  font-size: 36px;
-  text-transform: uppercase;
-}
 h4, h5, h6 {
   margin-top: 20px;
   margin-bottom: 8px;
@@ -34,30 +35,6 @@ h6 {
   font-size: 16px;
 }
 
-/* headings get a tooltip showing the permalink URL, a la github jekyll */
-/* install subset of font-awesome */
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot');
-  src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-.fa {
-  display: inline-block;
-  font-family: FontAwesome;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.fa-link:before {
-  content: "\f0c1";
-}
-.fa-play-circle-o:before {
-  content: "\f01d";
-}
 /*
  * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com
  * http://ben.balter.com/2014/03/13/pages-anchor-links/

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/_menu.scss
----------------------------------------------------------------------
diff --git a/style/css/_menu.scss b/style/css/_menu.scss
index b63386e..6d0b6cc 100644
--- a/style/css/_menu.scss
+++ b/style/css/_menu.scss
@@ -1,131 +1,15 @@
 /* WEBSITE MENUS
    ----------------------------------------------------------------------- */
 
-/* top menu bar */
-.navbar-brand {
-    margin-top: -4px;
-    margin-left: -30px !important;
-}
-
-@mixin icon($name) {
-  .icon-#{$name} {
-    width: 32px;
-    height: 32px;
-    background: url('#{$style_dir}/img/'+$name+'-256-black.png');
-    background-size: 32px 32px;
-  }
-  .icon-#{$name}:hover {
-    background: url('#{$style_dir}/img/'+$name+'-256-green.png');
-    background-size: 32px 32px;
-  }
-}
-
-.navbar {
-    @include icon('github');
-    @include icon('twitter');
-    @include icon('irc');
-}
-
-.navbar .tooltip .tooltip-inner {
-    position: relative;
-    right: 40%;
-    // include calc for those browsers which support it
-    right: calc(50% - 25px);
-    max-width: 300px;
-}
-
-/* special container with sidebar where if sidebar is squeezed
-   (under "responsiveness") the text keeps at least its "auto" size,
-   squashing the main container instead */
-.container-and-sidebars {
-    width: 100%;
-    @include flex();
-}
-.container-between-sidebars {
-    -webkit-box-flex: 1 100%;
-    -webkit-flex: 1 100%;
-    -webkit-flex-flex: 1 100%;
-    flex: 1 100%;
-    flex: 10 1 100%;
-    display: inline-block;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-}
-.container-sidebar {
-    -webkit-box-flex: 0 auto;
-    -webkit-flex: 0 auto;
-    -webkit-flex-flex: 0 auto;
-    flex: 0 auto;
-    flex: 0 0 auto;
-}
-.container-sidebar-right { 
-    @extend .container-sidebar; 
-    text-align: left;
-    padding-right: 10px;
-} 
-.container-sidebar-left {
-    @extend .container-sidebar;
-    text-align: right;
-    padding-left: 10px;
-}
-
-@media (min-width: 768px) {
-  .container-sidebar { min-width: calc((100% - 750px)/2); }
-}
-@media (min-width: 992px) {
-  .container-sidebar { min-width: calc((100% - 970px)/2); }
-}
-@media (min-width: 1200px) {
-  .container-sidebar { min-width: calc((100% - 1170px)/2); }
-}
-
-
-.navbar-feather {
-  padding-top: 12px; 
-  margin-right: -6px;
-}
-.navbar-sidebar-right-icons {
-    padding-top: 10px;
-    margin-left: -6px;
-    white-space: nowrap;
-    a {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-    }
-}
-.navbar-icon-shift { margin-right: -2px; }
-
-.navbar div.dropdown_section_header hr {
-  margin: 4px 12px;
-  border-color: $white_dd;
-}
-
-.navbar div.dropdown_new_section hr {
-  margin: 6px 0px;
-  border-color: $white_dd;
-}
-
 /* pop-up top-menu */
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus,
 .navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
+.navbar-default .navbar-nav > .active > a:focus,
+.navbar-default .navbar-nav .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
   background-color: $white_f5;
   color: $brooklyn_green;
-}
-.top-menu {
-  font-size: 14px;
-  font-weight: 400;
-  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
-    background-color: $white_f5;
-    background-image: none;
-    color: $brooklyn_green;
-  }
-  ul.nav li.dropdown:hover > ul.dropdown-menu {
-    display: block;
-  }
+      background-image: none;
 }
 
 /* side menu */

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/catalog_items.css
----------------------------------------------------------------------
diff --git a/style/css/catalog_items.css b/style/css/catalog_items.css
index d16e478..09c5910 100644
--- a/style/css/catalog_items.css
+++ b/style/css/catalog_items.css
@@ -18,8 +18,6 @@
 */
 /* landing page */
 body {
-  margin: 0px;
-  padding: 10px 0px 20px 0px;
   font-family: arial, helvetica, sans-serif;
   background-color: #ffffff;
   color: #393939;
@@ -128,7 +126,7 @@ dd {
 #container {
   width: 980px;
   padding: 0;
-  margin: 0 auto;
+  margin: 50px auto;
 }
 
 #identity {

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/css/singlePage.css
----------------------------------------------------------------------
diff --git a/style/css/singlePage.css b/style/css/singlePage.css
index 8c3a639..2f2c3f6 100644
--- a/style/css/singlePage.css
+++ b/style/css/singlePage.css
@@ -53,7 +53,7 @@ pre {
   font-size: 20pt;
   font-weight: bold;
 }
-#content_container h1{
+.page .content h1{
   display: inline-block;
   width: 90%;
 }

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/style/js/public.js
----------------------------------------------------------------------
diff --git a/style/js/public.js b/style/js/public.js
new file mode 100644
index 0000000..9742489
--- /dev/null
+++ b/style/js/public.js
@@ -0,0 +1,167 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+(function($, ZeroClipboard) {
+    $('[data-toggle="tooltip"]').tooltip({
+        delay: {
+            show: 600,
+            hide: 100
+        }
+    });
+
+    $('.page .content').find('h1, h2, h3, h4 ,h5, h6').each(function() {
+        var id = $(this).attr('id');
+        if (id !== '') {
+            $(this).append($('<a>')
+                .attr('href', '#' + id)
+                .addClass('header-link')
+                .html('<i class="fa fa-link"></i>')
+            );
+        }
+    });
+
+    <!-- Copying and clipboard support -->
+
+    // first make the $% line starts not selectable
+    $('div.highlight')
+        .attr('oncopy', 'handleHideCopy(this)')
+        .each(function(index,target) {
+            if ($(target).find('code.bash')) {
+                // Mark bash prompts from the start of each line (i.e. '$' or '%' characters
+                // at the very start, or immediately following any newline) as not-selectable.
+                // Handle continuation lines where a leading '$' or '%' is *not* a prompt character.
+                // (If example wants to exclude output, it can manually use class="nocopy".)
+                target.innerHTML = target.innerHTML.replace(/(^\s*|[^\\]\n)(<.*>)?([$%]|&gt;) /g, '$1$2<span class="nocopy bash_prompt">$3 </span>');
+            }
+        }).prepend(
+            $('<div class="clipboard_container" title="Copy to Clipboard">'+
+                '<div class="fa clipboard_button">'+
+                '<div class="on-active"><div>Copied to Clipboard</div></div>'+
+                '</div></div>')
+        );
+
+    $('div.clipboard_container').each(function(index) {
+        var clipboard = new ZeroClipboard();
+        clipboard.clip( $(this).find(":first")[0], $(this)[0] );
+        var target0 = $(this).next();
+        var target = target0.clone();
+        target.find('.nocopy').remove();
+        var txt = target.text();
+        clipboard.on( 'dataRequested', function (client, args) {
+            handleHideCopy( target0.closest('div.highlight') );  //not necessary but nicer feedback
+            client.setText( txt );
+        });
+    });
+
+    // normal cmd-C (non-icon) copying
+    function handleHideCopy(el) {
+        // var origHtml = $(el).clone();
+        console.log("handling copy", el);
+        $(el).addClass('copying');
+        $(el).find('.nocopy').hide();
+        $(el).find('.clipboard_button').addClass('manual-clipboard-is-active');
+        setTimeout(function(){
+            $(el).removeClass('copying');
+            $(el).find('.clipboard_button').removeClass('manual-clipboard-is-active');
+            $(el).find('.nocopy').show();
+            // $(el).html(origHtml);
+        }, 600);
+    }
+
+    <!-- search -->
+    $(function() {
+        $('#simple_google')
+            .submit(function() {
+                $('input[name="q"]').val("site:" + document.location.hostname + " " + $('input[name="brooklyn-search"]').val());
+                return true;
+            });
+        $('input[name="brooklyn-search"]').focus(function() {
+            if ($(this).val() === $(this).attr('placeholder')) {
+                $(this).val('');
+            }
+        })
+            .blur(function() {
+                if ($(this).val() === '') {
+                    $(this).val($(this).attr('placeholder'));
+                }
+            })
+            .blur();
+    });
+
+
+    <!-- analytics -->
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-30530918-1']);
+    _gaq.push(['_trackPageview']);
+
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+
+    <!-- page warning (for archive pages) -->
+    if (document.location.pathname.indexOf('guide/') > -1) {
+        if (document.location.pathname.replace(/^\/([^\/]*).*$/, '$1') === "v"){
+            var thisversion = document.location.pathname.split("/")[2],
+                msg = "";
+            if (thisversion != 'latest' && (!$.cookie('brooklyn_versions') ||
+                (($.inArray('ALL', $.cookie('brooklyn_versions').split(",")) === -1) &&
+                ($.inArray(thisversion, $.cookie('brooklyn_versions').split(",")) === -1))) ){
+                msg += "<div class='warning_banner_image'><img src='{{ site.path.style }}/img/warning.png'/></div>";
+                msg += "<p>You are browsing the archive site for version <strong>"+thisversion+"</strong>.</p>";
+                if (thisversion.indexOf("SNAPSHOT") >= 0) {
+                    msg += "<p>Note that SNAPSHOT versions have not been voted on and are not endorsed by the Apache Software Foundation.</p>";
+                    msg += "<p>Do you understand and accept the risks?</p>";
+                } else {
+                    msg += "<p>Is this deliberate?</p>";
+                }
+                msg += "<center><p class='warning_banner_buttons'>";
+                msg += "<a href = 'javascript:void(0);' onclick=\"set_user_version('"+thisversion+"');\">Yes, hide this warning</a>";
+                msg += "<a href = '{{ site.path.v }}/latest/'>No, take me to the latest version guide</a>";
+                msg += "<a href = '{{ site.path.website }}/meta/versions.html'>Show all versions</a>";
+                msg += "</p></center>"
+
+                $('#page_notes').html(msg).fadeIn('slow');
+            }
+        }
+    }
+    function get_user_versions() {
+        return $.cookie("brooklyn_versions") ? $.cookie("brooklyn_versions").split(",") : [];
+    }
+    function set_user_version(version) {
+        var version_cookie = get_user_versions();
+        version_cookie.push(version);
+        $.cookie('brooklyn_versions', version_cookie, { expires: 365, path: '/' });
+        $('#page_notes').fadeOut();
+        event.preventDefault ? event.preventDefault() : event.returnValue = false;
+    }
+    function set_user_versions_all() {
+        var version_cookie = get_user_versions();
+        version_cookie.push("ALL");
+        $.cookie('brooklyn_versions', version_cookie, { expires: 365, path: '/' });
+        $('#page_notes').fadeOut();
+        event.preventDefault ? event.preventDefault() : event.returnValue = false;
+    }
+    function clear_user_versions() {
+        $.removeCookie('brooklyn_versions', { path: '/' });
+        $('#page_notes').fadeIn('slow');
+        event.preventDefault ? event.preventDefault() : event.returnValue = false;
+    }
+})(jQuery, ZeroClipboard);
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/website/index.md
----------------------------------------------------------------------
diff --git a/website/index.md b/website/index.md
index 4f03dfc..d3467dc 100644
--- a/website/index.md
+++ b/website/index.md
@@ -1,10 +1,8 @@
 ---
 layout: website-landing
 title: Home
-landing: true
 children:
 - learnmore/
-- { path: download/, menu: null }
 - { path: /guide/start/index.md, title_in_menu: Get Started, href_path: /guide/start/index.md}
 - path: documentation/
   menu:
@@ -20,15 +18,33 @@ children:
   - { path: documentation/other-docs.md, title_in_menu: Other Resources }
 - community/
 - developers/
+- { path: download/, menu: null, type: button, menu_customization: {type: button} }
 ---
 
-<div class="jumbotron">
-<div id="apachebrooklynbanner">&nbsp;</div>
+<section class="text-center hero" markdown="1">
 
+# <span class="text-apache">apache</span> <span class="text-brooklyn">brooklyn</span>
+
+## Your applications, any clouds, any containers, anywhere.
+ 
+<a href="#get-started" class="btn btn-primary btn-lg">Get started</a>
+<a href="https://github.com/apache/brooklyn" class="btn btn-link btn-lg"><i class="fa fa-fw fa-github"></i> View code</a>
+
+</section>
+
+<section class="container about">
+<h3 class="text-center">Use Apache brooklyn for &hellip;</h3>
 <div class="row">
+
 <div class="col-md-4" markdown="1">
+<p>
+<span class="fa-stack fa-2x">
+<i class="fa fa-circle-thin fa-stack-2x "></i>
+<i class="fa fa-archive fa-stack-1x modeling"></i>
+</span>
+</p>
 
-### model
+#### Modeling
 
 *Blueprints* describe your application, stored as *text files* in *version control*
 
@@ -37,11 +53,17 @@ children:
 <div class="text-muted" markdown="1">
 #### JBoss &bull; Cassandra &bull; QPid &bull; nginx &bull; [many more](learnmore/catalog/)
 </div>
-
 </div>
+
 <div class="col-md-4" markdown="1">
+<p>
+<span class="fa-stack fa-2x">
+<i class="fa fa-circle-thin fa-stack-2x "></i>
+<i class="fa fa-rocket fa-stack-1x deploying"></i>
+</span>
+</p>
 
-### deploy
+#### Deploying
 
 Components *configured &amp; integrated* across *multiple machines* automatically
 
@@ -50,11 +72,17 @@ Components *configured &amp; integrated* across *multiple machines* automaticall
 <div class="text-muted" markdown="1">
 #### Amazon EC2 &bull; CloudStack &bull; OpenStack &bull; SoftLayer &bull; many more
 </div>
-
 </div>
+
 <div class="col-md-4" markdown="1">
+<p>
+<span class="fa-stack fa-2x">
+<i class="fa fa-circle-thin fa-stack-2x "></i>
+<i class="fa fa-cog fa-stack-1x managing"></i>
+</span>
+</p>
 
-### manage
+#### Managing
 
 *Monitor* key application *metrics*; *scale* to meet demand; *restart* and *replace* failed components
 
@@ -65,13 +93,83 @@ View and modify using the *web console* or automate using the *REST API*
 </div>
 
 </div>
-</div><!-- row -->
-
-<div style="text-align: center" markdown="1">
-
-<a class="btn btn-primary btn-lg" role="button" href="learnmore/">learn more</a>
-<a class="btn btn-primary btn-lg" role="button" href="{{ site.path.guide }}/start/running.html">get started</a>
-
 </div>
-
-</div><!-- jumbotron -->
+</section>
+
+
+<section class="jumbotron get-started" id="get-started">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <h3 class="text-center">Get started</h3>
+        <div class="shell">
+          <div class="shell-toolbar">
+            <i class="red"></i>
+            <i class="yellow"></i>
+            <i class="green"></i>
+            <span>bash</span>
+          </div>
+{% highlight bash %}
+{% if site.brooklyn-version contains 'SNAPSHOT' %}
+curl -SL --output apache-brooklyn-{{site.brooklyn-version}}-vagrant.tar.gz "https://repository.apache.org/service/local/artifact/maven/redirect?r=snapshots&g=org.apache.brooklyn&a=brooklyn-vagrant&v={{site.brooklyn-version}}&c=dist&e=zip"
+{% else %}
+curl -SL --output apache-brooklyn-{{site.brooklyn-version}}-vagrant.tar.gz "https://www.apache.org/dyn/closer.lua?action=download&filename=brooklyn/apache-brooklyn-{{site.brooklyn-version}}/apache-brooklyn-{{site.brooklyn-version}}-vagrant.tar.gz"
+{% endif %}tar xvf apache-brooklyn-{{site.brooklyn-version}}-vagrant.tar.gz
+cd apache-brooklyn-{{site.brooklyn-version}}-vagrant
+vagrant up brooklyn
+{% endhighlight %}
+        </div>
+        <div class="text-muted row">
+          <div class="col-md-9">Paste the above at a Terminal prompt. It will download and start Brooklyn automatically.</div>
+          <div class="col-md-3 text-rigth">Looking for <a href="{{ site.path.guide }}/start/running.html">more installation options?</a></div>
+        </div>
+        <p>Congratulation! Next, let's <a href="{{ site.path.guide }}/start/blueprints.html">deploy a blueprint</a>.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="container text-center social">
+    <div class="row">
+        <div class="col-md-12">
+            <h3 class="text-center">Get in touch</h3>
+            <p>The community is available on the following channels in case you need anything</p>
+        </div>
+        <div class="col-sm-4">
+            <a href="http://webchat.freenode.net/?channels=brooklyncentral"
+               data-toggle="tooltip" data-placement="bottom" title="IRC: freenode #brooklyncentral">
+                <p>
+                    <span class="fa-stack fa-2x">
+                        <i class="fa fa-circle-thin fa-stack-2x"></i>
+                        <i class="fa fa-slack fa-stack-1x"></i>
+                    </span>
+                </p>
+                <h4 id="deploy">IRC</h4>
+            </a>
+        </div>
+        <div class="col-sm-4">
+            <a href="https://lists.apache.org/list.html?dev@brooklyn.apache.org"
+               data-toggle="tooltip" data-placement="bottom" title="Mailing list: dev@brooklyn.apache.org">
+                <p>
+                    <span class="fa-stack fa-2x">
+                        <i class="fa fa-circle-thin fa-stack-2x"></i>
+                        <i class="fa fa-envelope-o fa-stack-1x"></i>
+                    </span>
+                </p>
+                <h4 id="deploy">Mailing list</h4>
+            </a>
+        </div>
+        <div class="col-sm-4">
+            <a href="https://twitter.com/#!/search?q=brooklyncentral"
+               data-toggle="tooltip" data-placement="bottom" title="Twitter: @brooklyncentral"/>
+                <p>
+                    <span class="fa-stack fa-2x">
+                        <i class="fa fa-circle-thin fa-stack-2x"></i>
+                        <i class="fa fa-twitter fa-stack-1x"></i>
+                    </span>
+                </p>
+                <h4 id="deploy">Twitter</h4>
+            </a>
+        </div>
+    </div>
+</section>

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/website/learnmore/catalog/catalog-item.html
----------------------------------------------------------------------
diff --git a/website/learnmore/catalog/catalog-item.html b/website/learnmore/catalog/catalog-item.html
index a822289..6a655bc 100644
--- a/website/learnmore/catalog/catalog-item.html
+++ b/website/learnmore/catalog/catalog-item.html
@@ -26,20 +26,14 @@ under the License.
   <title>Brooklyn Entity - Brooklyn Node</title>
   <meta name="fragment" content="!">
 
-  {% include base-head.html %}
+  {% include head.html %}
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="{{site.path.style}}/css/catalog_items.css" type="text/css" media="screen"/>
 </head>
 <body>
-{% include topmenu.html %}
+{% include header.html %}
 <div id="container">
-  <div id="header">
-    <div id="identity">
-      <a href="https://brooklyn.apache.org/" rel="home">Brooklyn</a>
-    </div>
-  </div>
-
   <div id="summary"></div>
 
   <ul class="nav nav-tabs">

http://git-wip-us.apache.org/repos/asf/brooklyn-docs/blob/ad5e53f6/website/learnmore/catalog/index.html
----------------------------------------------------------------------
diff --git a/website/learnmore/catalog/index.html b/website/learnmore/catalog/index.html
index 5f97fed..ceda969 100644
--- a/website/learnmore/catalog/index.html
+++ b/website/learnmore/catalog/index.html
@@ -1,5 +1,4 @@
 ---
-layout: base
 title: Catalog
 page_mask: usermanual-pdf-exclude
 page_mask: started-pdf-exclude
@@ -24,7 +23,7 @@ under the License.
 -->
 <head>
 
-  {% include base-head.html %}
+  {% include head.html %}
   <script type="text/javascript" src="{{site.path.style}}/js/catalog/items.js"></script>
   <link rel="stylesheet" href="{{site.path.style}}/css/catalog_items.css" type="text/css" media="screen"/>
 </head>
@@ -32,16 +31,11 @@ under the License.
 
 <body>
 
-{% include topmenu.html %}
+{% include header.html %}
 
 
 
 <div id="container">
-  <div id="header">
-    <div id="identity">
-      <a href="https://brooklyn.apache.org/" rel="home">Brooklyn</a>
-    </div>
-  </div>
 
   <ul class="nav nav-tabs">
     <li class="active"><a href="#entities" data-toggle="tab">Entities</a></li>


Mime
View raw message