big style updates

src/index.html

@@ -13,13 +13,35 @@
   
   <div id="interfaceWrapper" class="box horizontal flex1">
     <div id="controls" class="box vertical flex1">
-      <div id="hintsEtc" class="box vertical flex3">
+      <div id="hintsEtc" class="box vertical">
       </div>
 
       <div id="commandLineHistory" class="box vertical flex3">
+          <div class="toolbar box vertical">
+            <div class="controls box horizontal">
+              <div class="box flex1">
+                <div class="close">
+                </div>
+              </div>
+              <div class="box flex1">
+                <div class="minimize">
+                </div>
+              </div>
+              <div class="box flex1">
+                <div class="plus">
+                </div>
+              </div>
+            </div>
+            <div>
+              <i class="icon-home"></i>
+              Learn Git Branching
+            </div>
+          </div>
+        <div id="terminal" class="box flex1 vertical">
           <div id="commandDisplay">
           </div>
         </div>
+      </div>
 
       <div id="commandLineBar" class="box vertical flex0">
         <textarea id="commandTextField"></textarea>
@@ -27,7 +49,7 @@
     </div>
 
     <div id="canvasWrapper" class="box flex1">
-      <canvas id="treeCanvas" width="20" height="20"></canvas>
+      <canvas id="treeCanvas" class="box"></canvas>
     </div>
   </div>
 
@@ -42,7 +64,7 @@
   <!-- Templates -->
   <script type="text/html" id="command-template">
       <p class="commandLine transitionBackground <%= status %>">
-        <span class="arrows">$</span>
+        <span class="prompt">$</span>
         <%= rawStr %>
         <span class="icons transitionOpacity">
           <i class="icon-exclamation-sign"></i>

src/main.js

@@ -36,5 +36,13 @@ $(document).ready(function(){
   });
 
   $('#commandTextField').focus();
+
+  $(window).resize(windowResize);
+  windowResize();
+  setTimeout(windowResize, 50);
 });
 
+function windowResize() {
+  var el = $('#canvasWrapper')[0];
+  $('#treeCanvas').height(el.clientHeight - 10).width(el.clientWidth - 10);
+}

src/style/main.css

@@ -9,14 +9,6 @@ body {
 }
 
 html, body {
-  /*
-  background: -moz-radial-gradient(center, ellipse cover, #0066cc 0%, #000000 90%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0066cc), color-stop(90%,#000000));
-  background: -webkit-radial-gradient(center, ellipse cover, #0066cc 0%,#000 90%);
-  background: -o-radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
-  background: -ms-radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
-  background: radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%); */
-
   -webkit-perspective: 600px;
 
   font-family: Monaco, Courier, font-monospace;
@@ -75,7 +67,8 @@ div.horizontal {
 }
 
 #treeCanvas {
-  border: 3px solid black;
+  box-shadow: 0px 0px 3px black inset;
+  position: absolute;
 }
 
 #interfaceWrapper {
@@ -83,6 +76,8 @@ div.horizontal {
 }
 
 #controls {
+  max-width: 400px;
+  background: #4183C4;
 }
 
 #canvasWrapper {
@@ -91,6 +86,82 @@ div.horizontal {
 #commandTextField {
 }
 
+/* Toolbar */
+
+div.toolbar {
+  /* borrowed from try.github.com along with a bunch of other things */
+  background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1);
+  border-radius: 5px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid #6287A4;
+  border-bottom: 0;
+  height: 30px;
+  position: relative;
+  text-align: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  color: black;
+  -webkit-box-pack: center;
+}
+
+div.toolbar div.controls {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  width: 57px;
+  height: 13px;
+  -webkit-box-pack: justify;
+}
+
+div.toolbar div.controls div i {
+  text-shadow: 0.1em 0.1em rgba(255, 255, 255, 0.5);
+}
+
+div.toolbar div.controls div.box.flex1 {
+  text-align: center;
+}
+
+div.toolbar div.controls div.box.flex1 div {
+  width: 12px;
+  height: 11px;
+  border-radius: 24px;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-top: 1px solid #413838;
+  border-bottom: 1px solid #8B8B8B;
+  cursor: pointer;
+}
+
+div.controls div.box.flex1 div.close {
+  background: #ed7171;
+  background: -webkit-gradient(linear, left top, left bottom, from(#960000), to(#ed7171));
+  background: -webkit-linear-gradient(top, #960000, #ed7171);
+  background: -moz-linear-gradient(top, #960000, #ed7171);
+  background: -ms-linear-gradient(top, #960000, #ed7171);
+  background: -o-linear-gradient(top, #960000, #ed7171);
+}
+
+div.controls div.box.flex1 div.minimize {
+  background: #e2ed93;
+  background: -webkit-gradient(linear, left top, left bottom, from(#e6f51b), to(#e2ed93));
+  background: -webkit-linear-gradient(top, #e6f51b, #e2ed93);
+  background: -moz-linear-gradient(top, #e6f51b, #e2ed93);
+  background: -ms-linear-gradient(top, #e6f51b, #e2ed93);
+  background: -o-linear-gradient(top, #e6f51b, #e2ed93);
+}
+
+div.controls div.box.flex1 div.plus {
+  background: #75e86f;
+  background: -webkit-gradient(linear, left top, left bottom, from(#36b309), to(#75e86f));
+  background: -webkit-linear-gradient(top, #36b309, #75e86f);
+  background: -moz-linear-gradient(top, #36b309, #75e86f);
+  background: -ms-linear-gradient(top, #36b309, #75e86f);
+  background: -o-linear-gradient(top, #36b309, #75e86f);
+}
+
+/* Command Line */
+
 p.commandLine, p.commandLineResult {
   opacity: 1;
   font-size: 16px;
@@ -119,12 +190,12 @@ p.commandLine.error {
 }
 
 p.commandLine.inqueue {
-  background-color: yellow;
+  background-color: #EBEB24;
   color: black;
 }
 
 p.commandLine.processing {
-  background-color: #57EE6F;
+  background-color: #36AD49;
   color: white;
 }
 
@@ -141,18 +212,29 @@ p.commandError, p.errorResult {
   color: red;
 }
 
-p.commandLine span.arrows {
+p.commandLine span.prompt {
   color: greenyellow;
   font-weight: bold;
 }
 
+p.commandLine.inqueue span.prompt {
+  color: black;
+}
+
 #commandLineBar {
   text-align: center;
 }
 
 #commandLineHistory {
-  overflow-y: scroll;
+  margin: 10px;
-  background: #000;
+  border-radius: 5px;
-  opacity: 0.85;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;
 }
+
+#terminal {
+  background: #424242;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;
+  border: 1px solid #6287A4;
+  border-radius: 0 0 5px 5px;
+}
+