Reworked cammie grid

content/assets/stylesheets/includes/cammie.scss

@@ -20,49 +20,50 @@
   position: relative;
   height: 100%;
   #cammie-body {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
     position: relative;
     height: 100%;
-  }
 
-  .ctrl {
-    background-color: $cammie-controls-color;
-    color: white;
-    z-index: 100;
-    position: absolute;
+    transition: opacity 1s ease-in-out;
+    opacity: 0;
 
-    // Chevron centering
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    &.display {
+      transition: opacity .5s ease-in-out;
+      opacity: 1;
+    }
 
-    &:hover {
-      background-color: $zeus_orange;
-      z-index: 200;
-      cursor: pointer;
+    .ctrl {
+
+      background-color: $cammie-controls-color;
+      color: white;
+      &:hover {
+        background-color: $zeus_orange;
+        cursor: pointer;
+      }
+    }
+
+    .row {
+      display: flex;
+      justify-content: space-between;
+
+      // Space rows
+      &.top-row, &.middle-row, &.bottom-row {
+        flex-basis: 0;
+      }
+      &.top-row, &.bottom-row {
+        flex-grow: 1;
+      }
+
+      &.middle-row {
+        flex-grow: 8;
+      }
+
+      // Enlarge middle column
+      .center {
+        flex-grow: 8;
+      }
     }
   }
-
-  .left {
-    height: 100%;
-    width: 50px;
-    left: 0;
-  }
-
-  .right {
-    height: 100%;
-    width: 100px;
-    right: 0;
-  }
-
-  .up {
-    height: 100px;
-    width: 100%;
-    top: 0;
-  }
-
-  .down {
-    height: 100px;
-    width: 100%;
-    bottom: 0;
-  }
 }

content/cammie.erb

@@ -30,29 +30,24 @@ title: Cammie
   -->
 
   <div id="cammie-body">
-    <div class="columns">
-      <div class="column">
-        <div class="ctrl left">
-          diag up left
-        </div>
+    <div class="cammie-ctrls top-row row">
+      <div class="column ctrl left">
+        diag up left
       </div>
-      <div class="column">
-        <div class="ctrl up">
-          up
-        </div>
+      <div class="column ctrl center">
+        up
       </div>
-      <div class="column">
-        <div class="ctrl right">
-          diag up right
-        </div>
+      <div class="column ctrl right">
+        diag up right
       </div>
     </div>
-    <div class="columns cammie-ctrls">
+
+    <div class="row middle-row cammie-ctrls">
       <div class="column ctrl left">left</div>
-      <div class="column ctrl center">home?</div>
+      <div class="column center">&nbsp;</div>
       <div class="column ctrl right">right</div>
     </div>
-    <div class="columns cammie-ctrls">
+    <div class="row bottom-row cammie-ctrls">
       <div class="column ctrl left">diag down left</div>
       <div class="column ctrl center">down</div>
       <div class="column ctrl right">diag down right</div>