better responsive breakpoints, more robust custom grid

styles/app/index.styl

@@ -8,6 +8,10 @@
 @import "./items.styl";
 @import "./alerts.styl";
 @import "./helpers.styl";
+@import "./responsive.styl";
+
+// where's the actual bootstrap include?
+// @import "../bootstrap-responsive.styl";
 
 @import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
 
@@ -35,7 +39,7 @@ html,body,p,h1,ul,li,table,tr,th,td
   box-sizing: border-box
   z-index: 1000
 
-@media (max-width: 480px) {
+@media (max-width: 600px) {
   #head {
     position: static;
   }
@@ -132,7 +136,7 @@ html,body,p,h1,ul,li,table,tr,th,td
   /*overflow:auto;*/                                                                                                                                                                                                                             
   padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
 
-@media (max-width: 480px) {
+@media (max-width: 600px) {
   #wrap {
     margin-top: 0
   }

styles/app/responsive.styl

@@ -0,0 +1,28 @@
+.grid
+	padding: 0 1.5em 1.5em 0
+	letter-spacing: -4px
+
+.module
+	display: inline-block
+	letter-spacing: normal
+	vertical-align: top
+	width: 25%
+	padding: 0 0 1.5em 1.5em
+	-moz-box-sizing: border-box
+	box-sizing: border-box
+
+// at 960px when 4 columns really starts to break
+@media (max-width: 60em)
+	.module
+		width: 50%
+	.task-column
+		max-height: 18em
+		overflow-y: scroll
+
+// at 600px when 2col starts breaking
+@media (max-width: 37.5em)
+	.module
+		width: 100%
+		.task-column
+			max-height: none
+			overflow: visible

views/app/index.html

@@ -28,9 +28,9 @@
 <Body:>
   <br/>
   <div id="notification-area"></div>
-  <div id=wrap class="container-fluid">
+  <div id="wrap">
     <app:alerts:alerts />
-    <div id=main class="row-fluid">
+    <div id=main class="grid">
       <app:taskLists />
     </div>
   </div>

views/app/tasks.html

@@ -1,18 +1,27 @@
 <taskLists:>
-    <!--helpTitle & helpContent moved to tour -->
-    <div class="task-column span3 habits">
+<!--helpTitle & helpContent moved to tour -->
+
+<!-- Habits Column -->
+<div class="module">
+    <div class="task-column habits">
         <h2>Habits</h2>
         <app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
         <ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
     </div>
+</div>
 
-    <div class="task-column span3 dailys">
+<!-- Dailys Column -->
+<div class="module">
+    <div class="task-column dailys">
         <h2>Daily</h2>
         <app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
         <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
     </div>
+</div>
 
-    <div class="task-column span3 todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
+<!-- Todos Column -->
+<div class="module">
+    <div class="task-column todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
         <span class='option-box pull-right'>
             {#if _user.history.todos}
               <a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
@@ -36,11 +45,12 @@
             <li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
             <li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
         </ul>
-
     </div>
+</div>
 
-    <div class="task-column span3 rewards">
-
+<!-- Rewards Column -->
+<div class="module">
+    <div class="task-column rewards">
         <!--Title -->
         <div class="row-fluid">
             <div class="span6"><h2>Rewards</h2></div>
@@ -117,11 +127,12 @@
                 <!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
             </ul>
         </div>
-    {else}
+        {else}
         <app:rewardsTab />
-    {/}
-    </div>
+        {/}</div>
+</div>
 
+<!-- Templates -->
 <newTask:>
     <form class="addtask-form form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
         <input class="addtask-btn" type="submit" value="＋">