website: wire close button for demos, fade white overlay

website/source/_ember_templates.html.erb

@@ -6,7 +6,7 @@
 
 <script type="text/x-handlebars" data-template-name="demo">
     <div class="terminal">
-        <a class="close-terminal" href="#">X</a>
+        <span class="close-terminal" {{action "close"}}>X</span>
         {{outlet}}
         <div class="loading-bar"></div>
     </div>

website/source/assets/javascripts/app/Sidebar.js

@@ -16,7 +16,7 @@ Sidebar = Base.extend({
     	this.$sidebarHeader = $('#sidebar .sidebar-header');
     	this.$toggleButton = $('.navbar-toggle');
 
-    	this.sidebarImg = this.$sidebarHeader.css('background-image');    	
+    	this.sidebarImg = this.$sidebarHeader.css('background-image');
 
 		this.addEventListeners();
 	},

website/source/assets/javascripts/demo/controllers/demo.js

@@ -9,5 +9,11 @@ Demo.DemoController = Ember.ObjectController.extend({
     var index = this.get('currentLog.length') + this.get('cursor');
 
     this.set('currentText', this.get('currentLog')[index]);
-  }.observes('cursor')
+  }.observes('cursor'),
+
+  actions: {
+    close: function() {
+      this.transitionTo('index');
+    }
+  }
 });

website/source/assets/javascripts/demo/views/demo.js

@@ -2,7 +2,15 @@ Demo.DemoView = Ember.View.extend({
   classNames: ['demo-overlay'],
 
   didInsertElement: function() {
-    var element  = this.$();
+    var controller = this.get('controller'),
+        overlay    = $('.sidebar-overlay'),
+        element    = this.$();
+
+    overlay.addClass('active');
+
+    overlay.on('click', function() {
+      controller.transitionTo('index');
+    });
 
     element.hide().fadeIn(300);
 
@@ -44,6 +52,9 @@ Demo.DemoView = Ember.View.extend({
   },
 
   willDestroyElement: function() {
+    // Remove overlay
+    $('.sidebar-overlay').removeClass('active');
+
     var element  = this.$();
 
     element.fadeOut(400);

website/source/assets/stylesheets/_demo.scss

@@ -32,6 +32,7 @@
         font-size: 30px;
         @include lato-light();
         transition: all 250ms ease-in;
+        cursor: pointer;
 
         &:hover{
             text-decoration: none;

website/source/assets/stylesheets/_sidebar.scss

@@ -1,4 +1,4 @@
-  
+
 // Base variables
 // --------------------------------------------------
 $screen-tablet:          768px;
@@ -460,7 +460,7 @@ $sidebar-font-weight: 300;
   bottom: 0;
   opacity: 0;
   background: $white;
-  z-index: $zindex-sidebar-fixed - 1;
+  z-index: 2;
 
   -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
   -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
@@ -473,7 +473,7 @@ $sidebar-font-weight: 300;
 }
 
 .sidebar-overlay.active {
-  opacity: 0.8;
+  opacity: 0.3;
   visibility: visible;
   -webkit-transition-delay: 0;
   -moz-transition-delay: 0;